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

Navigate via Settings > Platform Settings> Appearance

On the Appearance page, 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.

On the Edit Colors, Fonts & CSS page you will see four ways to customize your platforms:

Field

Details

Variants

Out of the box, Localist offers four variants that can be used as the base of your theme:

Default

Localist

Dark

Custom

Global Elements

Here you’ll find:

Interface Colors: You can customize the color (with a color picker) for various content on your platform.

Fonts: You can customize the font family, font size, etc. for your platform.

Components

This is where you can adjust the grid column widths.

Custom CSS

This is where you enter and save Custom CSS to target individual elements.

Custom CSS

Custom CSS allows you to change 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

Common CSS Properties

Hiding

{display: none; }

Color

{color: red; }

Background-color

{background-color: red; }

Hover selector + :hover

a.imgoing:hover {background-color: red; }

Width

{width: 10px; }

Height

{height: 20px; }

Font

{font-family: tahoma; }

Font Size

{font-size: 5px; }

Font Weight (bold, normal)

{font-weight: bold; }

Localist CSS Selectors

When customizing multiple parts of one element, the selector remains the same. For example, when customizing the header of the Share Events box, you will always use the selector #share_events_block h2 with only the property changing.

Was this article helpful?

Our team of experts is here to not just do the heavy lifting during implementation, but to also kick your Support services up several notches so you can focus on curating and crafting quality event content. Enter your email address to connect with your Customer Success Manager.