Adding and Editing FAQ Themes

Instructions to add themes for FAQs with Spider FAQ plugin.

This section allows adding or editing the default themes for the FAQ sections. Below you will find the detailed descriptions of the options in various parameter groups of the Theme.

  • From the navigation bar on the left select FAQ >Themes.
  • Click on the Add a Theme button on the upper right hand of the screen or choose a theme from the list of built-in themes.

There are 22 themes available. If you change the parameters of the default theme, there is a Reset Theme button in the General Parameters section for resetting the parameters of the default theme to their original values.

General Parameters

Theme Title. Add a title for the theme. Background.** Choose a background for the FAQ section:

  • Color. Choose a solid background color for the FAQ section.
  • Image. Select a background image.
  • Transparent. The background of the FAQ section will be transparent (empty).

Width. Define the width of the FAQ section.

Category Parameters

Title

Background. Choose whether to have a background or not. If yes, select a background color and choose whether to apply gradient or not. If you choose to apply gradient, you will also need to select the gradient direction (from top to bottom, from left to right, or centered) and the two extreme points of the linear color gradient.

Text color. Choose the color of the title text.

Font size. Define the font size of the title text.

Margin. Specify the spaces (top, right, bottom, and left) outside the title box border, between the border and other elements surrounding the box(e.g. “10 5 15 20”).

Padding. Specify the spaces (top, right, bottom, and left) inside the title box border, between the border and title text (e.g. “10 5 15”, where 5 stands for right and left paddings).

Border Style. Choose the style of the border from the list.

Border Width. Define the width of the border in pixels.

Border Color. Select the border color.

Border Corner Radius. Define the corner radius of the border. This option is for making the corners of the border round. Its value signifies the radius of the circle that fits in the corner of the box border. If you do not want to round the corners at all, you need to type in ‘0’ or leave the field blank.

Description

Background. Choose whether to have a background or not. If yes, select a background color and choose whether to apply gradient or not. If you choose to apply gradient, you will also need to select the gradient direction (from top to bottom, from left to right, or centered) and the two extreme points of the linear color gradient.

Text color. Choose the color of the description text.

Font Size. Define the font size of the description text.

Margin. Specify the spaces (top, right, bottom, and left) outside the description box border, between the border and other elements surrounding the box(e.g. “10 5”, where 10 stands for top and bottom margins, and 5 stands for right and left margins).

Padding. Specify the spaces (top, right, bottom, and left) inside the description box border, between the border and title text (e.g. “10”, which means that all four paddings are 10px).

Border Style. Choose the style of the border from the list.

Border Width. Define the width of the border.

Border Color. Choose the color of the border .

Border Corner Radius. Define the corner radius of the border. This option is for making the corners of the border round. Its value signifies the radius of the circle that fits in the corner of the box border. If you do not want to round the corners at all, you need to type in ‘0’ or leave the field blank.

Question Title Parameters

Space between Questions. Specify the space between questions in pixels.

Margin (left). Define the left margin(outside the border) for the questions section.

Height. Define the height of the question area.

Width. Define the width of the question area.

Font Size. Define the font size of the questions text.

Text Width. Define the width of the question text block (percentage).

Padding (left). Specify the space inside the question box border, between the left border and question text.

Text Color. Choose the color of the question text.

Background. Choose a background type for the question boxes.

  • Color. Select a background color and choose what color the background appears when the mouse is hovered over the question box.
  • Image. Select a background image.

Gradient. Choose whether to apply gradient or not. If you choose to apply gradient, you will also need to select the gradient direction (from top to bottom, from left to right, or centered) and the two extreme points of the linear color gradient.

Background Color. Select the background color.

Backgrould Hover Color. Select the background color when hovered.

Border Style. Choose the style of the question box border from the list.

Border Top Style. Choose the style of the question box for the top part.

Border Right Style. Choose the style of the question box for the right corner.

Border Width. Define the width of the border.

Border Color. Choose the color of the border.

Border Corner Radius. Define the corner radius of the border.This option is for making the corners of the border round. Its value signifies the radius of the circle that fits in the corner of the box border. If you do not want to round the corners at all, you need to type in ‘0’ or leave the field blank.

Numbering. Choose whether to have a numbering for the questions or not.

Numbering Font Size. Choose the font size for the numbers.

Numbering Color. Specify the color for the numbers.

Bullet image (Collapsed). This field allows selecting a bullet image for the questions, which is displayed when the question is collapsed.

Image Margin (left). Define the left margin of the bullet image.

Bullet Image(Expanded). This field allows selecting a bullet image for the questions, which is displayed when the question is expanded.

Image Margin (left). Define the left margin of the bullet image.

Image Position. Specify the position of the added image.

Answer parameters

Width. Define the width of the answer box.

Padding. Specify the spaces (top, right, bottom, and left) inside the answer box border, between the border and the text (e.g. “10 5 15 20”).

Font size. Define the font size of the answer text.

Text color. Choose the color of the text.

Background. Choose a background type for the answer boxes.

  • Color. Select a background color.
  • Image. Select a background image.

Background Color. Choose the background color.

Background Size. Specify what area of the question box the background covers.

Border Style. Choose the style of the border from the list.

Border Right Style. Choose the style of the right border.

Border Width. Define the width of the border.

Border Color. Choose the color of the border.

Border Corner Radius. Define the corner radius of the border. This option is for making the corners of the border round. Its value signifies the radius of the circle that fits in the corner of the box border. If you do not want to round the corners at all, you need to type in ‘0’ or leave the field blank.

Content Padding. Specify the spaces (top, right, bottom, and left) inside the answer box, between the border and the text. You should specify a single number, the padding will take the same padding from all sides.

Content Width. Specify the width of the answer box.

Padding (left). Please specify a left padding for the answer box if you want to move it to the right.

Icon Color. Choose the icon color for the answer from light and dark options.

Data Width. Define the width of the username and date box.

Data Height. Define the height of theusername and date box.

Data Margin (left). Define the left margin for the username and date box.

Data Text Color. Choose the font color for the username and date box.

Data Background Color. Choose the background color for the username and date box.

Data Border Style. Specify the border style for username and date box.

Data Border Width. Define the border width for the username and date box.

Data Border Color. Choose the border color for the username and date box.

Data Border Corner Radius. Define the corner radius of the username and date box border. This option is for making the corners of the border round. Its value signifies the radius of the circle that fits in the corner of the box border. If you do not want to round the corners at all, you need to type in ‘0’ or leave the field blank.

Data Border Top Style. Specify the top border style for username and date box.

Data Border Bottom Style. Specify the bottom border style for username and date box.

Like Hits Data Width. Define the width of the like and hits box.

Like Hits Data Margin (left). Define the left margin for the like and hits box.

Like Hits Data Background Color. Choose the background color for the like and hits box.

Like Hits Data Border Style. Specify the border style for like and hits box.

Like Hits Data Border Width. Define the border width of the like and hits box.

Like Hits Data Border Color. Choose the border color for the like and hits box.

Like Hits Data Border Top Style. Specify the top border style for like and hits box.

Like Hits Data Border Bottom Style. Specify the bottom border style for like and hits box.

Like Hits Data Border Corner Radius. Define the corner radius of the like and hits box border. This option is for making the corners of the border round. Its value signifies the radius of the circle that fits in the corner of the box border. If you do not want to round the corners at all, you need to type in ‘0’ or leave the field blank.

Like Hits Data Text Color. Choose the font color for the like and hits box.4.4.38 Image (before text). Here you can upload an image that will appear at the top of the answer.

Image width. Define the width of the image.

Image height. Define the height of the image.

Image margin. Specify the spaces (top, right, bottom, and left) outside the image border, between the border and other elements surrounding the image (e.g. “10 5”, where 10 stands for top and bottom margins, and 5 stands for right and left margins).

Image (after text). Here you can upload an image that will appear at the bottom of the answer.

Image Width. Define the width of the image.

Image Height. Define the height of the image.

Image Margin. Specify the spaces (top, right, bottom, and left) outside the image border, between the border and other elements surrounding the image(e.g. “10”, which means that all four margins are 10px).

Search Box Parameters

Background color. Choose whether to have a background or not. If yes, select a background color.

Expand/Collapse Parameters

Color. Choose the color of Expand/Collapse links.

Hover color. Choose the color of Expand/Collapse links when hovered.

Font size. Define the text font size of the Expand/Collapse links.

Margin. Specify the spaces (top, right, bottom, and left) outside the Expand/Collapse links area, between the area and other elements surrounding it (e.g. “10 0”, which means that top and bottom margins are 10px, and right and left margins are 0px).

“Read More” Button Parameters

Color. Choose the color of the “Read More” button.

Hover Color. Choose the color of the “Read More” button on hover.

Font Size. Define the font size of the button label.