Banner

The Banner allows administrators to post important messages, which can include an image, that will gain the attention of site visitors.

While the primary function of the banner is similar to that of the Alert pop-up, this message will 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 this 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 - here is where you can enter the message to appear, including the display of a small thumbnail image
  • Upload Image
    • Click Choose File
      • Browse to and select the image file to be displayed
  • Content
    • Click in the box to add the message to appear, this can include links if desired as well

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

Branding

The branding section allows you to manage 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/uncheck to show or hide the site name
  • Show slogan - check/uncheck to show or hide the slogan
  • Show logo - check/uncheck to show or hide the logo
• 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 - a favicon is a small icon that will appear in the tab of most modern browsers, next to the site name. A favicon not only helps reinforce branding, but it can help people quickly find your site if they have multiple browser tabs open. 
  • The default is the EBSCO icon (a white capitalized E on a blue background), but this can be changed, to do so:
    • Uncheck Use default favicon
    • Click Choose File
      • Browse to and select the image file
        • Favicons typically use a .ico extension, optimal size is 16px x 16px

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.

The current layout and appearance will be based on the Theme selected for your site, but the following options can be configured to override the footer appearance without affecting other theme elements.

• Layout - click the radio button beside the desired layout to change as needed
• Colors - click the color preview circle to enter the HEX or RGB color code, or use the selector to choose the color for the following options: Font, Link, Border, and Background
• Display Menu
  • Click 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 the menu

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.

The current layout and appearance will be based on the Theme selected for your site, but the following options can be configured to override the header appearance without affecting other theme elements.

• Display Elements - check Enable Page Title to display the page title on each of your Stacks site pages
• Layout - click the radio button to select a different header layout
• Background Image 
  • 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 the following options: Link color, Drop down link color, and Dropdown Background color
• Settings
  • Menu Behavior - click the radio button beside the desired behavior option for how users can interact with menus

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 identify you would like the page content to appear. 

• Click the radio button beside the desired Page Content width
• 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 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
  • 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 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 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

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 - Click 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