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.
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 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
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
#community-listlabel
Selected Community
#x-campus
Filter Headers
div.filter_list
Filter Items
div.grid_4.omega.sidebar div.filter_list a
#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 (optional) {border-radius: 5px; }
