Style Editor Settings for the Search Bar – Stacks for Libraries

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.

Search Settings

Once logged in, users with the administrator role can access the style editor by navigating to the homepage or another landing page, then click the paint brush icon near the bottom right corner.

Once the style editor is open, from the Sitewide Layout section, scroll to and click Search to expand the section and see the setting options.

Display Elements
- Enable Button Icon, check this box to replace the search button label with a search icon
Layout, select the desired search bar layout
- Click the radio button beside the desired layout option
- Enable Padding, check this box to wrap the search bar with a border
Colors , choose the colors for the Border, Background, Button font, Button background, Placeholder text, and Input Background colors
- To enter or select a color:
  - Click the color indicator icon beside the desired color setting
  - Enter the HEX or RGB color code; OR use the color selector to choose the desired color
  - Click Choose when finished
- Border Thickness, enter a value (up to 50px) for the thickness of the border
Tabs , configure the appearance of tabs, if the tab style option is selected to display various search options
- Colors, choose the colors for the Font, Background, and Active Border highlight colors
  - To enter or select a color:
    - Click the color indicator icon beside the desired color setting
    - Enter the HEX or RGB color code; OR use the color selector to choose the desired color
    - Click Choose when finished
  - Active Border thickness, enter a value (up to 50px) for the thickness of the active border (this is used to help indicate which tab is currently selected)
Call to Actions, CTA buttons can be displayed under or beside the main search bar, depending on the header layout selected. For more information on creating these buttons see the Header article in the System Configuration section of the user guide
- Colors, choose the colors associated with Font, Background, Border, Background hover, and Font hover colors
  - To enter or select a color:
    - Click the color indicator icon beside the desired color setting
    - Enter the HEX or RGB color code; OR use the color selector to choose the desired color
    - Click Choose when finished
  - Border thickness, enter a value (up to 50px) for the thickness of the border
Embed Button, the embed button appears directly under the main search bar and provides users with a small amount of widget code that can be applied to an external site to take advantage of the Stacks search functionality
- Important! This is only visible when the option Show Embed button is selected from search configuration Settings
- Colors, choose the colors for the Font and Background colors for the button
  - To enter or select a color:
    - Click the color indicator icon beside the desired color setting
    - Enter the HEX or RGB color code; OR use the color selector to choose the desired color
    - Click Choose when finished
Limiters - when the EBSCO Discovery Service (EDS) 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 associated with it
- Choose the colors for the Font, Background, and Border colors for the limiters
  - To enter or select a color:
    - Click the color indicator icon beside the desired color setting
    - Enter the HEX or RGB color code; OR use the color selector to choose the desired color
    - Click Choose when finished

Be sure to click Save at the bottom of the style editor to save any configuration changes.