10 Cool Things You Can Do With the Theme Editor

Localist’s Theme Editor houses your platform’s HTML where you can customize how event data is presented. The template language is Liquid.

Please note that the images below are using our Emphasis theme. If your platform is using our Legacy theme, you can certainly still apply these styles to your calendar as well, but the code/steps provided may differ. Want access to Emphasis? Learn more about upgrading.

1. Google Translate

Instructions

(1) Navigate to Settings > Platform Settings > Appearance > Edit HTML for your Active theme (2 ) Open the Global Site Shell file under Wrapper at the bottom of the theme file list (3) Add the below code directly under <meta name="mobile-web-app-capable" content="yes"> (4) Save Changes

<div id="google_translate_element"></div> <script type="text/javascript">
function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); }
</script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Note: If you’re using a SILK Wrapper with our Legacy theme, you’ll add this in the <head> of your wrapper HTML file.

2. Static Featured Listings

Instructions

Step 1: HTML

(1) Navigate to Settings > Platform Settings > Appearance > Edit HTML for your Active theme (2) Under Shared Among Multiple Views, select the _featured_section file Remove lines 1-17 and replace it with the following code:

{% for event in featured_section.events limit:3 %}
{% if forloop.first == true %}
<div class='em-carousel-slide'>
<div class='em-slidecontent'>
<div class="em-item em-card em-card--carousel">
<div class="em-list_tags">
<a class="em-card_tag">Featured Event</a>
</div>

(4) Remove lines 81-86 at the bottom of the file (5) Paste the following code in its place:

<div class="featured-area-second-level event_list_component" style="padding-top:30px;">
<div class="featured-area-card featured-lower-two-cards em-card-group-featured em-card-group--medium">
{% else %}
{% render_event_item event %}
{% endif %}
{% endfor %}
</div>
</div>

(6) Save Changes

Step 2: CSS

(1) Navigate to Settings > Platform Settings > Appearance > Edit Settings for your Active theme (2) Click the Custom CSS tab & drop the following code in the box:

.featured-lower-two-cards.em-card-group--medium {
grid-template-columns: repeat(auto-fill, minmax(450px, 450px));
}

.featured-lower-two-cards {
display: grid;
grid-gap: 2.5rem 2.1875rem;
justify-content: center;
margin-bottom: 4.25rem;
}

(3) Save Changes

3. Color Coded Event Types + Cards

Instructions

Step 1: HTML

(1) Navigate to Settings > Platform Settings > Appearance > Edit HTML for your Active theme (2) Under Shared Among Multiple Views, select the _event_item file (3) Swap out line 3 with the following code:

<div class="em-card{% if event_item.sponsored %} sponsored{% endif %} em-event-{{ event_item.event_id }} em-event-instance-{{ event_item.id }} {% for tag in event_item.event_types limit:1 %}{{ tag | downcase }}{% endfor %}">

(4) Swap out lines 51-55 & 64-68 with the following code:

{% unless event_item.event_types == blank %}
{% for tag in event_item.event_types limit:1 %}
<a class="em-card_tag {% for tag in event_item.event_types limit:1 %}{{ tag | downcase }}{% endfor %}">{{ tag }}</a>
{% endfor %}
{% endunless %}

(4) Save Changes

Step 2: CSS

(1) Navigate to Settings > Platform Settings > Appearance > Edit Settings for your Active theme (2) Click the Custom CSS tab & drop the following code in the box:

.em-card.EVENTTYPE {border-bottom: 5px solid #HEXCODE;}
.em-card .em-list_tags .em-card_tag.EVENTTYPE {background-color: #HEXCODE;}

* Swap EVENTTYPE with an actual Event Type’s name. For example, if you have an Event Type named Workshop, you’ll swap “EVENTTYPE” with “workshop” in the CSS selector. (3) Save Changes

4. Adding Dept/Group/Tag to Event Cards

Instructions

TAGS
{% unless event_item.tags == blank %}
<div class="tag">
{% for tag in event_item.tags limit:1 %}
<a class="em-link" href="{{ tag.event_search_url }}">{{ tag.name }}</a>{% unless forloop.last %}, {% endunless %}
{% endfor %}
</div>
{% endunless %}

GROUP/DEPARTMENTS
{% unless event_item.groups == empty %}
<div class="em-event-meta-data-groups">
{% for group in event_item.groups %}
<a class="card-group" href="/group/{{ group.urlname }}">{{ group.name }}</a>{% unless forloop.last %}, {% endunless %}
{% endfor %}
</div>
{% endunless %}

OTHER FILTERS
{% unless event_item.types['event_audience'] == blank %}
<div class="em-event-meta-data-groups">
<p class="host">AUDIENCE:</p>{% for type in event_item.types['event_audience'] %}
<a class="card-audience" href="{{ type.event_search_url }}">{{ type.name }}{% unless forloop.last %}, {% endunless %}</a>
{% endfor %}
</div>
{% endunless %}

* What is underlined, event_audience, will depend on what Filter Family you'd like to include and how you have it named. For example, "Target Audience" would be ['event_target_audience'] or "Topic" would be ['event_topic']. (4) Save Changes

5. Large Event Cards by Default

Instructions

(1) Navigate to Settings > Platform Settings > Appearance > Edit HTML for your Active theme (2) Under Search Results & Month Views, select the file Search Results Page Shell (3) Remove card_size:settings.card_size on line 253 (4) On lines 282 and 297, replace the {{ settings.card_size }} with big so it looks like <div class=“em-card-group em-card-group--big”> on both lines (5) Save Changes

6. Submit an Event Component Customizations

Instructions

Step 1: HTML

(1) Navigate to Settings > Platform Settings > Appearance > Edit HTML for your Active theme (2) Under Channels, select Submit Event Button (3) Drop the following snippet below the already existing button code on line 10:

<br>

<a class="em-button em-secondary em-big em-event_button" href="https://localist.com">

Button Language Here

<i class="fas fa-long-arrow-alt-right"></i>

</a>

(4) Save Changes Note: You can customize the Submit an Event Component’s header/description text in your homepages Channel Layout Editor.

Step 2: CSS

(1) Navigate to Settings > Platform Settings > Appearance > Edit Settings for your Active theme (2) Click the Custom CSS tab & drop the following code in the box:

.em-event_banner {

display: block;

text-align: center;

 }


a.em-button.em-secondary.em-big.em-event_button{

justify-content: center;

}

.em-event_banner .em-event_banner-content{

margin-bottom: 20px;

}

(3) Save Changes

7. Global Submit an Event Component

Instructions

Step 1: Channel Layout Editor

(1) Navigate to Content > Channels > select Edit Layout for your homepage Channel (2) Click the “X” next to the Submit an Event component > Ok (3) Save Changes

Step 2: HTML

(1) Navigate to Settings > Platform Settings > Appearance > Edit HTML for your Active theme (2) Under Wrapper, select _footer (3) Paste the following code at the very top of the file:

<div class="em-event_banner">

<div class="em-event_banner-content">

<h2 class="em-banner_title">Planning an event?</h2>

<p class="em-banner_text">Share your event with our community by using our simple event submission form.</p>

</div>

<div class="submitbutton">

<a class="em-button em-secondary em-big em-event_button" href="https://yourcustomdomain/event/create">

Submit an event

<i class="fas fa-long-arrow-alt-right"></i>

</a>

</div>

<div class="em-event_banner-overlay"></div>

</div>

(4) Save Changes

Step 3: CSS

(1) Navigate to Settings > Platform Settings > Appearance > Edit Settings for your Active theme (2) Click the Custom CSS tab & drop the following code in the box:

.em-event_banner{

margin-bottom: 0;

}

.em-event_banner .em-event_banner-overlay{

border-radius: 0;

}

(4) Save Changes

8. Recurring & Past Event Disclaimer

Instructions

RECURRING

<div class="recurringmessage">

{% if event_item.has_many_future_instances %}

<p>More dates & times available</p>

{% endif %}

</div>

PAST

{% if event_item.is_past %}{% unless event_item.has_many_future_instances %}

<div class="pastevent">

This is a past event.

</div>

{% endunless %}

{% endif %}

(4) Save Changes

9. Link to a Pre-Filtered View of a Group/Department’s Events

Instructions

(1) Navigate to Settings > Platform Settings > Appearance > Edit HTML for your Active theme (2) Under Groups, select Page Shell (3) Drop the following code on line 45 (between {% endunless %} and </div>):

<a href="{{ group.calendar_url }}/upcoming?order=date&experience=&event_types%5B%5D=37404859896212" class="em-link em-load_more">View Dates & Deadlines<i class="fas fa-long-arrow-alt-right"></i></a>

* What is underlined,%5B%5D=37404859896212, will depend on the Filter item you choose. You can find this by selecting a Filter from the Filter dropdown on the homepage > clicking Apply Filters. On the resulting page, you’ll find the numerical string in the URL. For example: https://localist.com/events/calendar/upcoming?event_types%5B%5D=37404859896212&experience=&order=date. (4) Save Changes

10. Replace Event Card Labels with Date

Instructions

{% if event_item.conference? %}

{% event_time event_item order:"first_date" %} - {% event_time event_item order:"last_date" %}

{% else %}

{% event_time event_item order:"date,time,end" %}

{% endif %}

(4) If removing all other card labels, delete lines 38-66, and drop the following snippet of code below in its place. If keeping other labels, drop the snippet either above or below the other labels.

<div class="em-list_tags"> 

<a class="em-card_tag"> 

{% if event_item.conference? %} 

{% event_time event_item order:"first_date" %} - {% event_time event_item order:"last_date" %} 

{% else %} 

{% event_time event_item order:"date,time,end" %} 

{% endif %} 

</a> 

</div>

(5) Save Changes

How can we help?

Search