Skip to main content

How can we help?

Search

Colors & Fonts on the Localist Calendar

Updated: Production Edited:

Colors & Fonts Options

Localist comes with a bunch of different styling options out of the box to make your calendar look and feel the way you want! Check out the included options for all customers below:

 

Global Elements

Controls the overall global styles on your platform.

Includes sections for:

Section Details
Branding Set global colors for:
  • Header: Background, Links, and Search Field Background
  • Footer: Text and Background
  • Sub-Footer: Text and Background
Global Interface Colors Controls link and error message colors for:
  • Links: Primary, Secondary, and Darkened
  • White: Set the desired hex or RGBA for your desired shade of white.
  • Error Message: Set the desired error messaging color.
Global Fonts Controls global font family, color, and size:
  • Main Font Family: Set your brand's font stack.
  • Font Size P: Sets the font size for global paragraph text.
  • Body Text: Set the font size for global body text.

 

Components

Controls platform-wide colors, borders, and border radius.

Sections are as follows:

Section Details
Links Set link colors:
  • Text Link: Text and Hover
  • Dark Link: Text
Buttons & Pagination Set colors or borders for:
  • Button: Text
  • Primary Button: Text, Background, and Hover Background
  • Secondary Button: Text and Background
  • Secondary White Button: Background
  • Secondary Grey Button: Background
  • Interested Button: Background, Text, Hover Background, Active Background, and Active Hover Background
  • Disabled Button: Background, Text, Hover Background, Hover Text
  • Filter Results Button: Background, Border style/width/color, Hover Background, and Hover Text
Channel Header Controls the Homepage and Channel header area below the search bar:
  • Title Text: Header text color.
  • Background: Background color as well as background image tint.
Dropdowns Colors and border for dropdown menus across the platform. Includes:
  • Background: Dropdown menu background color.
  • Border: Set the border style, weight, and color.
  • Extra Options Background: Set the background color for additional options menus.
Form Elements Edit styles for all forms across the platform:
  • Background: Background color for each element.
  • Text: Form text color.
  • Border: Set the border style, weight, and color.
  • Focus: Element's focus background and border color.
  • Picked Item Background: Set the background color for selected items in forms.
  • Toggle Switch: Form toggle color.
  • Checkbox: Checked box background and border colors.
Breadcrumbs Edit styles for platform breadcrumbs:
  • Collapsed Background: Background color for collapsed breadcrumbs.
  • Separator Text: Controls breadcrumb separator colors.
  • Link: Color for linked breadcrumbs.
Tags Edit styles Tags on the Event Details Page:
  • Background: Background color for Tags.
  • Link Background: Background color for Tag links.
  • Link Text: Link text and hover colors.
Event Cards Controls event listing cards. Event Cards are visible on the homepage, Channels, search results, and on landing pages for Places, Groups, and/or Departments. Includes:
  • Card Background: Background color for the entire card.
  • Border Radius: Set the desired border radius for event cards.
  • Content Background: Background color for the event content on cards.
  • Background Tint: Background tint color on cards. On hover, each event card includes a background tint.
  • Card Share: Text and button text colors for share options.
  • Interested Button Text: Color for the I'm Interested button text.
  • Mobile_card: Controls text and button text colors for cards on mobile.
  • Tag: Select colors for text and background on card labels. These are the New, Sponsored, and Event Type labels.
Featured Carousel Set colors for Featured Carousels on the homepage or in a Channel:
  • Next Slide: Next slide button text and button background.
  • Current Slide: Button background color for the current slide.
Content Meta Data Controls subscribe options colors:
  • Share Subscribe: Subscribe button background, text, and hover background colors.
  • Featured Object Container: Background color for featured object such as featured Groups or Users.
People Bar The People Bar appears on event details pages and on landing pages for Places, Groups and Departments. Set colors for:
  • About Follow Background: Set background color on the follow bar.
  • Many-Follower Tooltips: Tooltips appear on hover. Set the background and text color for the tooltips in the people bar.
"Submit Event" Component Controls the look and feel of the "Planning an Event" component on the homepage or in a Channel:
  • Banner Text: Set text color on the component.
  • Banner Background: Overall component background color.
User Menu Colors for the user dropdown menu:
  • Background: Overall background color for the menu.
  • Background Tint: Set the background tint.
Landing Page Headers Controls colors for landing pages for Places, Groups, and Departments:
  • Header Background: Header area background color.
  • Background: Overall background color for the landing page.
Map Colors for map components on Places, Events, and in the Map component on Channels and/or the homepage:
  • Label: Map label color.
  • Label Hover: Hover color for map label.
Event Tabs Link Line Set the color for the lines below each event tab on your homepage or Channel:
  • Link Line: Link line color.
Radii Set the platform border radius for elements of varying sizes. Element sizes include:
  • Tiny
  • Small
  • Medium
  • Large
  • Huge

Related articles