In This Article

Customizing the look and feel of LibCal

The LibCal look and feel options allow you to customize the appearance of your public pages. This includes elements common to all pages, including a banner image, custom HTML header & footer code, and/or custom JS & CSS code. 

You'll also be able to customize the layout and content of specific pages, too. These include your system's homepage and hours page, as well as the template used for public event pages.

Admin users can access these settings by going to Admin > Look & Feel. The following sections of this Springboard will cover the settings you can find under each tab of that page.

Navigating to the Look and Feel page from the Admin menu


Look and feel

Under the Look and Feel tab, you'll find options shared by all of your public pages. In the Top Banner box, you can upload a banner image to display at the top of each page. This is a simple and easy way to brand your page. For additional customization options, you can also create your own page header and footer using HTML, CSS, and JS code. You can also add CSS code to customize the existing elements in your LibCal pages, as well, such as font sizes or colors.

Learn more

[Return to top]


Homepage editor

When you click on the Homepage Editor tab, you'll be taken to a special page where you can customize both the layout and content that appears on your LibCal homepage. This includes customizing the number and size of the page columns, adding and reordering boxes in each column, and adding individual content items to each box. These content items can include rich text, upcoming event lists, calendars, space & equipment booking widgets, hours, and much more.

Learn more

[Return to top]


Event page editor

When you click on the Event Page Editor tab, you'll be taken to a special page where you can customize the layout of your calendar event pages (this is the page users see when clicking on an event in your calendars). This page is used by all calendars and includes the same column layout options as the homepage, but with a special template area unique to your event page. This template is used to display the information about the event the user is currently viewing. It consists of both HTML code, to provide structure and styling, and special tokens that serve as placeholders for event data. For example, the {{{title}}} token will display the title of the event being viewed. If you place that between a Heading 1 element (e.g. <h1>{{{title}}}</h1>), then the event title will display as a level 1 heading.

Don't worry: if you don't like your template changes, you reset the default template code at any time with just a click of a button.

Learn more

[Return to top]


Hours page editor

When you click on the Hours Page Editor tab, you'll be taken to a special page where you can customize the layout and content of your site's Hours page. This is a page that is dedicated to displaying your library hours and can be accessed directly by adding /hours to your LibCal URL (e.g. https://yourlibrary.libcal.com/hours/). A link to this page is automatically include in the Daily Hours widget, too, making it easy for users to access. Similar to your homepage, the Hours page consists of columns, boxes, and content items, giving you the flexibility to not only display a weekly hours widget (for example), but also directions and contact information for your library.

Learn more

[Return to top]

Related Springboards