Skip to main content

Search

Colors, Fonts & CSS

Updated: Production Edited:

Colors, Fonts & CSS

If you are not using a Brand Template, Localist provides a Custom CSS interface to make basic customizations of surface-level design elements, such as colors, fonts, or sizes.

 

Accessing the CSS Interface

  1. Navigate via Settings > Platform Settings > Appearance tab
  2. In the Appearance tab, select Edit Settings next to the theme you wish to edit. If you are editing the theme marked as Active, then any changes that are made will be live upon saving.
  3. On the Edit Colors, Fonts & CSS page you will see three tabs where you can customize your platform

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
  • Light 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
  • Share Button: 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.
  • Confetti: By default the Channel headers have confetti. You can control the squiggle, triangle, and the square colors independently.
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.
  • Disabled Background: Set the background color for disabled elements on forms.
  • 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.
  • Text: Unlinked breadcrumb text color.
  • 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.
  • Confetti: Similar to the Channel header, the submission components has confetti by default. Set the colors for the squiggle, triangle, and the square confetti independently.
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

 

Custom CSS

This tab contains the global CSS box for the entire platform. Code added here will effectively override any default CSS rules on the platform. Custom CSS allows you to change the surface-level design elements, such as colors, fonts, or sizes. If you're new to CSS, or need a refresher, we highly recommend http://www.w3schools.com/css for how-to’s, tutorials, and complete lists of available properties.

 

To add Custom CSS to Your Platform

  1. Navigate via Settings > Platform Settings > Appearance
  2. On the Appearance page, select Edit Settings next to the theme you wish to edit > Custom CSS tab.

 

Mobile + Print CSS: 

You can access your platform’s default CSS for mobile view and printing via this URL
(If in place, use your custom domain, but if not then use the Localist placeholder): https://customdomain.yourorganization.com/platform/stylesheet.css?expand=1.

Related articles

Comments

0 comments

Please sign in to leave a comment.