Colors, Fonts & CSS

In this article:

  • Accessing the Custom CSS interface
  • Custom CSS
  • Localist CSS Selectors
  • Modifying or Creating Buttons


Accessing the Custom CSS Interface

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

To access this interface:

1. Navigate via Settings> Appearance

2. On the Appearance page, select the paintbrush icon (Edit Colors, Fonts & CSS) 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 ways to customize your platforms: Variants, Interface Default CSS and Custom CSS.

  • Variants – Out of the box, Localist offers three variants that can be used as the base of your theme
    • Default (left image)
    • Localist (middle image)
    • Dark (right image)

  • Interface Default CSS – These options display the live, platform-wide CSS rules. What is displayed as the Default Variant is dependent on what variant you have chosen as your base.
  • Custom CSS – This is where you enter and save Custom CSS to target individual elements or to make changes to items that are not listed as a Default Variant.


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 > Appearance

2. Select the paintbrush icon (Colors, Fonts & CSS) for the theme you would like to edit.

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; }


– Note –

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.



Localist CSS Selectors

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:

Background Color – 

{background-color: black; }

Padding to increase the size of the background – 

{padding: 5px; }

Border-radius to round the corners – 

{border-radius: 5px; }