Style Editor – Stacks for Libraries

As discussed in the overview, this tool allows administrators to effortlessly tweak the appearance of your Stacks site to meet your design needs, without having to change the overall theme of the site.

This article will discuss the setting options that can be adjusted in the Style Editor section at the top of the tool; specifically it will look at the following areas:

Bento
Homepage
Landing Page
Login Protect
Search Result

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

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

Bento

These setting allow you to configure the appearance of various elements associated with the Bento search results page.

Layout, select the desired layout for the bento search results page
- Click the radio button beside the desired layout
Image Display
- Enable thumbnail image, check this box to display thumbnail images in the search results, if there are any to display
Bento Blocks, select the desired colors and border appearance associated with each block that appears in your bento search results
- Background color, Titles color, Box shadow color, and Border color
  - 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 radius, enter a numerical value (up to 50px) to have rounded corners rather than square corners
- Border thickness, enter a numerical value (up to 50px) to set the thickness of the border
- Border position, select the desired location for the border to appear around each bento block
Bento Item, select the desired colors and border appearance associated with each item that appears within the bento block search results
- Background color and Border color
  - 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 radius, enter a numerical value (up to 50px) to have rounded corners rather than square corners
- Border thickness, enter a numerical value (up to 50px) to set the thickness of the border
- Border position, select the desired location for the border to appear around each bento block

Homepage

Enable
- Enable, check this box to allow the homepage header to be overridden
Layout, select the desired header layout
- Click the radio button beside the layout you wish for your header
Menu Display
- Hide main menu, check this box to hide (uncheck to show) the main navigation menu
- Hide top menu, check this box to hide (uncheck to show) the top menu
Background Image, here you can configure the background color or image to be displayed
- Header Background color
  - 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, click the appropriate button to upload your own image or choose from a gallery
- Enable Upload Background, ensure this box is checked to display an uploaded background image
- Upload Image
  - Click Choose File to browse your computer and select an image file to upload
Hero Section
- Enable Hero, check this box to enable the hero section
- Logo alt text, enter alternative text for an uploaded logo
- Title, enter a title for the
- Description, enter an optional description to be displayed in the hero section
- Header Font Color and Hero Description Color
  - 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
- Button Text, enter the text to be displayed for an optional navigation button in the hero
- Button Link, enter the URL that will direct users/patron when the button is clicked
  - Repeat with Button Text 2 and Button Link 2, if another button is required
- Default State, select the colors for the default state in the hero section
  - Here you can choose colors for Text Color, Background, and Border Color
    - 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
- Hover State, select the colors displayed when hovering over the hero section
  - Here you can choose colors for Text Color, Background, and Border Color
    - 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 numerical value (up to 50px) to set the thickness of the border
- Border Radius, enter a numerical value (up to 50px) to have rounded corners rather than square corners
- Enable Video Background, check this box to enable the option to display a video background
- Video Path, enter the URL to the file location of the video to display
- Upload Video
  - Click Choose File, to browse your computer and select the video file to display
- Video Brightness, enter a number (between 0 and 1) to set the video display brightness

Landing Page

Hide Page Title
- Check the box beside the landing page(s) for which the page title should be hidden

Login Protect

Layout, select the layout for the login screen
- Click the radio button beside the desired layout option
Logo, add an optional logo to display on the login screen
- Enable and show logo, check this box to enable and display the uploaded logo
- Upload Logo
  - Click Choose File, to browse your computer and select the logo file to display
- Logo alt text, enter alternative text for the logo image
- Width, enter the width of the logo
Form, here you can choose the Font and Link colors for text in the login screen
- 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
Sidebar, here you can choose the Font and Background colors for the sidebar area of the login screen
- 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
Primary Button, here you can configure the appearance of the primary buttons seen in the login screen
- Border Width, enter a numerical value (up to 50px) to set the thickness of the border
- Border Radius, enter a numerical value (up to 50px) to have rounded corners rather than square corners
- Default State, select the colors for the default button state
  - Here you can choose colors for Text Color, Background, and Border Color
    - 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
- Hover State, select the colors displayed when hovering over a button in the login screen
  - Here you can choose colors for Text Color, Background, and Border Color
    - 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

Search Result

Layout, select the desired layout for the display of search results
- Click the radio button beside the desired layout option
Image Display
- Enable Thumbnail Image, check this box to display thumbnail images for search results (if/when they are available)
Search Term Highlight
- Enable Highlight, check this box to enable the feature that highlights the search term in the results display
- Highlight color
  - 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
Sidebar Layout, select the desired layout of the sidebar display in the search results
- Click the radio button beside the desired layout option
Sidebar Colors, choose the colors to be displayed for the sidebar Title, Link and Border 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
Featured Tabs, choose the colors to be displayed for the featured tab's Font, Background and Border 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

Click Save, when finished configuring these settings.