
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
Searchable FAQ Changelog
Version 1.0.4
- Updated Info.plist information to match new website information
Version 1.0.3
- Made general performance improvements to the stack
Version 1.0.2
- Fixed bug causing Fonts to not load in properly using Foundation and other stacks
Version 1.0.1
- Fixed Bug Causing title text to be selected when clicked
Version 1.0.0
- Live FAQ item filtering
- Live text highlighting
- Loading, Successful match, No-match indicators
- Customizable header section with a Title, Subtitle, and Search Bar
- Accordion style FAQs with customizable open/close options
- Custom open/close Icons
- Custom Icons for FAQ questions
- Fully responsive and fully customizable styling options
- Easy to use, easy to setup, works right out-of-the-box!