FAQ content

Look & Feel: Customize the HTML header and footer of your public pages

In this article

Getting there

To customize your LibCal look and feel options, go to Admin > Look & Feel > Look and Feel.

Navigating to the Look and Feel page


Custom Header Code

You can create a custom header using HTML code. This is especially helpful if you want your LibCal site to have the same header as your library's or institution's website. If you're also using a top banner for your system, your custom header will appear above it on every page.

For best results, avoid adding any CSS or JavaScript code in the Custom Header Code settings. Instead, add that to your Custom JS/CSS Code settings.

  1. In the Code Customizations panel, enter the HTML code for your header in the Custom Header Code text area.
  2. Click the Save button.
Pro Tip: Want your custom header to align with the content on each page? Place your header code inside of a <div class="container"></div> element.

Example of adding custom header code


Customer Footer Code

In addition to a custom header, you can also create a custom footer using HTML code. This is especially helpful if you want your LibCal site to have the same footer as your library's or institution's website. When you add a custom footer, it will display below the system footer (which has the Login to LibApps link) at the bottom of each page.

For best results, avoid adding any CSS or JavaScript code in the Custom Footer Code settings. Instead, add that to your Custom JS/CSS Code settings.

  1. In the Code Customizations panel, enter the HTML code for your footer in the Custom Footer Code text area.
  2. Click the Save button.
Pro Tip: Want your custom footer to align with the content on each page? Place your footer code inside of a <div class="container"></div> element.

Example of adding custom footer code