Home

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. In this article:

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

Accessing the Custom CSS 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

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.

Main Navigation

Submit an Event

a.btn.btn-large.fullwidth.btn-color-alt.nav_createevent

All Events

#homepag_nav a.nav_calendar

Places to Go

#homepag_nav a.nav_place

Groups

#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

#x-section-title

Event Title

div.item_content_featured h3.summary a

Description

div.item_content_featured h4.description

Date + Time

div.item_content_featured div.dateright

Background

.featured_item

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

#x-event-group-title

Selected Tab

a.dark_colorfive.selected_tab_colorfive

Unselected

a.dark_colorfive

Event Listings

Title

.event_group .item h3.summary a

Event Types

div.event_filters a

Description

.event_group .item h4.description

Date + Time

.event_group .item div.dateright

Place

.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

.item.sponsored

Mini Calendar

Month Name

#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

Filters

Community Header

#community-listlabel

Selected Community

#x-campus

Filter Headers

div.filter_list

Filter Items

div.grid_4.omega.sidebar div.filter_list a

Share Events Box

Header

#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

a.btn.btn-color.fullwidth

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

#event_subscribe

Shared Across Landing Pages (Event + Place + Group)

Title/Name

.content-top .box_content .summary

Description

div.description

Top Content Box

div.content-top.grid_container

Bottom Content Box

div.content-bottom

Filter/Extra Details Headers

.extra_details dt

Filter/Extra Details Content

.extra_details dd a

Recent Activity

#comments h4

Comment

a.add_comment_button.btn.btn-color

Review

a.add_review_button.btn.btn-color

Photo

a.add_photo_button.btn.btn-color

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)

a.profile_twitter_button

Find on Facebook (Group)

a.profile_facebook_button

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