FAQ content

(Beta) AZ List Management & (Beta) Look & Feel: Customize the look and feel of your (Bootstrap 5) public pages

In this article

The release of the new public A-Z Database List also brings updated Pages Look & Feel settings to allow you to customize the look and layout of the new, Bootstrap 5-powered public pages. These reworked settings allow you to make content customizations to the layout of the page, and font stylings (family, style, size, and color) for your text, links, and buttons without needing to add any custom CSS (though you certainly still can add your own CSS). In addition, you have full control over the header and footer code, as well as spaces to add your own custom CSS and JS code.

As you work to customize the look and feel of your new public A-Z list you can use these options and the settings for the Public AZ Page to style the page to fit the needs of your institution.

Getting there

The new Pages Look & Feel settings can be accessed in two ways:

Via the Admin menu

  1. From the Admin dropdown, select Look & Feel (Beta). 
navigating to the new Pages Look and Feel from the Admin menu

Via the AZ List Management (Beta) pages

  1. If you're working from any of the new AZ List Management (Beta) pages, from the sidebar click on System Settings to expand the panel.
  2. Then click on Pages Look & Feel.
navigating to the new Pages Look and Feel from the updated AZ List Management page

Set the content customizations for your public pages

The Content Customizations tab includes options for setting the width of the public page content area and font styling options for the public page text, links, and buttons. 

Layout

Layout options for Content Customizations
  1. Content Width: Set the width of the public page to:
    • Floating (Full Page): Public page content will stretch to fit the full width of the window, and will resize dynamically on all screen sizes.
    • Fixed: Public page content will stretch to a maximum width of 985px, and will resize dynamically on smaller screen sizes.

Text

The customizations for public page Text allow you to adjust the styling of the main text elements used throughout the interface. Specifically, you can adjust the styling of:

  • Text: Content that is included within paragraph (<p>) tags.
  • H1: Covers all <h1> tags and is used for page titles of public pages.
  • H2: Covers all <h2> tags.
  • H3: Covers all <h3> tags.
  • H4: Covers all <h4> tags.
  • H5: Covers all <h5> tags.
  • H6: Covers all <h6> tags.
Text options for Content Customizations
  1. Font Family: For each text element, set the font family that will be used. Choosing from: Arial, Courier, Georgia, Lucida, Poppins, Tahoma, Times New Roman, Trebuchet, or Verdana.
  2. Font Style: Set the font style, or the weight, that will be used for the text element. Choosing from: thin, extra light, light, normal, medium, semi bold, bold, extra bold, or heavy.
  3. Font Size: Set the font size to be used by the text element.
  4. Font Color: Use the color picker to set a custom color for each text element.
    • If you know the hex code of the color you want to use, you can input it directly.

Links

Link options for Content Customizations
  1. Underlined: Choose whether or not links on the public pages should be underlined or not.
  2. Default Color: Use the color picker to set the default color for any non-visited links.
    • If you know the hex code of the color you want to use, you can input it directly.
  3. On Hover: Use the color picker to set the color that a link will toggle to when being hovered over.
    • If you know the hex code of the color you want to use, you can input it directly.
  4. Visited: Use the color picker to set the color for any previously visited links.
    • If you know the hex code of the color you want to use, you can input it directly.

Buttons

The customizations for public page Buttons allow you to adjust the styling of the button elements used throughout the interface. Specifically, you can adjust the styling of the Primary Button, Secondary Button, and Light Button.

Button options for Content Customizations
  1. Shape: Set the button to have either rounded or squared corners.
  2. Font Style: Set the font style, or the weight, that will be used for the text of the button. Choosing from: thin, extra light, light, normal, medium, semi bold, bold, extra bold, or heavy.
  3. Font Size: Set the font size to be used by the button element.
  4. Font Color: Use the color picker to set a custom color for the text of the button.
    • If you know the hex code of the color you want to use, you can input it directly.
  5. Background Color: Use the color picker to set a custom color for the background color of the button.
    • If you know the hex code of the color you want to use, you can input it directly.
  6. Hover Font Color: Use the color picker to set the color that the button text will toggle to when being hovered over.
    • If you know the hex code of the color you want to use, you can input it directly.
  7. Hover Background Color: Use the color picker to set the color that the background color of the button will toggle to when being hovered over.
    • If you know the hex code of the color you want to use, you can input it directly.

There are two options for customizing the header at the top of your public pages: display a static image or add your own custom HTML header.

the image upload option for a header
  1. Image: Click in the Upload Image area or drag-and-drop your image file into that area to display a custom banner image. And remember to click Save Changes.
    • If you are using the Fixed width for your content area the maximum width will be 1320 px on desktop screen sizes, and an image smaller than that wide will be blown up to that width (provided the browser window is that wide). If your image is wider than 1320 px, it'll be shrunk down to that size. 1320px wide is your sweet spot, so aim for something around that wide—the image's height can be whatever best suits your needs.
    • If you are using the Floating width for your content area, your maximum width may be significantly larger depending on the size of the screen being used to view your public pages. You may wish to upload an image that is wider than 1320px (up to 2000px). And the image's height can be whatever best suits your needs.
    • For best results, use PNG or JPG images.
    • Your banner image will link to the Institution URL in your LibGuides system settings.
the HTML option for a header
  1. HTML: Use this option to display a custom HTML header in lieu of a banner image—that will be inserted within the <header> tag. Enter your HTML code in the text box and click the Save Changes button when finished.
    • If you need to include CSS or JavaScript code for your header, please add that under the Custom JS/CSS tab.
    • If you would like your header to align with the rest of the content on each page, place your custom code inside of a <div class="container"></div> element.

You can customize the footer that appears at the bottom of your public pages with your own custom HTML. Custom footer code will display below the system footer, which contains the "Login to LibApps" link.

the HTML option for a footer
  1. HTML: Use this option to add your custom HTML code for a footer—that will be inserted within the <footer> tag. Enter your HTML code in the text box and click the Save Changes button when finished.
    • If you need to include CSS or JavaScript code for your footer, please add that under the Custom JS/CSS tab.
    • If you would like your footer to align with the rest of the content on each page, place your custom code inside of a <div class="container"></div> element.

Add custom CSS & JavaScript code to your public pages

If you need to make more customizations to the look and feel of your public pages beyond the point-and-click options on the Content Customizations tab, you can add your own JavaScript and CSS code to customize the appearance of the public pages even more.

the js/css custom code options
  1. CSS Code: Add your custom CSS code here, and click the Save Changes button.
    • The contents of this field will be automatically added to a <style></style> tag, then the <style> tag will be added to the <head> section of every public-facing page.
  2. ​Header JS Code: Add any custom JavaScript code that should be loaded in the <head> section of every public page, and click the Save Changes button.
    • The contents of this field will be automatically added into a <script></script> tag, then the <script> tag will be added to the <head> section of every public-facing page.
  3. ​Footer JS Code: Add any custom JavaScript code that should be loaded at the bottom of every public page, and click the Save Changes button.
    • The contents of this field will be automatically added into a <script></script> tag, then the <script> tag will be added just before the </body> tag of every public-facing page.
FAQ Actions