Searchable FAQ

Table of Contents

• General Settings
• Header Settings
• Searchbar
• FAQ Items > General
• FAQ Items > Titlebar
• FAQ Items > Content

---

---

Introduction

Here you can learn how to use the Searchable stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. ^_-

---

General Settings

Open on Start (Checkbox)

Checking this option will make all of the FAQ items open initially when the page loads

Close Other Items on Open (Checkbox)

This checkbox option is quite self-explanatory; If checked, when a user clicks on an item, any other open items will close automatically.

Max Width

This will control the maximum width of the inner portion of the stack (not including the background). This includes the header portion and the maximum width of the FAQ items themselves.

Font Family (Select Dropdown)

Here you will be able to select the font for your Searchable FAQ.

We've included a great list of custom fonts for you, including:

• Rubik
• Quicksand
• Nunito
• Roboto
• Roboto Condensed
• Open Sans
• Josefin Slab
• Raleway
• Arvo
• Lato
• Vollkorn
• Abril Fatface
• Ubuntu
• Old Standard TT
• Droid Sans

You also have the option to select a custom font of your choice. If you select "Custom" from the dropdown menu, you will then see two new input fields appear. One for the FONT URL and The other for the FONT NAME

Note, there is no need to put quotes around the font name as, we will handle this for you.

Simply fill in these values accordingly and you will get your custom font.

---

Header Settings

Hide Title (Checkbox)

If you check this option, the title inside of the main header section of the stack will be hidden.

Hide Subtitle (Checkbox)

If you check this option, the subtitle inside of the main header section of the stack will be hidden.

Header BG (Color Picker)

This color picker will allow you to choose the background color of the header section of the stack where the titles and the searchbar are located.

Header Padding (Input)

Here you can adjust the padding of the header section of the stack.

Title Color (Color Picker)

This color picker will set the color of the title in the header section of the stack

Title Size (Input)

This input field allows you to set the font size of the main stack title

Title Weight (Select Dropdown)

• Bold
• Normal

Some fonts look better in bold than others, hence we have provided the option to choose the font-weight of the title in the header section

Subtitle Color (Color Picker)

This color picker will set the color of the subtitle in the header section of the stack

Subtitle Size (Input)

This input field allows you to set the font size of the main subtitle

No Results Color (Color Picker)

This color picker allows you to choose the color of the "No Results Found" text that appears when the search function cannot find any results for the stack. This text will show up in-place of all of the FAQ items, so you will want to choose a color that is good for a warning, but also blends in well with the background.

No Results Size (Input)

Here you can set the font-size of the "No Results Text"

No Results Text (Input)

This input fields allows you to choose the actual text/words that will show up when the stack cannot find any results matching the users search.

---

Search Bar

Place Holder Text (Input)

This is the default text that appears when the search bar is empty

Search Bar (Text & Background Color Pickers)

Here you can set the Background color and Text Color for the Search Bar

Height (Text & Background Color Pickers)

Here you can set the Background & Text Color of highlighted results found by the search function of the stack.

Icon Colors (Search, Found, None - Color Pickers)

To the right hand-side of the search-bar, small icons will appear depending on what the search-bar is currently doing. If the search is idle a search icon will appear. If there is a result found a checkbox icon will appear, and if there are no results found an error icon will appear.

• Search

The color of the Search Icon on the right of the search-bar

• Found

The color of the Checkbox Icon on the right of the search-bar when results are found

• None

The color of the Error Icon on the right of the search-bar when there are no results found

Max Width

You can set a separate maximum width for the search-bar just for aesthetic appeal.

Font Size

This input controls the size of the text inside of the search-bar

Padding

This input controls the size of the Padding inside of the search-bar

Radius

This input controls the roundness of the corners of the search-bar

Border (Toggle Buttons)

You will find two toggle buttons for the border One for turning the border of the search-bar on and One for turning it off

If you do turn the border on, you will see two new fields appear, one for the thickness of the border, and one for the color of the border.

Shadow (Toggle Buttons)

You will find two toggle buttons for the box-shadow One for turning the box-show of the search-bar on and One for turning it off

If you turn the shadow on, you will then see option to control the shadow color, X-offset, Y-offset, Blur, and Spread of the shadow.

---

FAQ Items > General

Here you will find general settings that affect the size, and layout of the FAQ Items

Spacing

This option controls the vertical spacing between each FAQ Item.

Radius

This option controls the roundness of the corners of each FAQ Item

Border (Toggle Buttons)

You will find two toggle buttons for the border One for turning the border of the FAQ Items on and One for turning it off

If you do turn the border on, you will see two new fields appear, one for the thickness of the border, and one for the color of the border.

Shadow (Toggle Buttons)

You will find two toggle buttons for the box-shadow One for turning the box-show of the FAQ Items on and One for turning it off

If you turn the shadow on, you will then see option to control the shadow color, X-offset, Y-offset, Blur, and Spread of the shadow.

---

FAQ Items > Titlebar

These settings control the styles of the Title-bar for each FAQ Item

Show Items Closed (Edit View) - (Checkbox)

This checkbox is simply for condensing the items in edit mode, so that they don't take up as much space.

Open Icon

We've include a few different options for the open dropdown icon of each FAQ Item:

• Arrow: A downward arrow
• Bars: A humburger style icon
• Plus: A basic plus symbol
• Plus Circle: A basic plus symbol inside of a circle
• Plus Box: A basic plus symbol inside of a slightly rounded box

Open Colors

Here you can set the Background & Text Color of the FAQ Items that are opened

Close Icon

We've include a few different options for the close dropdown icon of each FAQ Item:

• Arrow: A upward arrow
• Close (X): An X shaped icon
• Minus: A basic subtract symbol
• Minus Circle: A basic subtract symbol inside of a circle
• Minus Box: A basic subtract symbol inside of a slightly rounded box

Close Colors

Here you can set the Background & Text Color of the FAQ Items that are closed

Font Size

This input allows you to set the font-size of the title of each FAQ Item

Icon Size

This input controls the Size of the Icons next to the title in the FAQ Items

Padding

Here you can control the padding of the Title-bar of each FAQ Item

Font Weight

Some fonts look better in bold than others for titles, hence we have included the option to set the font weight for the titles of each FAQ Item to either:

• Normal
• Bold

---

FAQ Items > Content

Content Colors (Text & Background)

These two color pickers will allow you to set the color for the background of the content section of each FAQ Item, as well as the text color for the content.

Font Size

This input allows you to set the font-size for the content that will show up inside of the stack. Note that this is just the default, the actual font-size will depend on any specific stacks that you place into the content area.

Content Padding

Here you can add padding around the content are of each FAQ Item