How can we help?

Overview

The Header tab controls the layout of the header at the top of the calendar and the colors used inside it. Localist offers two header layouts:

• Base (default): A single header bar with the site name, a search box, and the user menu. Designed to keep the focus on events.
• Extended: Adds a lower header band beneath the top row. The top row holds the site name and header links. The lower band holds the search box and user actions.

Primary use case: Match the header to institution branding and choose a layout that fits the amount of navigation needed.

Who should use it: Calendar administrators.

Prerequisites

• You need administrator access to Settings > Appearance in Localist.
• If you do not have access, contact your Partner Success Manager or support@concept3d.com.
• If your platform has a header customized through Developer Theming, stay on Base (Default). Switching to Extended can conflict with your custom header.

Step by Step Instructions

Choose a header layout

1. Go to Settings > Appearance > Platform Themes, then select Edit Settings beside the theme.
2. Select the Header tab.
3. Under Header Layout, choose Base (Default) or Extended.
4. Select Save Changes.
5. Refresh your public calendar to confirm the layout.

Change header colors

1. On the Header tab, find the setting to change. Use the lists below to match a setting to the part of the header it styles.
2. Enter a color value, such as a hex code.
3. Select Save Changes and refresh your public calendar.
4. To return a setting to its default look, clear the field and save.

Base Layout Settings

Base header with the user menu open. Numbered callouts match the list below.

1. Header Background (the fill of the header bar): Fill of the header bar behind the site name, search box, and user menu.
2. Header Links (site name and menu arrow): Color of the site name text and the user menu arrow.
3. Header Search Field Background (Base) (the search box fill): Fill of the search box.
4. Header Search Field Text (Base) (search text and icon): Color of the search text and search icon.
5. Header Link - Dropdown - Background (the user menu panel): Fill of the user menu dropdown panel.
6. Header Link - Dropdown - Link Text (links in the user menu): Color of the links inside the dropdown.
7. Header Link - Dropdown - Link - Hover Background (highlight on a menu link): Highlight behind a dropdown link while hovered.
8. Header Search Field Background - Hover (Base) (search box fill on hover): Fill of the search box while hovered or focused.
9. Header Search Field Text - Hover (Base) (search text on hover): Color of the search text and icon while hovered or focused.

Extended Layout Settings

Extended header with a header link dropdown open (top) and the user menu open (bottom). Numbered callouts match the list below.

1. Header Background (the top row fill): Fill of the top row of the Extended header, behind the site name and header links.
2. Header Links (site name, header links, and menu arrow): Color of the site name, the header link text and arrows, and the user menu arrow.
3. Header Link - Hover Background (highlight on a header link): Highlight behind a header link while hovered or while its dropdown is open.
4. Header Link - Dropdown - Background (dropdown panels): Fill of dropdown panels, for both header link dropdowns and the user menu.
5. Header Link - Dropdown - Link Text (links in dropdowns): Color of the links inside those dropdowns.
6. Header Link - Dropdown - Link - Hover Background (highlight on a dropdown link): Highlight behind a dropdown link while hovered.
7. Secondary Header - Background (the lower band fill): Fill of the second row that holds the search box and user actions.
8. Secondary Header - Search Input Border (outline of the search box): Outline around the search box in the second row.
9. Header Search Field Background (Extended) (the search box fill): Fill of the search box in the second row.
10. Header Search Field Text (Extended) (search text and icon): Color of the search text and search icon.
11. Header Search Field Background - Hover (Extended) (search box fill on hover): Fill of the search box while hovered or focused.
12. Header Search Field Text - Hover (Extended) (search text on hover): Color of the search text and icon while hovered or focused.

Secondary Header - Divider Line is not marked on the screenshot. It sets the color of the thin divider line along the top of the lower header band.

For the outline of the Log in button in the Extended header, see Secondary Header - Login Button Border in Theme Settings - Article 4 - Style Calendar Components.

Common Variations or Use Cases

• Brand-colored header: Set Header Background and Header Links together so the site name stays readable.
• Dark search box: Change the search field background and the search field text as a pair so the text keeps enough contrast.
• Extended header with links: Switch to Extended, then set the Secondary Header settings to give the search row its own look.

Settings and Configuration Options and Definitions

• Base settings versus Extended settings: Settings with (Base) or (Extended) in the name only affect that layout. The same-named setting for the other layout is a separate field.
• Extended only settings: Secondary Header settings and the header link dropdown settings for top-row links apply only in the Extended layout.
• Values: Enter a color. Some fields accept a color only and reject other values.

Troubleshooting

• A Secondary Header setting does not change anything.
• Confirm Header Layout is set to Extended. Secondary Header settings only apply to that layout.
• A search box color does not change.
• Confirm the field matches the layout in use. The (Base) and (Extended) fields are separate.
• A hover color does not show.
• Hover states only show while the pointer is on the element. Check them on your public calendar rather than in the editor.
• Header link text is hard to read after a change.
• Review Header Background and Header Links together.

Related Articles

• Theme Settings - Article 1 - Customize the Look of the Calendar with Theme Settings
• Theme Settings - Article 3 - Set Global Colors and Footer Styles
• Theme Settings - Article 4 - Style Calendar Components