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.

Platform Admin

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


{display: none; }


{color: red; }


{background-color: red; }

Hover selector + :hover

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


{width: 10px; }


{height: 20px; }


{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.

Main Navigation

Submit an Event


All Events

#homepag_nav a.nav_calendar

Places to Go

#homepag_nav a.nav_place


#homepag_nav a.nav_group

View more events…

div.page_link a

Homepage Breadcrumb

#breadcrumbs ul li.first_crumb a

Second Breadcrumb

#breadcrumbs ul li.last_crumb

Featured Event + Tabs

Featured Header


Event Title

div.item_content_featured h3.summary a


div.item_content_featured h4.description

Date + Time

div.item_content_featured div.dateright



Selected Nav Button

.featured_carousel .featured_nav a.current

Unselected Nav Buttons

.featured_carousel .featured_nav a

Selected Featured Tab

#x-section-tab-buttons div a.selected_tab_colorfive

Unselected Featured Tab

#x-section-tab-buttons div a

Homepage Tabs

Tabs Header


Selected Tab




Event Listings


.event_group .item h3.summary a

Event Types

div.event_filters a


.event_group .item h4.description

Date + Time

.event_group .item div.dateright


.event_group .item div.location a

I’m Interested Button

.event_group .item a.imgoing

Cancel Plans Button

.event_group .item a.cancelplans

Sponsored Event


Mini Calendar

Month Name


Navigation Arrows

#localist-minical-prev-month #localist-minical-next-month

Days of the Week

.widget.mini_calendar .minicalendar th

Days of the Month

#minicalendar >tbody:nth-child(2)

Last/Next Month Days

#minicalendar td.dimday a

Current Month Days

#minicalendar td.active a

Current Day

.widget.mini_calendar .minicalendar tbody[data-minicalendar=”calendar”] td.selected a


Community Header


Selected Community


Filter Headers


Filter Items

div.grid_4.omega.sidebar div.filter_list a

Share Events Box


#share_events_block h2

Box Content

#share_events_block div

Linked Text

#share_events_block div a

Filtered Results Page

Time Range Header/Arrows

div.grid_8.alpha div:nth-child(2) div h1 /.pagination_container .pagearrow

View Today Mini Cal Button


View By/Sort By

#x-list-view > label /#x-list-order > label

All Selected Filter Options

.widget .widget-content ul

All Unselected Filter Options

div.grid_4.omega.sidebar div.form_box div a

Hide Recurring Events

#hide-recurring-option label span

Filter Headers + Selected Filter Items

div.grid_4.omega.sidebar div.form_box div div:nth-child(2)

Subscribe to These Results

div.box_container.light_colorfive.widget h2

Subscribe Icons


Shared Across Landing Pages (Event + Place + Group)


.content-top .box_content .summary



Top Content Box


Bottom Content Box


Filter/Extra Details Headers

.extra_details dt

Filter/Extra Details Content

.extra_details dd a

Recent Activity

#comments h4







No Activity Yet/Recent Activity

div.nocontent p

Event Landing Page Only

I’m Interested

#x-confirm-buttons-wrapper a.imgoing

You Are Interested

#x-event-status h4 span

Cancel Plans

#x-event-status h4 a

Invite Friends

#x-confirm-buttons-wrapper a.invite_friends_button

People Interested

#x-event-attendees h3

Ticket/Register Button

#x-confirm-buttons-wrapper .ticket_action a

Place + Group Pages Only

Upcoming Events Header

div.box_title.sectionheader.dark_colorfiveh3 span

No Upcoming Events

div.nocontent p

View full calendar…

#x-future-plans a

Recent Events Header

div.content-bottom div.box_title.list_break h3

Getting Here (Place)

div.widget-header.sectionheader.dark_colorfourh3 span

Follow Place

div.grid_4.omega.sidebar div.user_action.widget a

Follow Group

#x-group-buttons div div a:nth-child(1)

Find on Twitter (Group)


Find on Facebook (Group)


Modifying or Creating Buttons

To customize the default Localist buttons, or to create buttons for other links, you can apply a combination of properties to a Localist selector. Apply these properties to the selector:

  1. Background Color {background-color: black; }
  2. Padding to increase the size of the background {padding: 5px; }
  3. Border-radius to round the corners (optional) {border-radius: 5px; }

Was this article helpful?