Home

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

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

 

– 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

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:

Background Color – 

{background-color: black; }

Padding to increase the size of the background – 

{padding: 5px; }

Border-radius to round the corners – 

{border-radius: 5px; }