How can we help?

Overview

The Component Styles tab controls the look of individual parts of the calendar: filters, event cards, event pages, the Add an event form, buttons, text colors, hover states, and the sign-in pages. Each component setting changes one specific element. A component setting that is set on its own takes over from the global color that normally styles that element.

Primary use case: Fine-tune how specific parts of the calendar look after the global colors are set.

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.
• Some settings only show in a specific situation, such as a certain screen width, a logged-in or logged-out visitor, or an event with extra dates. These settings list the condition in their description.

Step by Step Instructions

1. Go to Settings > Appearance > Platform Themes, then select Edit Settings beside the theme.
2. Select the Component Styles tab.
3. Find the setting to change. Use the sections below to match a setting to the part of the calendar it styles.
4. 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.
5. Select Save Changes.
6. Refresh your public calendar and open the page that shows the element.
7. To undo a change, clear the field and select Save Changes.

Settings that follow another setting are described in Theme Settings - Article 1 - Customize the Look of the Calendar with Theme Settings under How Settings Interact.

Filters

Home page with the Filter panel open. Numbered callouts match the list below.

1. Filter Results Button Background / Border (the Select Date and options buttons at rest): Fill and outline of the Select Date and options buttons above the event list in their resting state.
2. Filter Results Button Hover Background / Text (the same buttons on hover): Fill and label color of the same buttons while hovered or while their panel is open.
3. Filter Events Sidebar Background / Border (the Filter results panel): Fill and outline of the Filter results panel.
4. Filter Events Sidebar Extra Options Background (the strip with the toggle and layout icons): Fill of the strip holding the recurring events toggle and the layout icons.
5. Form Element Background (the dropdown fields in the panel): Fill of the dropdown fields inside the panel, such as Sort by, When, Experience, and Event types.
6. Form Toggle Switch (the Hide recurring events toggle): Color of the Hide recurring events toggle.
7. Primary Button Background (the Apply filters button fill): Fill of primary buttons, such as Apply filters. The label color is Primary Button Text, which follows Button Text until set on its own.
8. Secondary Button Background / Text (the Cancel button): Fill and label color of secondary buttons, such as Cancel. Button Text also affects the fill of this button. See Button Text and Button Fills.

Event Cards

Featured card on the home page, event grid cards, and a card on hover. Numbered callouts match the list below.

1. Card Content Background (the featured card fill): Fill of the featured event card that overlays the large home page image.
2. Card Background (the card body fill): Fill of the event card body below the photo in event grids.
3. Card Tag Background (the category pill fill): Fill of the category pill in the top-left corner of the card photo.
4. Card Border Radius (card corner roundness): Roundness of the event card corners.
5. Card Background Tint (the photo overlay on hover): Color overlay on the card photo while the card is hovered.

Card text and icons by screen width

Large event card at 980px and wider, and the account menu below 768px. Numbered callouts match the list below.

1. Card Share Button Text (the Register or Buy tickets link on large cards): Label and arrow color of the Register or Buy tickets link on a large event card. Applies at 980px and wider, for events with tickets.
2. Card Interested Button Text (the I'm Interested button on large cards): Label and icon color of the I'm Interested button on a large event card. Applies at 980px and wider.
3. User Menu Background Tint (the dimmed area behind the account menu): Dimmed overlay behind the slide-out account menu. Applies below 768px wide, when logged in and the avatar menu is open.

Below 980px, large cards switch to the standard card layout. Mobile_card Share Button Text and Mobile_card Interested Button Text color these items instead. See Text Colors and Links.

To show large cards, open the Filter panel and choose the large card layout.

Event Pages

Event page sections. Numbered callouts match the list below.

1. Breadcrumb Link (the clickable path above the page header): Color of the clickable breadcrumb links above the page header.
2. Breadcrumbs Separator Text (chevrons and the current page name): Color of the chevron separators and the current page name in the breadcrumb trail.
3. Landing Page Background (the title card fill): Fill of the title card on event pages.
4. Interested Button Active Background (the Change Dates button fill): Fill of the Change Dates button.
5. Category Tag Link Background / Text (the event type pills): Fill and label color of the event type pills.
6. Category Tag Background (the tag pills): Fill of the tag pills, such as Concert and Fall Fling.
7. About Follow Background (the See who is interested bar): Fill of the See who is interested bar.
8. Card Background (the speaker card fill): Fill of the speaker card in the Event Speakers section.
9. Primary Button Background (the Publish button fill): Fill of the Publish button. The label color is Primary Button Text, which follows Button Text until set on its own.
10. Secondary Gray Button Background (the Edit Event and Admin Event Editor buttons): Fill of the Edit Event and Admin Event Editor buttons.
11. Map Label (the Hide map or Show map link): Color of the Hide map or Show map toggle link above the event map.

Add an Event Form

Add an event form, top, middle, and bottom. Numbered callouts match the list below.

1. Form Element Background / Border (text inputs and unchecked checkboxes): Fill and outline of text inputs and the unchecked checkbox squares.
2. Form Element Focus Background (filled dropdowns): Fill of dropdown fields such as Status, Repeating, Experience, and Accessibility.
3. Disabled Button Background / Text (a button that is not yet available): Fill and label color of a button that is not yet available, such as Add Above to Schedule before a start date is entered.
4. Form Picked Item Background (the pickers for Event Type, Department, and Group): Fill of the Event Type, Department, and Group pickers.
5. Form Checkbox Checked Background / Border (a checked checkbox): Fill and outline of a checkbox when it is checked.

Submit an Event Banner

Planning an event banner on the home page. Numbered callouts match the list below.

1. Submit Event Banner Background (the banner fill): Fill of the Planning an event banner at the bottom of the home page.
2. Submit Event Banner Text (the banner heading and description): Color of the heading and description text inside the banner.
3. Button Text (the Submit an event button fill in the banner): Fill of the banner Submit an event button, white by default. The same setting also colors the label on primary (filled) buttons elsewhere. See Button Text and Button Fills.

Text Colors and Links

Home page, event page, and group page. Numbered callouts match the list below. Callouts 10 to 12 repeat settings from callouts 2 to 4 on the event page.

Note: Channel Background sets the fill of the page title banner. Channel Background Image Tint sets the color laid over a banner photo. Channel Title Text colors the title in that banner.

1. Channel Title Text (the page title in the top banner): Color of the page title in the banner at the top of a page, such as the home page title.
2. Text Link (linked text): Color of linked text, such as event titles and location links on the featured card, the By group link, View map, Add to calendar, tag text, and group links on event pages.
3. Interested Button Text (the I'm Interested and Change Dates buttons): Label and icon color of the I'm Interested and Change Dates buttons.
4. Secondary Button Text (the Submit an event, Edit Event and Admin Event Editor labels): Label color of the Submit an event button in the top bar and the Edit Event and Admin Event Editor buttons.
5. Carousel Current Slide Button Background (the carousel control pill): Fill of the control pill behind the play button and slide dots on the featured carousel.
6. Event Tabs Link Line (the underline on the active tab): Color of the underline beneath the active Trending, Upcoming, or Month View Calendar tab.
7. Card Tag Text (labels on card tags): Label color of the tags in the corner of event cards, such as Sponsored and Music.
8. Mobile_card Share Button Text (the Register link and share icon on the card photo): Color of the Register link and the share icon that sit over the bottom of the card photo. On wider screens, they appear when a visitor hovers over or tabs to the card. Below 768px wide, they show at all times. Large cards at 980px and wider use Card Share Button Text instead.
9. Mobile_card Interested Button Text (the interested icon on the card photo): Color of the interested icon in the same row. Large cards at 980px and wider use Card Interested Button Text instead.
10. Text Link (linked text on the event page): The same Text Link setting as callout 2, shown on the event page.
11. Interested Button Text (the Change Dates button on the event page): The same setting as callout 3, shown on the Change Dates button.
12. Secondary Button Text (the event tools buttons): The same setting as callout 4, shown on the Edit Event and Admin Event Editor buttons.
13. Landing Page Header Background (the band behind the group page header card): Fill of the band behind the header card on group pages.

Button Text and Button Fills

Filter panel, event page, Add an event form, and the Planning an event banner. Numbered callouts match the list below.

1. Button Text / Primary Button Text (labels on primary (filled) buttons): Label color of primary (filled) buttons, such as Apply filters in the Filter panel, Publish on event pages, and Submit Event on the Add an event form. Primary Button Text takes over once it is set on its own.
2. Button Text (the fill of secondary buttons): Fill color of secondary buttons, such as Cancel in the Filter panel and the Submit an event button in the Planning an event banner. The default is white, so the fill only shows when changed. This applies while Secondary Button Background is not set on its own.

Hover, Focus, and State Styles

Event page with Add to calendar open, map controls, the Filter panel, and the Add an event form. Numbered callouts match the list below.

1. Share Subscribe Button Background / Text / Hover Background (the Google, iCal, and Outlook icons): Circle fill, icon color, and icon color on hover for the Google, iCal, and Outlook icons that open from Add to calendar.
2. Text Link Hover (links on hover): Color of a link while the pointer is on it, such as Add to calendar and group links.
3. Category Tag Link Hover Text (the event type tag fill on hover): Despite the name, this is the fill of an event type tag while hovered.
4. Map Label Hover (the Public transport, Car, and Walking links on hover): Color of the Public transport, Car, and Walking links while hovered. The Hide map label does not change.
5. Filter Results Button Hover Text (the Filter button on hover): Label and icon color of the Filter button while hovered or while its panel is open.
6. Share Subscribe Button Text (the Subscribe to Displayed Results icons): Icon color of the Subscribe to Displayed Results icons in the Filter panel. Their fill is a fixed gray.
7. Primary Button Text (labels on primary (filled) buttons): Label color of primary (filled) buttons such as Apply filters, Publish, and Submit Event. Follows Button Text until set on its own.
8. Form Element Focus Border (the outline of a text field with a value): Outline of a text field once it has a value, such as Event Name after typing. An empty field does not show it.

Situation-Specific Settings

Hover popups, a disabled button, and the Following page. Numbered callouts match the list below.

1. Many-Follower Tooltip Text and Many-Follower Tooltip Background (the "+ N People" popup): Label color and fill of the "+ N People" popup that lists names on hover or keyboard focus. It appears only when more than four people are interested in an event or follow a group or place.
2. Many-Follower Tooltip Background (the "+ N dates" popover): Fill of the popover that opens from "+ N dates" beside the date on an event with additional upcoming dates. The dates inside are white, so Many-Follower Tooltip Text does not change them.
3. Disabled Button Hover Background and Disabled Button Hover Text (a disabled button on hover): Fill and label color of a disabled button while the pointer is over it, such as Send Message in the message dialog before any text is typed. The resting gray comes from Disabled Button Background and Disabled Button Text.
4. Dark Link Text (the trash icon on the Following page): Color of the trash icon beside each followed person, place, or group on Account settings, Following. The icon follows Secondary Link until Dark Link Text is set on its own.

Logged-Out and Sign-In Styles

Logged-out home page with the Extended header, the Log in dialog, and the Create an account page. Numbered callouts match the list below.

1. Secondary Header - Login Button Border (the outline of the Log in button): Outline of the Log in button in the lower header band. Applies to the Extended header layout only, for logged-out visitors, at 768px and wider.
2. Secondary Button Text (the Log in button label): Label color of the Log in button in the header.
3. Primary Button Text (labels on primary (filled) sign-in buttons): Label color of primary (filled) buttons such as Sign up, Login in the Log in dialog, and Sign up and log in with email.
4. Text Link (links on sign-in pages): Color of linked text, such as Show all events, inactive tabs, and the I forgot my password and I do not have an account yet links.
5. Form Element Focus Border (the outline of a field with a value): Outline of a text field once it has a value, such as Email Address in the Log in dialog.

Additional Component Settings

These settings are on the Component Styles tab. Each one uses a built-in default until a value is entered.

Buttons

• Primary Button Hover Background: Fill of primary (filled) buttons while the pointer is over them, such as Apply filters, Publish, Submit Event, and Sign up. It also colors the stars while hovering a star rating, the hover fill of the answer buttons on the event feedback form, and the hover fill of the main button on the cookie consent prompt. The default follows Secondary Link. The resting fill is Primary Button Background.
• Secondary White Button Background: Fill of the Log in button in the header and of the round Facebook, X, and LinkedIn buttons that open from the share icon. The Log in button shows only for logged-out visitors at 768px and wider. The default follows White. This setting does not change the Submit an event button in the header, which uses Secondary Gray Button Background.
• Interested Button Background: Fill of the I'm Interested button before a visitor has marked interest, on event cards and event pages. The default is a faint tint of Primary Link.
• Interested Button Hover Background: Fill of the I'm Interested button while the pointer is over it, before interest is marked. The default matches the resting fill, so hovering shows no visible change until this setting is set.
• Interested Button Active Background: Fill of the interested button after a visitor has marked interest. It also applies to the Change Dates button on events with multiple dates. Until this setting is set, the fill matches the resting button, so the only visible change after a visitor marks interest is a solid icon.
• Interested Button Active Hover Background: Fill of the interested button while the pointer is over it after a visitor has marked interest. It also applies to the Change Dates button on events with multiple dates. The default is a slightly stronger tint of Primary Link.

Page elements

• Breadcrumbs Collapsed Background: Fill of the small panel that opens from the "..." button in a long breadcrumb trail. The trail collapses only when it has four or more steps, so the setting has no effect on shorter trails. The default follows White.
• Featured Object Container Background: Fill of each person card in the Featured Users component, titled "Speakers" by default. Below 768px wide, it fills the whole Speakers section as one band. The default is a very light gray. The component appears only on pages whose layout includes it and has at least one user assigned. It does not change Featured Groups cards or the Event Speakers section, which uses Card Background.

Featured carousel

• Carousel Next Slide Button Text: Color of the Next label and arrow in the top-right corner of the featured carousel on the home page. The default follows a very dark shade of Primary Link.
• Carousel Next Slide Button Background: Fill of the rounded pill behind the Next button. The default is a partly transparent White.

The Next button shows at 768px and wider, and only when the carousel has more than one featured event.

Corner radius sizes

Each radius setting takes a size, such as 8px. Use pixel values. The sizes apply across the calendar, so one change reaches every element in the list. Card Border Radius remains the setting for the overall card corners.

• Tiny Radius (default 2px): Standard buttons, text inputs, text areas, select fields, the header search box, dropdown menus, event card photos in grids, event feedback answer buttons, and the Invite Friends and Send Message dialogs.
• Small Radius (default 4px): Content blocks on event pages and channel pages, such as the description, date and place information, photo, and registration form. It also rounds progress bars, comments, flash messages, the lightbox dialog, tooltips, the breadcrumb panel, and photos on Featured Groups cards.
• Medium Radius (default 6px): Small pill-shaped labels, such as category, tag, and price pills on event pages, the category pill on event card photos, and the event banner. It also rounds the "Skip to main content" link when it receives keyboard focus.
• Large Radius (default 8px): The I'm Interested and Change Dates buttons, Featured Users cards, the See who is interested bar, the photo on large event cards and on the page title card, the carousel next-slide button and slide-dots pill, and the notification count badges in the account menu.
• Huge Radius (default 10px): The title card on event, place, and group pages, the featured carousel on the home page, and the small help-tooltip badges in digest and help widget forms. At 768px and wider, the title card is a separate rounded card. Below 768px, only its photo is rounded.

Common Variations or Use Cases

• Change every button at once: Set Button Text for the label on primary (filled) buttons and the fill of secondary buttons. Then set Primary Button Text or Secondary Button Background to separate the two.
• Restyle event cards only: Use the Event Cards section. Card Background also fills the speaker card and, by default, the event page title card, because Landing Page Background follows Card Background. To keep the title card separate, set Landing Page Background on its own.
• Adjust hover feedback: Set the hover settings in Hover, Focus, and State Styles so links and tags respond clearly.
• Match a brand color on the banner: Set Submit Event Banner Background and Submit Event Banner Text together.

Troubleshooting

• A change does not show.
• Confirm Save Changes was selected, then refresh your public calendar.
• Confirm the page being viewed shows the element. For example, Many-Follower Tooltip Text needs more than four people.
• A color changes more elements than expected.
• Review How Settings Interact in Theme Settings - Article 1 - Customize the Look of the Calendar with Theme Settings. Button Text and Primary Button Text overlap.
• A Register link or interested icon color does not change.
• On large cards at 980px and wider, use Card Share Button Text and Card Interested Button Text.
• Everywhere else, including standard cards on a desktop, use the Mobile_card settings.
• A Log in setting does not show.
• Secondary Header - Login Button Border needs the Extended header layout, a logged-out visitor, and a width of 768px or more.
• A hover color does not show.
• Hover states show only while the pointer is on the element. Check them on your public calendar.

Related Articles

• Theme Settings - Article 1 - Customize the Look of the Calendar with Theme Settings
• Theme Settings - Article 2 - Change the Header Layout and Colors
• Theme Settings - Article 3 - Set Global Colors and Footer Styles