Sitewide Layout – Stacks for Libraries

The sitewide layout section of the style editor allows administrators to configure or modify the display of various elements of your Stacks site. Much of the current layout and appearance of items listed here will be based on the Theme selected for your site.

The following style editor settings allow you to override these individual elements without affecting other theme elements. Specifically, this article will take a closer look at these settings which include:

Banner
Branding
Footer
Footer Menu
Header
Main Navigation
Mobile Menu
Page Content
Search
Top Header

Accessing the Style Editor

To access the style editor:

Log into your Stacks site using an Administrator user account
From your homepage (or any landing page), click the paint brush icon in the bottom right

Important! Only users with the Administrator role have access to the style editor.

Banner

The Banner feature allows you to post important messages on your Homepage which appear directly under the Header and does not impede access to the rest of the site. This custom message can include an image and the font, link, and background colors are all configurable to help make the message stand out.

Enable, check/uncheck to enable or disable the banner feature
Layout, select the desired layout for the banner message that will be displayed
- Click the radio button beside the desired layout
Colors, choose the colors for the Font, Link, and Background of the banner message
- 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
Content - this is the content of the message
- Upload Image
  - Click Choose File, to browse your computer and select the image file to be displayed
- Content
  - Click in the box to add the message to appear, noting that this can include links if desired
Click Save, at the bottom of the style editor to save any configuration changes

Branding

The branding section allows you to manage various settings associated with your site's branding, 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 - enter the name for your site
- Slogan - enter a slogan for your organization/site
- Colors - choose the font colors for the Site name and Slogan
  - 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
Logo - the logo will appear in the top left corner of your site. Once added, clicking this logo will also return users/patrons to the homepage. By default, new sites will display the Stacks logo, to change/upload your own logo
- Click Choose File, to browse your computer and select the logo file to be displayed
  1. Supported file types 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, to browse your computer and select the favicon file to be displayed
    - Favicon image files 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.

Layout, select the desired layout for the footer appearance
- Click the radio button beside the desired layout option
Colors - choose the colors for the Font, Link, Border and Background color elements of the footer
- 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
Display Menu, a menu will be displayed if you have created a footer menu
- Enable , check this box to enable the menu display

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.

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.

Header

The header is the top area of your Stacks site that can contain elements such as the search bar, main navigation menu, and call to action buttons.

Display Elements
- Enable Page Title, check this box to display the page title on each of your Stacks site pages
Layout, if you wish to override the selected theme's header layout, here you can choose a different layout
- Click the radio button beside the desired layout option
Background Image, choose to display either a background color or image for the header area
- Header Background
  - 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
- Upload Image OR Image Gallery - choose to upload your own header image or select from a gallery of pre-uploaded images powered by pixels.com
  - To upload an image
    1. Click the Upload Image button
    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 the Image Gallery button
    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 , choose the colors for the Link, Drop down link, and Dropdown 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
Settings, allows you to choose the menu behavior when users/patrons are navigating the menu
- Click the radio button beside the desired behavior option
  - Note, selecting 'Hover' would not be accessible to users with disabilities

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.

Colors, choose the desired colors for the Icon, Icon Hover, Font, Font Hover, and 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

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

Page Content

Here, you can identify how the page content should appear.

Width, choose the desired content width
- Click the radio button beside the desired width option
Colors, choose the colors for the Border and Background
- 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.

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

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
- Enable language switcher icon, check this box to replace the standard drop-down appearance for the language picker with a globe icon
Colors, choose the colors for the Link, Icon, Background, Dropdown link, and Dropdown background colors associated with this area
- 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
- Important! The dropdown link and dropdown background colors will only apply if the top menu has items that are expandable and contain child menu links

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