Creating Custom CSS

What is Custom CSS?

Custom CSS allows you to change surface-level design elements, such as colors, fonts, or size.

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, navigate via Settings > Appearance > then select the Edit Colors, Fonts & CSS button for the theme you would like to edit.

Mobile + Print CSS: You can access yourLocalist 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 {font-weight: bold; } (bold, normal)

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

 

  • Padding to increase the size of the background{padding: 5px; }
  • Border-radius to round the corners{border-radius: 5px; }