Banner

The Banner allows administrators to post important messages, with an image, that will gain the attention of site visitors. Its primary function is similar to the Alert pop-up, but allows for messages to appear on screen without impeding access to the rest of the site. When enabled, the banner appears directly beneath the site's header section.

• Enable - check the Enable box to show the banner on the homepage
• Layout - click the radio button beside the desired layout
• Colors - click the color preview circle to enter the HEX or RGB color code, or use the selector to choose the color for:
  • Font - the font color for text within the banner
  • Link - the color for link text included within the banner
  • Background - the background color behind the banner
• Content - choose to display a small thumbnail image and text
  • Click Upload Image
    • Browse to and select the image file to be displayed
  • Content - add a message to appear

• Click Save, at the bottom of the style editor to save any configuration changes.

Branding

The branding section allows you to mange various settings, including: your site name, slogan, logo, and favicon.

• Display Elements - this section is used to show or hide the site name, slogan, and logo that can appear in the header section of your site
  • Show site name - check to show the site name, uncheck to hide
  • Show slogan - check to show the slogan, uncheck to hide
  • Show logo - check to show the logo, uncheck to hide
• Site and Slogan - here you can enter the site name and slogan, if desired, as well as set the font colours for these items
  • Site name - add a name for your site
  • Slogan - add a slogan for your site
  • Colors - click the color preview circle to enter the HEX or RGB color code, or use the selector to choose the color for the site name and slogan
• Logo - choose to upload your own logo or use the default Stacks logo for your site
  • Click Choose File
    1. Browse to and select the image file for your own logo
       • File types supported include: .svg, .gif, .png, .jpg, .jpeg
  • Alternative text for logo - enter alternative text to appear in place of a logo, if desired
  • Width - manually adjust the size of the logo by entering a value in the width field
    • Stacks will automatically resize the logo based on this value
• Favicon - favicon are small icons that appear in the tab of most modern browsers, next to the site name, making it easier for users that have multiple browser tabs open to quickly find your site. The optimal size for a favicon is 16x16 px, and uses the extension .ico
  • The default is the Stacks icon, but this can be changed, to do so:
    1. Uncheck Use default favicon
    2. Click Choose File
       1. Browse to and select the image file 

Click Save, at the bottom of the style editor to save any configuration changes.

Footer

The footer area of your site is reserved for contact information, including phone numbers, email addresses, additional websites, links to other pages, social media accounts, and more.

• Layout - click the radio button beside one of the 5 options for your desired layout
• Colors - click the color preview circle to enter the HEX or RGB color code, or use the selector to choose the color for: Font, Link, Border, and Background
• Display Menu - check Enable to display the menu tab
  • This option will be visible if your site administrator has created a footer menu

Click Save, at the bottom of the style editor to save any configuration changes.

Footer Menu

From here, administrators can set the color of the footer menu, this does not change the colors of other elements that are displayed in the footer.

• Click the color preview circle to enter the HEX or RGB color code, or select the color that will appear for text, links, border, and background

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

Header

Administrators have the ability to configure the layout of the search bar, main menu, call-to-action-buttons, and if applicable, the image that will be placed behind the search bar in the upper portion of each page on your Stacks site.

• Display Elements
  • Choose to display the page title on each of your Stacks site pages by checking the Enable Page Title box
• Layout
  • Select from 1 of 11 different header layouts; each option has a small preview that shows the arrangement of the Logo, Search Bar, and call-to-action buttons
• Background Image
  
  • From here there are 3 options to configure: background color, upload image, or select an image available from the image gallery
    • Header Background Color - click the color preview circle to enter the HEX or RGB color code, or select the color that will appear for the background
    • Upload Image/Image Gallery - use a custom image as the header background; OR  choose a free image, powered by pixels.com, from the Image Gallery
      • To upload an image
        1. Click Upload Image
        2. Check Enable Upload Background
        3. Click Choose File
           1. Browse to and select the desired image from your computer
      • To choose from the image gallery
        1. Click Image Gallery
        2. Check Enable Image Gallery
        3. Click the Photo Credits color preview color circle to select a color for the text that will be used to credit the image’s creator
        4. Click the Select Image button
           1. Enter a search term that will query pexels.com, then select your desired image

Click Save, at the bottom of the style editor to save your configuration changes.

Main Navigation

The Main Navigation section of the style editor allows you to control the colors and behaviors related to the Main Menu. Expand the Colors section to adjust the colors for the Link color, Drop Down.  

• Colors - click the color preview circle to enter the HEX or RGB color code, or select the color that will appear for links, drop-down links, and the drop-down background
• Menu Behavior - click the radio  button for the desired help menu behavior, click or hover

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

Mobile Menu

The Mobile Menu section of the style editor allows you to control the colors related to the Mobile menu that appears when viewing the Stacks site on a mobile phone, tablet, or smaller-sized browser.

• Click the color preview circle to enter the HEX or RGB color code, or select the colors that will appear for the icon, font, and background

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

Page Content

From the Page Content section of the style editor, you can select the amount of screen space to use, choosing from 100% width or 50% Width, both centered.  You can also adjust the page content's border and background colors by expanding the colors tab in the page content section.

• Click the color preview circle to enter the HEX or RGB color code, or select the color that will appear for the border and background

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

Search

The Search section allows you to control the look and feel of a number of different settings, including display elements, layout, colors, tabs, call to action buttons, embed buttons, and limiters.

• Display Elements - check Enable Button Icon to replace the search button label with a search icon
• Layout - click the radio button beside your 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
  • Also, under Border Thickness, enter a value for the thickness of the border
• Tabs - here you can control the colors of the search bar 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
    • Also, under Active Border thickness, enter a value for the thickness of the border
• Call to Actions - these are four buttons located directly under or beside the main search bar, depending on the header theme selected
  • 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
    • Also, under Border thickness, enter a value for the thickness of the border
• 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. This is visible when the option Show Embed button is selected from Main Dashboard > 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
• 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 Main Dashboard > 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

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

Top Header

The Top Header is the very top page area of your site, directly above your main search bar. Its appearance will vary based on the theme options selected but generally contains your Site Logo, Site Name, Site Slogan, Top Menu, Language selection, Page Icons, and more.

• Display Elements - check the Enable language switcher icon to replace the standard drop-down appearance for the language picker with a globe icon
• Colors - click the color preview circle to enter the HEX or RGB color code, or select the colors that will appear for the: link, icon, border, background, dropdown link, dropdown background colors