Brand Template Set-Up

Your Brand Template will be the header & footer of your calendar! You’ll need to identify a page with the header & footer you’d like to use and then just follow the steps below.

Platform Admin

Template Clean Up Steps

  • When you’re on the page with the header & footer, right click > View Page Source
  • Copy all/paste into Dirty Markup and clean to make it easier to read
  • Select all copy/paste into your favorite text editor — here at Localist, Atom is our favorite!
  • Remove all content after </header> and before <footer>
    • If your navigation is below </header> locate this content and leave it intact
  • Remove title tags
    • These are automatically added by Localist
  • Remove all <meta> content
  • Remove Google Analytics reference (you can keep Google Tag Manager)
    • This is added by Localist when you specify your UA number in Global options
  • Remove anything that says <base href=””> and/or ”canonical”
  • Make all URLs absolute
    • Ensure all references to CSS, JavaScript, images, etc., use complete URLs
      Non-absolute URLs: /external/wcpages/styles/styles.css
      Absolute URLs: https://yourdomain.com/external/wcpages/styles/styles.css

Adding your Header & Footer to Localist

Step 1: Head

  • Once you’ve completed the steps above, navigate to the Admin Dash > Settings > Platform Settings > Appearance
  • Click Edit HTML for your Active Theme, which will take you to the Theme Editor
  • Go back to the HTML file in your text editor > copy <head> content 
  • Paste <head> content into Global Site Shell on Line 51 > Save Changes

Step 2: Header

  • In the Theme Editor, remove lines 1-3 in the _header file > Save Changes
  • Then, go to the _user_menu file, remove lines 71-77, copy the remaining code and paste it in the first line of the _header file
    • Make sure you DO NOT save the changes you made in the _user_menu file
  • In your text editor, copy <header> content (beginning with the <body> tag) and paste it into the _header file above the code from the _user_meu file > Save Changes

Step 3: Footer

  • Back in your text editor, copy <footer>content
  • In the Theme Editor, paste <footer> content into _footer on Line 73
  • Move lines 57-69 in _footer below your </footer> > Save Changes
  • Once you’ve completed these steps, navigate to Admin Dash > Settings > Appearance > click on the paint brush icon for your Active Theme to begin corrective CSS + adding colors, fonts, etc.

Theme Editor

You can use Localist’s Theme Editor to access your platform’s HTML to customize how your event data is presented. The template language is Liquid.

Platform Admin

Using the Theme Editor

Creating a New Theme

  • Navigate to Settings > Platform Settings > Appearance
  • Select +Add Theme

    On the +Add Theme page you will be prompted to enter a name for the theme, and which existing theme the new theme will inherit.

  • Select Edit HTML to being editing

Actions

Field Details
Activate This will tell Localist to make the theme you’re editing live, replacing the previously active theme.
Delete This will remove the entire theme.

Modifying Files

– HEADS UP –
Modifying a file will cut it off from receiving any future Localist updates. If a file has not been modified, then it will continue to receive updates. If you had a modified file, but select Reset to Default then the file will receive any necessary updates. To ensure that you receive as many updates as possible, we recommend making any possible stylesheet changes outside of the Theme Editor.

 

When modifying a file, in order for your changes to stick you must Save Changes before you navigate to another file. If you select another file before saving your changes, you will receive a warning prompt that the file contains unsaved changes. After saving a file, it will be blue bold in the file list.

If you are using a SILK Wrapper, then changes made to the Global Site Shell file will not be applied. After you have saved your changes in a file, a Reset to Default link will appear next to the Save Changes button. Selecting this will remove all changes you’ve made to the specific file.

Information

Partial Details
README This is an internal file available for you to document any common
changes, or things to keep in mind for your staff as you customize your platform.
Public Help Page This is an open HTML page for you to provide a page of guidelines, instructions or an FAQ for your users.

Channels

Partial Details
Channel Page Shell The base shell for all Channels.
Add Events Block Component The default Share Events and Widget Builder box.
App Store Buttons Component Allows you to link directly to any apps you have in the App Store.
Channel List Component A list of some or all of the Channels on your platform. You are able to select which ones you want to appear.
Community List Component A list of the Communities on your platform.
Department List Component A list of the Department Pages on your platform (with links).
Description Component A description box to add to your Channel.
Event List Component A list of events (each list will have its own label to toggle between lists).
Event Spotlight Component Showcase a specific event.
Event and Featured Tabs Component Each section where the event list or Featured Events Carousel appears.
Featured Section Component Add a Featured Events Carousel(s) to your Channel.
Filter List Component Your platform’s Filter list (you cannot have a Channel specific filter list).
Google Map Component A map of all your events in the Channels with pins at each event location with a list of events happening there.
Group List Component A list of the Group Pages on your platform (with links).
HTML Component Any HTML embed you would like (i.e. a weather bot for a festival).
Header Component The header section of a Channel.
Hero Image Component An image that can link to a website (great for advertisements).
Mini Calendar Component The navigational mini calendar.
Place List Component A list of the Place Pages on your platform (with links).
Platform Navigation Component The navigation buttons to help your users find events (All Events, Places to Go, Groups, Departments).
RSS Feed Component Add an RSS news feed.
Social Links Component Add a Facebook, Twitter, and/or Instagram button linking to your respective account(s).
Submit Event Button Component Takes users to the Public Event Submission Form.
Website Link Component Add a link to an external website, like a festival page or registration form

Events

Partial Details
Page Shell The base shell for all Event Pages: Name, photo, time, dates + instances, place, filters, tags, website, cost, groups, departments, hashtag, custom fields, subscribe links, recent activity (comments, photos, reviews), event owner edit, admin edit.
Invite Friends The lightbox content and messaging that is displayed when a user selects the Invite Friends button.
Public Event Submission Form Name, description, schedule (start date, start time, end time, repeating, summary), location (place, room, address), additional details (hashtag, website, custom fields), photo, filters, departments, groups, ticketing (cost, link).
User Multi-Date Select The lightbox content and messaging that is displayed when a user selects the I’m Interested button on events that have multiple instances.
_edit_sidebar The right sidebar of the Public Event Submission Form. Includes “Adding an Event” and “Batch Event Add” boxes. Often used for custom guidelines, disclaimers and organization specific tips.
_event_attendees The People Interested box on Event Pages.
_event_buttons Buy Tickets/Register, Invite Friends and I’m Interested buttons on Event Pages.
_event_status A user’s “I’m Interested” status and functionality on Event Pages.
_right_sidebar The right sidebar for all Event Pages: Getting Here (map) box, event directions and all other “Event” partials.
_share_links AddThis social sharing options displayed on the left side of the browser on all Event Pages.

Groups

Partial Details
Page Shell The base shell for all Group (and Department) Pages: Metadata, photo, name, website, description, filters, custom fields, upcoming events, recent events, Group feed, recent activity, follow group, followers.
_group_buttons Follow Group, Twitter, Facebook.
_group_members Followers box on all Group (and Department) Pages.
_group_request_form The lightbox and messaging for when a Group requires approval to follow.

Homepage

Partial Details
_add_event_block The default Share Events and Widget Builder box in the right sidebar.

Message Management

Partial Details
Page Shell  The base shell for all Users’ messaging center.
User Contact Form  Admin contact form for users. Also includes right sidebar guidelines for contacting Admins.
_compose_form  Compose a message to friends page.
_conversation  View conversation with a friend: select a message, view previous conversations.
_conversation_list_item  View conversations within a list: delete conversation.

Modals

Partial Details
_edit_text Group description editor (only appears for Group Officers). Allows Group Officers to edit the description text of their Group without having access to the Admin Dash.
_login The login lightbox including content from _login_message and _login_methods.
_login_message Includes lightbox description copy: “Login to interact with events, personalize your calendar, and get recommendations.”
_login_methods Includes all available login option buttons.
_ticket_lightbox Pop up lightbox that is displayed when a User clicks “I’m Interested,” but the event has an external registration link (i.e. a “you still need to register!” reminder).

Photo Management

Partial Details
Page Shell Landing page for a user’s photos available via “Photos” in the User Menu.
_album_contents List of user uploaded photos available via “Photos” in the User Menu.
_edit_photo Includes caption, photo location, related events and ability to make a photo a user’s default.
_no_photo “Click on a photo” box in the right side column on the “Photos” dashboard.

Places

Partial Details
Place Page Shell The base shell for all Place Pages: Metadata, photo, name, website, description, filters, custom fields, upcoming events, recent events, recent activity, follow place, followers.
_business_buttons Follow Place, Twitter, Facebook.
_share_links AddThis social sharing options displayed on the left side of the browser.

Register

Partial Details
Registrant Text Page This is where you’ll edit subscription ‘terms’ text.

Review Management

Partial Details
Page Shell Landing page for a user’s reviews available via “Reviews” in the User Menu.
_manage_reviews_list Includes a list of events needing review and previously posted reviews.
_review_form The form for submitting a review of an event including these options: “I didn’t like it,” “Meh” and “It was great!”

Search Results & Month Views

Partial Details
Search Results Page Shell The initial landing page displayed after completing a search. This page is available at /search.
User & Place Calendar Page Shell The page resulting from selecting “view full calendar” from a User Profile or Place Page.
_calendar_filter Similar to browse_filter. It’s the filter list that appears on the side of Place/User calendars.
_event_list Event listings on all pages starting with /calendar.
_minicalendar The navigational mini calendar on Search Results pages.
_result_block The initial landing page for all search results.
_right_side The right sidebar for all search results.
_subscribe Google Cal, iCal, Outlook and RSS subscription links on search and filtered results pages.

Shared Among Multiple Views

Partial Details
_activity_photo The photo section of Event, Place, Group and Department pages.
_browse_filter Filter and Community lists on all pages except Channels (including Homepage). 
_comment The comment section of Event, Place, Group and Department pages.>
_comment_form The form used for commenting directly on Event, Place, Group and Department pages.
_event_item All Event listings on your Localist platform: Name, Event Type Filters, description, start date, start time, Place, photo, I’m Interested, Register/Buy Tickets CTA.
_featured_section All Featured Event carousels on your Localist platform: Name, photo, description, start date and start time.
_flash_message The alert bar that appears near the top whenever something is saved, a form submission error, etc.
_minicalendar The Mini Calendar on all pages except Channels (including Homepage).
_nav_after The space before the platform nav section (Submit, All Events, Groups, Departments, Places to Go).
_nav_before The space after the platform nav section (Submit, All Events, Groups, Departments, Places to Go).
_next_page_link The pagination containers that include back and next arrows when viewing event’s by Day, Week or Month.
_platform_nav Includes Submit an Event, All Events, Groups, Departments and Places to Go buttons.
_recent_activity This is the interface for Comments, Reviews and Photos included on Event, Group, Department and Place pages.
_review The review section of Event, Place, Group and Department pages.
_review_form The form for submitting a review of an event including these options: “I didn’t like it,” “Meh” and “It was great!”
_upload_photo_form Photo upload functionality included in the Recent Activity section on Event, Group, Department and Place pages.

User Authentication

Partial Details
Password Forgot Form Landing page for starting the password reset process for a local account. This page is available at /auth/forgot.
Password Reset Form Landing page for setting a new password for a local account.
User Account Verification Users are taken to this page after their email address has been verified.
User Login The non-lightbox login page. Viewable at http://calendar.url/auth/login. By default, it includes the files from the login lightbox on a static page.
User Signup Landing page for creating a new account. This page is available at /signup.

Users

Partial Details
Dashboard Shell The base shell for all user dashboards available via User Menu > Dashboard: Welcome message, user’s upcoming events, Widget CTA, Platform Nav and Profile Completeness.
Public User Page Shell The base shell for all user profiles available via User Menu > Public Profile: name, photo, upcoming events, recent activity, places followed and friends.
Add Digest The form used to initially create a new Digest.
Bulletin Settings In the User Menu > Settings > Bulletin tab, this shows a list of all Bulletins the User is subscribed to.
Calendar Digests The Digest management page available via Settings > Digest in the User Menu.
Digest- _example_widget In the Digest form (right sidebar), this is a simple description of a Digest.
Digest- _form The Digest Email builder form available at /digester/summaries/new.
Digest Edit The form used to edit a current Digest.
Edit Profile The base shell for the user settings page available via User Menu > Settings: account settings, notifications, Bulletins and privacy.
Manage Friends & Places Landing page for a user’s Friends & Places available via “Friends & Places” in the User Menu.
Manage Groups Landing page for a User managing the Groups they “follow” available via “Following” in the User Menu.
Notification Settings Interface where users can customize their notification settings available via Settings > Notifications in the User Menu.
Privacy Settings Interface where users can customize their privacy settings available via Settings > Privacy in the User Menu.
_feed_item The individual items in the list of updates and notifications in a User’s Dashboard.
_feed_list The list of updates and notifications in a User’s Dashboard.
_friends_tab_block The “following” page in a User’s Dashboard.
_pending_event A list of pending events in the User’s Dashboard.
_request_item A catch all of notifications a User will get if someone wants to follow them.
_user_buttons User notifications like sending a message or confirming a follow.

Widgets & Embedding

Partial Details
Widget Builder Form Landing page for building Localist Widgets. This page is available at /help/widget.
_examplewidget Includes “Put Events on Your Site” and “Widget Help” boxes in the right sidebar of the Widget Builder page.
_feed_event When using the Widget Builder to generate an RSS feed, this is the file it will use. Allows the admin to change the output of RSS for all RSS widgets on the platform (or they can make a new widget).

Wrapper

Partial Details
Global Site Shell Base shell for all Localist pages. Includes <head> elements and can be used to embed scripts. This file is disable when using a SILK Wrapper.
_footer Localist added footer. Includes “powered by Localist” messaging. This file is disabled when using a SILK Wrapper.
_header Localist added header. Includes logo, user menu and Localist search bar. This file is disable when using a SILK Wrapper.
_search_bar Localist specific search bar. When using a SILK Wrapper this is added to your platform with an HTML comment.
_user_menu Localist specific user menu. When using a SILK Wrapper this is added to your platform with an HTML comment.

Events

Events are available in two formats:

Format Details
Listing event_item

  • Listing Example: {% if event_item.is_past == true %}This is a past event!{% end %}
Landing Page event

  • Landing Page Example: {% if event.is_past == true %}This is a past event!{% end %}

Details

Property Details
.name Full title of the event
.url URL to the event’s unique landing page
.description_text Plaintext event description
.description Full HTML event description
.place Name of the event’s location
.venue Name of the Place Page connected to the event
.ical_url ICS subscription link for the event
.photo The photo assigned to the event
.tags All Localist Tags included with the event
.keywords All Localist Keywords included with the event
.website The external Event Website included with the event

Date & Time

Property Details
.starts_at Full start date and start time
.ends_at Full end date and end time
.start_date Date the event starts
.start_time Time the event starts
.end_time Time the event ends
.first_date Date of the earliest instance of a recurring event
.last_date Last date of the latest instance of a recurring event
.next_instance Next upcoming instance of a recurring event
.future_instances Next 8 instances of a recurring event
.created_at Timestamp of the event’s creation
.updated_at Timestamp of the event’s last update

Statuses

Property Details
.is_sponsored The event has been marked as Sponsored
.is_over The event’s end time has passed
.is_past The event’s start date > today
.has_many_future_instances The event has recurring future instances
.is_verified The event has been approved and is live
.is_rejected The event has been rejected and is not live
.allows_attendance Users can use the “I’m Interested” functionality for the event
.has_instances The event is a recurring event with multiple instances
.has_tickets Localist Tickets are required for one or more instances of the event
.needs_registration Localist Registration is required for one or more instances of the event
.has_external_tickets An external ticket/registration URL is included with the event

Language Changes

Language Changes refer to any time the default language on the platform is changed to display a different word or phrase. The majority of languages are made by the customer using the Theme Editor to modify the platform’s HTML. However, there are some pieces that need to be changed on Localist’s end. Localist Language Changes include:

  • Vocab:  All Events, Groups, Places to Go, Submit an Event, I’m Interested, People Interested, Buy Tickets, and Register
  • Date + Time Format: capitalization of am/pm (AM/PM vs. am/pm), adding a space after the time (8 pm vs. 8pm), adding/removing zeros at the top of the hour (8:00 vs. 8), and lengthening/shortening the date format ( Sept. 1 vs. September 1 vs. 9/1)
  • Localist language changes do not include Filters, Custom Fields, or Homepage tabs.

Changes Implemented by Your Team

The files noted are found in the HTML Theme Editor by navigating to Settings >Platform Settings > Appearance > Select Edit HTML for the appropriate theme.

  • Example file: Homepage > _add_event_block
    • Homepage is the section in the theme editor and _add_event_block is the actual file.

 

Localist Platform Homepage

Share Events Box: Homepage > _add_event_block

 

Public Event Submission Form

Adding an Event + Batch Event Add Boxes: Events > Public Event Submission Form

 

Landing Pages

Getting Here map header:

  • Place Landing Page: Places > Place Page Shell
  • Event Landing Page: Events > _right_sidebar

 

Recent Activity Section (header, comment, review, photo and no recent activity): Shared Among Multiple Views > _recent_activity

 

Upcoming Events header, Recent Event header & “View full calendar” link:

  • Place Landing Page: Places > Place Page Shell
  • Group Landing Page: Groups > Page Shell

Platform Settings

In this area of the Admin Dash, you will find 1) general platform-wide settings and 2) appearance settings (CSS and HTML).

Platform Admin

Settings

Navigate to Settings > Platform Settings.

Field Details
Platform Display Name This is the name that is displayed in breadcrumb links, feed data, emails and notifications for the platform.
Physical Address This will be used in the footer of all notification emails to prevent messages from being directed to spam folders.
Contact Email This can be any one email address. There is a Contact Us link on the event submission form and all inquiries from that form will be sent to this address.
Pending Digest Email This can be any number of emails. Every day at 4 PM a pending digest that includes a list of events in the pending queue will be sent to the specified emails. The digest does not take into account any filter restrictions on a user’s account, but when they navigate to the pending queue they will only see events that correspond to their restrictions.
Platform Time Zone Select one that applies.
Silent Mode When checked, Localist will not send any emails/notifications to users.This is unchecked by default.
Allow Community Event Posts When unchecked, the “submit an event” button will be removed from your calendar homepage and events will only be able to be added by administrators in the admin dashboard. Audience event submissions are allowed by default.
Moderation Level Applies to all event comments.

  • Automatically approve all posts: All comments and reviews will automatically be approved/published to the calendar.
  • Send any posts that contain links to the moderation queue: This is the default setting. Anytime a user posts a comment/review with a link or HTML, it will go to the moderation queue for approval.
  • Send all first posts to the moderation queue: When a user posts a comment/review for the first time, it will go to the moderation queue for approval. Once the post has been approved, all future posts from this user will automatically be published.
  • Send all posts to the moderation queue: All comments and reviews will go to the moderation queue for approval.

Appearance

Field Details
SILK Wrapper (Brand Template) URL If you are using our SILK Wrapper feature, save your wrapper’s URL here. To activate the new wrapper or force an update, select the Refresh Wrapper link below the field.
Include Localist Styles Unchecking this setting will remove all default CSS from the platform.
User Help URL This URL will be posted on your platform’s Admin Dash.
Default Date Range Dictates the time range and amount of events that will be displayed upon selecting a filter so the number on the homepage will always reflect this. Select one of the following:

  • Today: Shows events for today.
  • This Week: Shows events within the current week.
  • Next 30 Days: Shows all events within the next 30 days.
Show Event Types on Event Items If checked, the Event Type associated with events will display when events are in lists (i.e. Trending, all events, Filtered pages, etc).
Default Map View Select one of the following:

  • Standard: Default street-view map.
  • Satellite: Google’s Satellite-view map.
Logo & Link If you are not using a wrapper or header/footer template, you can upload a logo here that will display in the top left corner of the default header. The URL entered will be attached to the logo.

Platform Themes

To edit the CSS of the Default or custom theme, select Edit Settings. To add a custom theme, please refer to our Theme Editor documentation. On the theme’s settings page, you will find the following:

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.

Additional Platform Settings Documentation

 

Custom Domain & SSL

Localist’s custom domain feature is an essential component of your overall brand identity being applied to your platform as it changes the display of your Localist URL to a subdomain of your current website. Once you have your Custom Domain in place, you’ll need to get SSL setup for the most secure browsing experience.

Platform Admin

Frequently Asked Questions

Who do I contact to update our SSL certificate?

SSL is now self-serve right in the Admin Dashboard, so you no longer have to contact the Localist support team for assistance! You can request a CSR, upload your certificate and secure your Localist platform in one convenient location.

When it’s time to update, you’ll just have to navigate to the Settings > Platform Settings > Domain & Security.

Configuring a Custom Domain

Your calendar’s custom domain is set up by using a CNAME record. Your custom domain will need to be a subdomain to your website, such as events.yourwebsite.com, and not set as a subdirectory, such as yourwebsite.com/events.

Once your custom domain secured through your domain registrar, follow these two steps:

  1. Create a CNAME record to point your custom domain to your Localist placeholder URL, yourorgname.enterprise.localist.com. This is not a forward or a redirect, but an alias. If you are setting up a redirect for the non-www custom domain, the redirect should be unmasked.
  2. Once set, navigate to Settings > Platform Settings > Domain & Security and add the new domain to the Custom Domain field. Save Changes.

– HEADS UP –

It can take 24-72 hours for domain settings to propagate across the world. Confirm the domain has fully propagated before taking this step. You can confirm it through websites like https://dnschecker.org/.

Domain Policies

Navigate to Settings > Platform Settings > Domain & Security.

Field Details
Force HTTPS All connections requested over http will be automatically redirected to HTTPS sessions. This redirect will occur for every HTTP request.
Stricter Transport Security Similar to “Force HTTPS,” the STS policy, tells a browser to never use HTTP. However, once the first redirect occurs, the user’s browser will never attempt an HTTP connection and will instead go directly to an HTTPS session. Once set, this setting cannot be undone as individual user’s browsers will retain the STS header setting even if turned off by the customer.
Content Security Policy When turned on, this setting blocks JavaScript from third party domains. This should not be turned on if you are using our SILK Wrapper feature or you have added your website’s header/footer template to the HTML Theme Editor.

  • Extra Content Security Policy: This allows for deeper control of what third party assets are allowed access. For example, setting img-src https://images.localist.com, would restrict images from only that website being allowed.
Referrer Policy Tells the browser to include the URL of the page a user is initially on when navigating to another page. Turned on by default.
Feature Policy Turns off computer microphone and camera access, except for those platform’s using Localist Register’s Organizer Check-In scanning for QR codes. Turned on by default.

SSL Certificates

Generating a CSR

Navigate to Settings > Platform Settings > Domain & Security > + Generate CSR. Fill out the following (fields marked with * are required):

Field Details
Custom Domain Enter your platform’s Custom Domain.
Country (C)* Enter your two character country code. Ex: US.
State or Province (ST)* Enter your state. Do not abbreviate.
City or Locality (L)* Enter your city. Do not abbreviate.
Organization (O)* Enter your org’s official name.
Organization Unit (OU) Usually used for something like a Department name. This field is optional.

RSA Key Size: select either 2048 bit OR 4096 bit.

Once complete, click the Generate CSR button. From here, you’ll need to submit the CSR to your certificate authority. We will need the certificate and intermediates sent back in format X.509, PEM encoded. For some systems, that can be listed as “Apache2 + mod_ssl/ .pem” or “X.509 Certificate Only, Base64 encoded” and “X.509 Intermediates/root only Reverse, Base64 encoded“.

Uploading a New Certificate

Once you have the SSL cert from your certificate authority, navigate to Settings > Platform Settings > Domain & Security > + Upload Certificate. Upload the following:

  • Certificate File
  • Private Key

– HEADS UP –

The certificate and private key must be in X.509 PEM format, without a password. You’ll need to upload both the Certificate File and Private Key (if this is the first time you’re setting up SSL on your platform).

 

Intermediate and Root certificates are not required.Localist’s configuration utilizes a database of intermediates and automatically uses the appropriate one based on the certificate that’s been uploaded.

 

After your certificate is uploaded, you will see it added as an entry to the certificate log on the main Domain & Security tab. 30 days before the certificate expires, the platform’s main contact will receive an email alerting them of the upcoming expiration.

Renewing an Existing Certificate

When it comes time to update your certificate, start by following the previously outlined steps for generating a CSR. Again, you will submit this to your certificate authority to obtain a new certificate. Once obtained, select the linked domain name to update your new certificate. From here you will upload your certificate, no private key required.

Intro to Branding Tools

Localist offers three branding tools (Brand Template, Custom CSS, and the HTML Theme Editor) that work together to achieve anything from a basic theming to extensive customization.

Platform Admin

Brand Template

As your main branding tool, the Brand Template allows your Localist platform to adopt your main website’s header, footer, and base CSS. For organizations looking to achieve a slick, but simple level of customization, implementing a wrapper is the first and only step toward achieving 100% brand adoption.

Custom CSS

Custom CSS allows you to make surface level changes to elements that are already built, whether by the customer or provided out-of-the-box by Localist. You can add Custom CSS to the stylesheet within your wrapper or directly into Localist. With Custom CSS, you’re able to make changes to:

  • Colors
  • Fonts
  • Buttons
  • Background, shadows and borders
  • Border Radius
  • Sizing
  • Text decoration

HTML Theme Editor

You can use Localist’s Theme Editor to access your platform’s HTML to customize how your event data is presented.

In the Theme Editor you can:

  • Add a link to a platform page
  • Move elements
  • Add Custom Guidelines to the event submission form
  • Change what photo size is referenced

Appearance Interface

Navigate via Settings > Platform Settings > Appearance, you’ll see the following fields:

Field Details
SILK Wrapper (Brand Template) URL If you are using our SILK Wrapper feature, save your wrapper’s URL here. To activate the new wrapper or force an update, select the Refresh Wrapper link below the field.
Include Localist Styles Unchecking this setting will remove all default CSS from the platform.
User Help URL This URL will be posted on your platform’s Admin Dash.
Default Date Range Dictates the time range and amount of events that will be displayed upon selecting a filter so the number on the homepage will always reflect this. Select one of the following:

  • Today: Shows events for today.
  • This Week: Shows events within the current week.
  • Next 30 Days: Shows all events within the next 30 days.
Show Event Types on Event Items If checked, the Event Type associated with events will display when events are in lists (i.e. Trending, all events, Filtered pages, etc).
Default Map View Select one of the following:

  • Standard: Default street-view map.
  • Satellite: Google’s Satellite-view map.
Logo & Link If you are not using a wrapper or header/footer template, you can upload a logo here that will display in the top left corner of the default header. The URL entered will be attached to the logo.

Platform Themes

Field Details
+ Add Theme Click to add a new theme.
Name Name of the themes on your platform.
Status You’ll see either:

  • Active: This indicates that the theme is Active.
  • Activate: Click this link if you’d like to activate the theme.
Actions Select one of the following:

Staging Environment

All Localist Enterprise licenses include access to a unique staging environment to be used as a testing sandbox. Staging is accessible to Platform Admins by navigating to Settings > Platform Settings > Access the Platform Sandbox (right side box). The Platform Admin will be redirected to the staging environment homepage as an already logged in user.

Platform Admin

Frequently Asked Questions

Can you sync Staging with Production?

Nope! It is not possible to sync data from Staging to Production. Any additions and custom modifications will need to be manually copied into your Production platform.

When should we use our Staging Environment?

Staging can be used to test branding changes (CSS, HTML, SILK Wrapper, etc) and Feeds. However, please note that if you add a Feed, it will import once but it will not automatically import each night.

Important Notes

  • Your staging environment is not synced with your production platform. It is not possible to import data from staging to production. Any additions and custom modifications will need to be manually copied into your production platform.
  • If you add a feed, it will import once but it will not automatically import each night. If you would like to test feeds, please email support@localist.com.
  • Single-sign on is not enabled on staging, so you will need to access staging via the link in the Settings tab instead of directly visiting the staging URL.

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.

Platform Admin

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

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

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