Overview
The Global Styles tab sets colors that are used across the whole calendar and the colors of the footer. Some settings on this tab change many elements at once, such as every link-style element or every event card background.
Primary use case: Apply a brand color to the calendar quickly, then fine-tune individual components in the Component Styles tab.
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.
Step by Step Instructions
- Go to Settings > Appearance > Platform Themes, then select Edit Settings beside the theme.
- Select the Global Styles tab.
- Find the setting to change and enter a color value, such as a hex code.
- Select Save Changes.
- Refresh your public calendar to review the change.
- To undo a change, clear the field and select Save Changes.
Global Interface Colors
Home page with callouts for the global colors. Numbered callouts match the list below.
- Primary Link (the main interface color): Page title banner background by default (Channel Background overrides it), plus link-style elements such as the Submit an event button text, event titles, location links, I'm Interested and share buttons, the Select Date and Filter buttons, and the Trending and Upcoming tabs.
- Secondary Link (the accent color): Event category tags, such as Sponsored and Music, and the Planning an event band near the footer.
- White (the base light color): Base light color used for card fills, the header background, form fields, and text that sits on colored backgrounds. More than ten settings follow White by default.
Component settings can override these global colors for a single element. See Theme Settings - Article 4 - Style Calendar Components.
Error Message
Error Message is also on the Global Styles tab and is not marked on the screenshot above. It sets the color for form errors and unread alerts.
- Form errors: The outline and error icon of a field that fails validation, the small error text under the field, and a light tint that fills an empty required field. Form errors show only after a validation failure.
- Unread alerts: The red dot on the account avatar and beside Messages, and the count badges in the account menu. These show only for logged-in visitors with unread messages or notifications.
- Event edit warning: The warning bar at the top of the event edit page.
The default is a fixed orange-red.
Footer Styles
Footer with callouts. Numbered callouts match the list below.
- Footer Background (the main footer fill): Fill of the main footer area that holds the link columns.
- Footer Text (footer links and headings): Color of the footer column headings and links.
- Sub-Footer Background (the bottom strip fill): Fill of the thin bottom strip below the main footer.
- Sub-Footer Text (the bottom strip text): Color of the text in the bottom strip, such as the site name and Powered by Concept3D.
Common Variations or Use Cases
- Quick brand refresh: Set Primary Link and Secondary Link first. Most buttons, tabs, and tags update together.
- Dark footer: Set Footer Background and Footer Text as a pair, then Sub-Footer Background and Sub-Footer Text as a pair.
- Change one area only: Leave White unchanged. A dark White can darken the header and form fields and make text on colored backgrounds unreadable. Use Card Background, Header Background, or Form Element Background to change a single area.
Settings and Configuration Options and Definitions
- Primary Link: Main interface color shared by many elements.
- Secondary Link: Accent color for tags and the Planning an event band.
- White: Base light color. Card fills, the header background, form fields, and text on colored backgrounds follow it until set on their own.
- Error Message: Color for form errors, unread alert dots and badges, and the event edit warning bar.
- Footer Background and Footer Text: Main footer area.
- Sub-Footer Background and Sub-Footer Text: Bottom strip below the footer.
- Values: Enter a color. An empty field uses the default.
Troubleshooting
- A global color changed a component that should stay the same.
- Set the matching component setting in Theme Settings - Article 4 - Style Calendar Components. A component setting that is set on its own takes over for that element.
- Text is hard to read after changing a background.
- Change the matching text color at the same time. Review the page in your public calendar.
- The change does not show.
- Confirm Save Changes was selected, then refresh your public calendar.