FAQ content

Tickets & Passes: Customize the public homepage and color settings

In this article

The Settings page for Tickets & Passes allows you to customize the passes homepage and the colors used on the booking grid when showing pass availability for individual institutions.

The Tickets & Passes homepage—also known as the passes catalog or passes landing page—allows patrons to book digital and physical passes. To link directly to this page, append /passes to your LibCal site's URL. For example, if your URL is mylibrary.libcal.com, you would access this page at: mylibrary.libcal.com/passes

Patrons can switch between browsing by institution or by availability date by clicking the link in the top right:

The link in the top right of the passes homepage to browse by date or browse by institution.
Use the Browse by Date link to switch to searching for passes by a specific date.

Each institution's featured image and description, if available, will automatically populate the passes home page and the individual institution booking pages. The below options allow you to make additional customizations. 

Customize the public homepage

  1. Go to Admin > Tickets & Passes.
  2. Click Settings.
  3. In the Public Homepage for Institution Passes panel, enter a Page Header.
    • This is the title that appears at the top of your passes homepage.
  4. Enter a Subheader. Here you might describe how the passes program works. You can use the rich text editor to apply formatting to your text, such as lists, headings, font styles, etc. You can also add images.
  5. Click Save to capture your changes.
Customizing the public homepage for institution passes.

Customize the availability color

Each institution displays a booking grid for pass availability. You can customize the background color, text color, and background pattern of the buttons for each day for the following statuses:

  • Available: The day has passes available to book.
  • Available: Hover: The day has passes available to book, and the user is actively hovering their mouse over the day.
  • Unavailable: The day does not have passes available to book.
  • Closed: The day is not eligible for the passes program, due to the institution being closed or another reason.
Example of an availability grid showing the different colors.
An example of pass availability, with the color key shown at the bottom. The 20th shows the Available: Hover color in action.

To customize the colors on the booking grid:

  1. Go to Admin > Tickets & Passes.
  2. Click Settings.
  3. In the Color Settings panel, configure each status—Available, Available: Hover, Unavailable, and Closed—with the following options: 
    1. Background Color. Use the color picker or enter the color hex code to select the button's background color.
    2. Text Color. Use the color picker or enter the color hex code to use for the button's text color.
    3. Background Pattern. Choose an option for the background pattern.
    4. Preview. This shows you what your selections look like combined. It's what patrons will see on the public page.
    5. Contrast Ratio. This automatically calculates the contrast ratio between the background color and the text color.
      • A check mark after the number indicates that your selected combination passes the standards for WCAG AA. The number must be less than 22% to pass.
  4. Click Save to save your changes.
    1. If you'd like to clear your changes and start over with the defaults, click the Reset to System Defaults button.
Customizing the public homepage for institution passes.