Skip to main content

Global Settings

The global settings section of the style editor allows administrators to configure some of the more general appearance settings for your Stacks site, including:

Accessing the Style Editor

To access the style editor:

  1. Log into your Stacks site using an Administrator user account
  2. From your homepage (or any landing page), click the paint brush icon Screenshot 2025-06-06 at 4.50.28 PM.png in the bottom right

Accordions

Here you can adjust the colors associated with accordion appearance, this include colors for Text, Link, Background, Border, and Loading Icon colors.

  • Colors
    • To enter or select a color:
      • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png 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.

Back to Top

If your site has quite a bit of content on your homepage or any landing page that requires a lot of scrolling, you can enable the back to top button to make it easier for users/patrons to return to the top of the page.

  • Enable, check this box to enable the Back to Top button
    • This will appear in the bottom right corner of the website with as an upward pointing arrow

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

Block Content

Block content refers to any content that can be placed onto a landing page; this can include Callouts, Custom Blocks, Feeds, Resource Flows, Sliders, etc.  From here, administrators can configure the colors and border that can appear around these blocks of content.

  • Colors and Borders
    • Choose the colors associated with the Title Font, Content Border, and Content Background colors 
      • To enter or select a color:
        • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png 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 Border Thickness, enter a numerical value (up to 50px) to set the thickness of the border
      • Leave this blank for no border
    • Content Border
      • Select the option to set where the border should appear

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

Fonts and Colors

This area allows you to define the general fonts and colors used throughout your Stacks site. 

  • Google Fonts 
    • Enable, check this box to change the current font to a google font
    • Font Family - select from the list of all available fonts that can be used without requiring a license
      • Visit https://fonts.google.com to see a gallery of the available fonts; note Stacks does not have control over which fonts appear in this list
    • Font Weight - select the most appropriate weight for the font, noting:
      • 300 is generally referred to as Light
      • 400 is generally referred to as Normal
      • 500 is generally referred to as Medium
      • 600 is generally referred to as Semi Bold
      • 700 is generally referred to as Bold
      • 800 is generally referred to as Extra Bold
    • Font Size - if needed, adjust the font sizes based on a percentage of their default value. For example, if you select 80, all fonts will be reduced to 80% of their default sizes
  • Body Background - A background image can be placed directly behind the main content area of your site by uploading a custom image or using a free image from pexels
    • 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 file
    • To choose from the image gallery
      1. Click Image Gallery
      2. Check Enable Image Gallery
      3. Photo Credits Color - click the color preview icon to either enter the HEX or RGB color code, or use the selector to choose the color
      4. Click Select Image
        1. Enter a search term to query pixels.com; once found select your desired image
  • Colors
    • Choose the colors that should associated with Body Font, Body Link, Main Content Background, and Body Background colors
      • To enter or select a color:
        • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png beside the desired color setting
        • Enter the HEX or RGB color code; OR use the color selector to choose the desired color
        • Tip! Set the color with transparency to overlay on top of a background image for a defused look
        • Click Choose when finished
    • Note, the body font and link colors apply to all body and description text that do not have independent color settings. Whereas the main content background will appear behind all content in the middle (main content area) of your page

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

EBSCO Auth Banner

  • Colors
    • Choose the colors that are associated with the Banner and Font
      • To enter or select a color:
        • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png 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.

Global Button

The Global button settings control the appearance and how search results buttons, such as Read More, Read Online, etc. will be displayed. 

  • Style 
    • Type, select the desired button style, choose from 
      • Button – buttons will appear in a button format 
      • Link – buttons will appear in a hyperlink format, with the button labels appearing as simple link text
      • Link w/ bracket – buttons will appear in a hyperlink format, with the button labels appearing as links contained inside square brackets
  • Primary Button
    • Border Width, enter a numerical value (up to 50px) to set the border width
    • Border Radius - enter a numerical value (up to 50px) to soften the default hard 90 degree corners to a more rounded corner
    • Default State
      • Choose the colors that are associated with the default state of the primary buttons, these include the Text, Background, and Border colors
        • To enter or select a color:
          • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png 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
    • Hover State
      • Choose the colors that are associated when hovering over a primary button, these include the Text, Background, and Border colors
        • To enter or select a color:
          • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png 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
  • Secondary Button
    • Border Width, enter a numerical value (up to 50px) to set the border width
    • Border Radius - enter a numerical value (up to 50px) to soften the default hard 90 degree corners to a more rounded corner
    • Default State
      • Choose the colors that are associated with the default state of the secondary buttons, these include the Text, Background, and Border colors
        • To enter or select a color:
          • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png 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
    • Hover State
      • Choose the colors that are associated when hovering over a secondary button, these include the Text, Background, and Border colors
        • To enter or select a color:
          • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png 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.

Links

  • Outbound Links, check this box to open outbound links in a new tab
  • Anchor Links, check this box to display the anchor link icon beside content block headings at all times

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

Page Loader

  • Enable, check this box to display an image when a page is loading
    • The default image is the EBSCO “E” logo, but this can be replaced with a custom image
      • Upload Image
        • Click Choose File, then browse to and select the the image file on your device
          • Supported file types include: .svg, .gif, .png, .jpg, .jpeg
  • Delay, enter a numerical value (in seconds) to set how long the image will appear before fading out

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

Rounded Corner

  • Enable, check this box to set a border radius for elements including the main search bar, buttons, borders, and content blocks
    • Note, rounded corners will only appear with the Border Radius (below) is also set
  • Border Radius, enter a numerical value (up to 50px) to softer corners from the default 90 degrees; the higher the border-radius value is set, the more pronounced the rounded edges will appear

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

CSS Override

Here you can add your own custom CSS code to apply stylistic changes to your Stacks site if there are no other options to achieve the desired look you are trying to achieve.

Considerations should be taken when adding CSS overrides to ensure they achieve the desired design changes without adversely affecting your site; for more information see the article Using CSS Overrides Safely and Effectively.
  • Enable, check this box to enable the css box and begin adding your CSS code in the box below
    • Important! CSS overrides added here are not carried over if you change the theme of your Stacks site

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

Share Button

  • Elements
    • Share Button, check this box to allow users/patrons to share a page
  • Colors, configure the appearance of the share button, if this has been enabled
    • Choose the colors associated with the button's Icon, Background, and Border colors
      • To enter or select a color:
        • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png 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 numerical value (up to 50px) to set the thickness of the border
      • Border Radius, enter a numerical value (up to 50px) to set the roundness of the corners

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

Page Title

This is used to configure the appearance of a page's title, if it is being displayed.

  • Layout
    • Click the radio button beside the desired layout option for the page title's location
  • Colors and Borders
    • Choose the colors associated with the page title's Font and Border color 
      • To enter or select a color:
        • Click the color indicator icon Screenshot 2025-07-30 at 3.29.03 PM.png 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.

Was this article helpful?
0 out of 0 found this helpful
Return to top