Skip to main content

How can we help?

Search

Customize the Look of the Calendar with Theme Settings

Updated: Andrew Tat Edited:

Overview

Theme Settings control the colors and styles of your public Localist calendar without any coding. Each setting changes one visible part of the calendar, such as the header background, the fill of an event card, or the color of a button label.

This article explains how the Theme Settings editor works and how settings relate to each other. The remaining articles in the series describe what each setting changes:

Primary use case: Match the calendar to an institution's brand colors and adjust how cards, buttons, filters, and forms look.

Who should use it: Calendar administrators who manage the look of the Localist calendar. No coding knowledge is required.

Prerequisites

  • You need administrator access to Settings > Appearance in Localist.
  • If you do not see Appearance or the theme editor, contact your Partner Success Manager or support@concept3d.com.

Step by Step Instructions

Open the Theme Settings editor

  1. Log in to Localist as an administrator.
  2. Go to Settings > Appearance.
  3. In the Platform Themes table, select Edit Settings beside the theme to edit. The editor opens as Editing Theme Settings.

Selecting the theme name opens the HTML template editor on some platforms, which is a different tool. Some platforms show a Colors, Fonts & CSS row with a Customize link on the Appearance page instead. That link opens the same Theme Settings editor.

The editor has these tabs:

Change a setting

  1. Open the tab that holds the setting.
  2. Select the field for the setting and enter a value.
    • Most fields take a color, such as a hex code.
    • Radius fields, such as Card Border Radius, take a size, such as 8px.
    • Border fields, such as Filter Results Button Border, Filter Events Sidebar Border, and Form Element Border, take a border value, such as 1px solid #cccccc.
  3. Select Save Changes at the bottom of the page. A "Theme saved" message appears.
  4. Open your public calendar in another browser tab and refresh the page to see the change.

Return a setting to its default look

  1. Delete the value from the field so it is empty.
  2. Select Save Changes.

An empty field means the setting uses the default look. An empty field shows its default value as gray placeholder text. A color picker swatch sits beside each color field. Clearing a field is the quickest way to undo a single change.

Return every setting to the default look

  • Select Reset Colors, Fonts & CSS to Default at the bottom of the page.
  • This clears colors, fonts, and custom CSS together when custom CSS is present. Use it only to start over.
  • The reset cannot be undone.

How Settings Interact

Some settings share a surface or follow another setting until set on their own. Check this list when a change shows up in more places than you expected, or does not show up at all.

  • Button Text and Primary Button Text: Button Text is the label color on primary (filled) buttons. Primary Button Text takes over the label once it is set on its own. Until then, Primary Button Text follows Button Text.
  • Button Text and Secondary Button Background: Button Text is also the fill of secondary buttons, such as Cancel in the Filter panel. Secondary Button Background takes over the fill once it is set on its own.
  • Secondary Button Text and Cancel: The label of Cancel in the Filter panel follows Secondary Button Text.
  • Global colors and component settings: Global settings, such as Primary Link and Secondary Link, color many elements. A component setting that is set on its own takes over for that element.
  • Form Element Focus Background: This setting fills dropdown fields that have a selection, text fields that have a value, and the filter combobox while it is in focus. It does not fill an empty text field.
  • Mobile_card settings and Card settings: Despite the name, Mobile_card settings are not limited to phones. They color the Register link and the interested icon that sit on top of the event card photo. On wider screens, this row appears when a visitor hovers over or tabs to a card. Below 768px wide, it shows at all times. Card Share Button Text and Card Interested Button Text take over only on large event cards at 980px and wider, where the row moves below the event details.
  • Form Checkbox Checked settings: Form Checkbox Checked Background and Form Checkbox Checked Border follow Form Toggle Switch until set on their own.

Screen Width and Visibility

Some settings only show at certain screen widths or in certain situations.

  • Below 768px wide: The phone layout. The slide-out account menu uses User Menu Background Tint.
  • 768px and wider: The tablet header.
  • 980px and wider: The large event card layout. Card Share Button Text and Card Interested Button Text apply here. Below 980px, large cards use the Mobile_card settings.
  • Logged-in or logged-out: Some settings only show to visitors who are logged in or logged out.

To preview a width, resize your browser window on your public calendar. Settings that depend on a width or a situation say so in their descriptions.

Common Variations or Use Cases

  • Match brand colors: Start with the Header and Global Styles tabs, then adjust the Component Styles tab for buttons and cards.
  • Improve contrast: Change one text or background color at a time and review it on the public calendar.
  • Refresh a seasonal look: Change the Submit Event Banner Background and Landing Page colors, then clear them afterward to restore the default.

Troubleshooting

  • A change does not show on the calendar.
  • Confirm Save Changes was selected and the "Theme saved" message appeared.
  • Refresh the public calendar page.
  • Confirm the setting applies to the page being viewed. Some settings apply to a specific page, state, or screen width.
  • A change shows in more places than you expected.
  • Review How Settings Interact. Several settings share a surface.
  • A field rejects the value.
  • Enter a value that fits the field. Most fields take a color, such as a hex code. Radius fields take a size, such as 8px. Border fields take a border value, such as 1px solid #cccccc. Some fields accept a color only.
  • The Appearance menu or theme editor is missing.
  • Contact your Partner Success Manager or support@concept3d.com.
Was this article helpful?
0 out of 0 found this helpful
Return to top

Related articles