Through the Style Editor, you have the ability to configure the look and feel of the primary search bar and elements related to it. This can include display elements, layout, colors, tabs, call to action buttons, embed buttons, and limiters.
Accessing the Style Editor
Administrators can access the style editor by logging into their Stacks site, then click the paint brush icon in the bottom right corner.
Search Settings
Once the style editor is open, scroll to and click the Search menu under the Sitewide Layout section. The items listed below describe the settings that can be configured, click the menu name to expand the section(s).
-
Display Elements
- Enable Button Icon, check this box to replace the search button label with a search icon
-
Layout
- Click the radio button beside the desired layout option
-
Colors
- Click the color preview circle to enter the HEX or RGB color code, or select the colors that will appear for the: border, background, button icon, button background, placeholder text, and input background
- Border Thickness, to add a border, enter a value for the thickness of the border, the higher the number the thicker the border will appear
-
Tabs
- Click the color preview circle to enter the HEX or RGB color code, or select the colors that will appear for the: font, background, and active border highlight for search tabs (if enabled)
- Active Border thickness, enter a value for the thickness of the border that highlights the selected search tab, the higher the number the thicker the border
- Click the color preview circle to enter the HEX or RGB color code, or select the colors that will appear for the: font, background, and active border highlight for search tabs (if enabled)
-
Call to Actions
- These are four buttons located directly under or beside the main search bar, depending on the header theme selected
- The CTA button links are configured in the System Configuration > Header area
- Click the color preview circle to enter the HEX or RGB color code, or select the colors that will appear for the: font, background, background hover, and font hover colors
- Border thickness, enter a value for the thickness of the border around these buttons, the higher the number the thicker the border
- These are four buttons located directly under or beside the main search bar, depending on the header theme selected
-
Embed Button
- This is a button that appears directly under the main search bar, providing users with a small amount of widget code that can be applied to an external site to take advantage of the Stacks search functionality.
- NOTE: This is only visible when the option Show Embed button is selected from search configuration Settings
- Click the color preview circle to enter the HEX or RGB color code, or select the color that will appear for the font and background
- This is a button that appears directly under the main search bar, providing users with a small amount of widget code that can be applied to an external site to take advantage of the Stacks search functionality.
-
Limiters
- When the EBSCO Discovery Service API search is selected, limiters may appear as a drop-down menu or list of radio buttons, depending on the settings in the search configuration Settings.
- When the limiter style is set to Radio, you can configure colors.
- Click the color preview circle to enter the HEX or RGB color code, or select the colors that will appear for the: font, background, and border colors
- When the EBSCO Discovery Service API search is selected, limiters may appear as a drop-down menu or list of radio buttons, depending on the settings in the search configuration Settings.
Be sure to click Save at the bottom of the style editor to save any configuration changes.