Custom Widget Menu
Template 1
HTML
{% unless settings.style == 'none' %}
<style>
.localist-widget .event-list {
list-style: none;
margin: 0;
padding: 0;
font-size: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
float: unset;
font-family: "Karla",helvetica,arial,sans-serif;
}
.localist-widget li.event-item {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
-o-transition-duration: .6s;
transition-duration: .6s;
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
width: 100%;
display: flex;
margin-bottom: 20px!important;
}
.lt-ie9 .localist-widget li.event-item {
margin-bottom: 48px;
}
.localist-widget li.event-item.transparent {
opacity: 0;
}
.localist-widget li.event-item a{
line-height: 1.125;
color: inherit;
display: inline-block;
max-width: calc(100% - 70px);
text-decoration: none;
}
.localist-widget .event-item a h4{
margin-top: 0;
font-size: 1.125em;
font-weight: 500;
color: #127BA2;
margin-bottom: 0.125em!important;
}
.localist-widget .event-item .date_range,
.localist-widget event-item .time_range{
color: #555;
font-size: 14px;
font-style: italic;
display: block;
font-weight: 500;
line-height: 1.25em;
}
.localist-widget time.event-date {
display: block;
float: none;
margin-right: 20px;
position: relative;
width: 50px;
padding: 0 20px;
}
.localist-widget time.event-date:after {
background-color: #b3b3b3;
content: "";
position: absolute;
right: 0;
top: 0;
height: 46px;
width: 1px;
}
.localist-widget .event-month {
color: #000;
font-size: 18px;
display: block;
text-align: center;
}
.localist-widget .event-day {
font-family: "Karla",helvetica,arial,sans-serif;
font-style: normal;
font-weight: 400;
display: block;
font-size: 38px;
text-align: center;
}
@media (min-width: 36em) and (max-width: 60em) {
.localist-widget li.event-item {
margin-bottom: 48px;
}
.localist-widget .event-list.two-col li.event-item {
width: 42.30769%;
float: left;
margin-right: 3.84615%;
clear: none;
margin-bottom: 48px;
}
.localist-widget .event-list.two-col li.event-item:nth-child(odd) {
margin-right: 8.57143%;
}
}
@media (min-width: 60em) {
.localist-widget li.event-item {
margin-bottom: 48px;
}
.localist-widget .event-list.two-col li.event-item {
width: 42.30769%;
float: left;
margin-right: 3.84615%;
clear: none;
margin-bottom: 48px;
}
.localist-widget .event-list.two-col li.event-item:nth-child(odd) {
margin-right: 8.57143%;
}
}
.lt-ie9 .localist-widget .event-list.two-col li.event-item {
width: 42.30769%;
float: left;
margin-right: 3.84615%;
display: inline;
clear: none;
margin-bottom: 48px;
}
.lt-ie9 .localist-widget .event-list.two-col li.event-item:nth-child(odd) {
margin-right: 8.57143%;
}
.localist-widget .event-list.dark {
font-smoothing: antialiased;
}
.localist-widget .event-list.dark time.event-date:after {
background-color: #393f40;
background-color: rgba(255, 255, 255, 0.2);
}
.localist-widget .event-list.dark .event-month {
color: #8b9c9f;
}
.localist-widget .event-list.dark a.event-name {
color: #fff;
}
.localist-widget .event-list.dark a.event-name:focus,
.localist-widget .event-list.dark a.event-name:hover {
color: #006699;
text-decoration: none;
}
.localist-widget .event-list.dark a.event-name em {
color: #869699;
}
.localist-widget .event-item .venue{
margin: 0.125em 0;
display: block;
}
</style>
{% endunless %}
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<div class="localist-widget">
<ol class="event-list two-col">
{% if events == empty %}
<li class="event-item">
<strong>{{ site.snippets.widget_nocontent }}</strong>
</li>
{% else %}
{% for event in events %}
<li class="event-item" itemscope="" itemtype="http://schema.org/Event">
<time class="event-date" itemprop="startDate">
<span class="event-month">{% event_time event date_format:'M' time_format:"" short_time_format:"" %}</span>
<span class="event-day">{% event_time event date_format:'j' time_format:"" short_time_format:"" %}</span>
</time>
<a href="{{ event.url }}">
<h4>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name }}</h4>
{% if event.start_time %}
<span class="time_range">{% event_time event order:"time" time_format:settings.time_format short_time_format:settings.short_time_format minutes:yes%}{% if event.next_instance.end_time %} to {{ event.ends_at | date:site.format.time_long }}{% endif %}</span>
{% endif %}
{% if event.location_name %}
<span class="venue">{{ event.location_name }}</span>
{% endif %}
{% if show_date_ranges and event.has_many_future_instances %}
<span class="date_range">Through {{ event.last_instance.starts_at | date:settings.date_format }}</span>
{% endif %}
</a>
<div class="clear"></div>
</li>
{% endfor %}
{% endif %}
</ol>
</div>
Template 2
HTML
<style>
/* ENTIRE LISTING */
.localist-widget-horizontal div.Localist > li {float: left;
margin-right: 20px;
margin-left: 20px;
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
max-width: 200px;
height: 230px;
list-style: none; }
.localist-widget-horizontal #lclst_widget_footer > a > img {display: none; }
/* MONTH */
.localist-widget-horizontal .date > div.month {
background-color: #127BA2;
padding-top: 5px;
padding-bottom: 5px;
text-transform: uppercase;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
/* DAY */
.localist-widget-horizontal .date > div.day {
background-color: #444444;
padding-top: 10px;
padding-bottom: 10px;
font-size: 30px; }
/* CARD */
.localist-widget-horizontal .date {
margin-left: auto;
margin-right: auto;
width: 100px;
color: white;
font-family: "Karla",helvetica,arial,sans-serif;
}
/* TITLE */
.localist-widget-horizontal div.Localist > li a > h4 {color: black;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 18px;
width: 100%;
margin-bottom: 15px;
font-weight: normal;
}
.localist-widget-horizontal div.Localist > li a > h4:hover {color: #127BA2; }
/* PLACE & TIME */
.localist-widget-horizontal div.Localist > li > a > span.time, .localist-widget-horizontal div.Localist > li > a > span.venue {font-family: 'Raleway', sans-serif;
color: #3787b0;
font-size: 14px;
width: 100%; }
localist-widget-horizontal div.Localist > li > a > span.time:hover, .localist-widget-horizontal div.Localist > li > a > span.venue:hover {color: #127BA2; }
/* LINKS */
.localist-widget-horizontal div.Localist > li > a {text-decoration: none; }
</style>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<ul class="localist-widget-horizontal">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el;
return document.getElementById(el);
}
function hasClass(el, klass) {
if(!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}
return null;
}
function toggleVisibility(el) {
var e;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}
return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}
{% if current_user %}<!-- logged in -->{% endif %}
<div class="Localist">
{% for event in events %}
<li>
<div class="date">
<div class="month">{% event_time event date_format:'M' time_format:"" short_time_format:"" %}</div>
<div class="day">{% event_time event date_format:'j' time_format:"" short_time_format:"" %}</div>
</div>
<a href="{{ event.url }}">
<h4>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}
{{ event.name | truncate:50 }}</h4>
{% if event.start_time %}<span class="time">{% event_time event date_format:'g' time_format:"" short_time_format:"" %}:{% event_time event date_format:'ia' time_format:"" short_time_format:"" %}</span>{% endif %}
{%if event.location != blank %}<span class="venue">{{ event.location_name }}</span>{% endif %}
</a>
{% if settings.expand_descriptions %}<div class=lww style="display:none">{% endif %}
</li>
{% endfor %}
</div>
</ul>
Template 3
HTML
<style>
/* BODY */
ul.localist-widget-eds {
margin-left: 0;
padding-left: 2%;
}
.localist-widget-eds {
max-width: 850px;
}
.localist-widget-eds li {
list-style: none;
background-color: #ffffff;
text-decoration: none;
width: 100%;
height: auto;
padding-bottom: 0.8em;
margin: 0 10px 1em 0;
min-height: 4em;
}
.localist-widget-eds a {
text-decoration: none;
}
/* MONTH & DATE SQUARE */
body>ul>li>div.localist-dateblock {
border: 1px solid #CCCCCC;
}
.localist-widget-eds div.localist-day {
color: #555555;
background-color: #efefef;
font-size: 1.4em;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: 600;
text-align: center;
text-decoration: none;
line-height: 1;
padding-top: 10px;
padding-bottom: 10px;
}
.localist-widget-eds div.localist-month {
text-decoration: none;
color: #ffffff;
background-color: #127BA2;
font-size: 1em;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
padding-top: 2px;
padding-bottom: 1px;
}
.localist-widget-eds div.localist-dateblock {
width: 60px;
min-height: 50px;
border: none;
}
/* DETAILS */
.localist-widget-eds div.localist-secondblock {
margin-top: -75px;
margin-left: 75px;
min-height: 44px;
max-width: 20em;
padding-top: 13px;
}
.localist-widget-eds div.localist-otherdetails {
color: #424242;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: normal;
text-decoration: none;
font-size: 13px;
width: auto;
margin: 6px 0 0;
max-width: 24em;
overflow: auto;
}
.localist-otherdetails>div {
float: left;
clear: right;
}
.localist-otherdetails>div:first-of-type {
margin-right: 4%;
}
.localist-otherdetails i {
color: #9e9e9e;
}
.fas .fa-map-marker-alt {
padding-left: 2px;
}
.localist-time {
display: inline-block;
}
.localist-venue {
display: inline-block;
margin-left: 0;
}
/* TITLE */
div.localist-secondblock>div.localist-title>h4 {
margin: 0;
text-decoration: none;
}
div.localist-title h4 a {
color: #127BA2;
text-decoration: none;
text-transform: none;
font-family: "Karla",helvetica,arial,sans-serif;
overflow: hidden;
text-overflow: ellipsis;
max-width: 20px;
font-size: 16px;
font-weight: 600;
}
.localist-widget-eds div.localist-titlespace {
margin-bottom: 10px;
background-color: #ffffff;
text-align: center;
font-size: 18px;
font-family: "Karla",helvetica,arial,sans-serif;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<ul class="localist-widget-eds">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el;
return document.getElementById(el);
}
function upTag(el, tag) {
var e;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}
function hasClass(el, klass) {
if(!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}
function downClass(el, tag, klass) {
var e = getEl(el);
if(!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for(i = 0; i < els.length; i++) {
e = els[i];
if(hasClass(e, klass)) return e;
}
return null;
}
function toggleVisibility(el) {
var e;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}
return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}
{% if current_user %}<!-- logged in -->{% endif
{% for event in events %}
<li>
<div class="localist-dateblock">
<div class="localist-month">{% event_time event date_format:'M' include_other_year:false order:'date' %} </div>
<div class="localist-day">{% event_time event date_format:'j' include_other_year:false order:'date' %} </div>
</div>
<div class="localist-secondblock">
<div class="localist-title">
<h4>
<a class="cover" href="{{ event.url }}" target="_blank">{{ event.name }}</a></h4>
</div>
<div class="localist-otherdetails">
{% if event.start_time %}<div class="localist-time"><i class="far fa-clock"></i>
{% event_time event time_format:'g:ia' order:'time' optional_minutes:false %}</div>{% endif %}
{% if event.place %}<div class="localist-venue"><i class="fas fa-map-marker-alt"></i>
{{ event.location_name }}</div>{% endif %}
</div>
</div>
</li>
{% endfor %}
<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->
</ul>
Template 4
HTML
{% unless settings.style == 'none' %}
{% comment %}
#################################
START MAKE COLOR/FONT CHANGES HERE
you can change colors and fonts in this section rather than modifying CSS directly below
{% endcomment %}
{% assign link_color = '#444' %}
{% assign link_hover = '#444' %}
{% assign button_color = '#127ba2' %}
{% assign button_hover = '#ddd' %}
{% assign button_font_color = '#fff' %}
{% assign font_family = '"Karla",Helvetica,arial,sans-serif' %}
{% assign im_going_text = "I'm Interested" %}
{% comment %}
END MAKE COLOR/FONT CHANGES HERE
#################################
{% endcomment %}
<style type="text/css">
/* container for the widget */
.localist_widget_container {
width: 100%;
background-color: #fff;
overflow: hidden;
}
/* all links within an event item */
.localist_widget_container li a {
text-decoration: none;
color: {{ link_color }};
}
/* all hovered links within an event item */
.localist_widget_container li a:hover {
text-decoration: underline;
color: {{ link_hover }};
}
/* container for the list of event items */
.localist_widget_container ul.lw_event_list {
list-style: none;
padding: 0;
max-width: 960px;
}
/* container for each event item */
.localist_widget_container li.lw_event_item {
margin: 5px 0;
border: 1px solid #ddd;
font: 200 14px/20px {{ font_family }};
background: #fafafa;
overflow: hidden;
float: left;
max-width: 300px;
height: 425px;
}
/* container for event photo */
.localist_widget_container a.lw_event_item_image {
display: block;
float: none;
overflow: hidden;
max-width: none;
position:relative;
}
/* event photo (makes it center on the image if dimensions grow/shrink) */
.localist_widget_container a.lw_event_item_image img {
top: 50%;
left: 50%;
position:relative;
transform: translate(-50%, 0%)
}
/* container for non-image content */
.localist_widget_container div.lw_event_content {
padding: 10px 20px;
overflow: hidden;
vertical-align: text-top;
float: left;
}
/* event title */
.localist_widget_container div.lw_event_item_title {
color: #444;
font-family: "Karla"helvetica,arial,sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 20px;
text-align: center;
padding-bottom: 10px;
}
/* event description */
.localist_widget_container div.lw_event_item_description {
font-size: 12px;
}
/* container for event meta data */
.localist_widget_container .lw_event_meta {
width: 100%;
float: none;
overflow: hidden;
}
/* event location and time shared code */
.localist_widget_container div.lw_event_item_location,
.localist_widget_container div.lw_event_item_time {
font-size: 12px;
text-transform: uppercase;
margin-left: 15px;
}
/* event location overrides */
.localist_widget_container div.lw_event_item_location {
margin-top: 10px;
}
/* event date */
.localist_widget_container span.lw_event_item_date {
background-color:rgba(0, 0, 0, 0.5);
color: #fff;
position:absolute;
bottom: 0;
left: 0;
padding: 5px 0px;
width: 100%;
font-size: 12px;
text-transform: uppercase;
text-align: center;
}
/* event cta */
.localist_widget_container .action_button a {
display: block;
background: {{ button_color }};
color: {{ button_font_color }};
line-height: 40px;
text-decoration: none;
text-align: center;
margin-top: 10px;
max-width: none;
font-weight: bold;
}
/* event cta hover */
.localist_widget_container .action_button a:hover {
text-decoration: none;
background-color: {{ button_hover }};
}
.localist_widget_container .lw_view_all_cta a {
display: inline-block;
text-align: center;
font: 200 14px/20px {{ font_family }};
float: none;
width: 100%;
}
/* icons */
.localist_widget_container .pin,.localist_widget_container .pin:after {
position:absolute
}
.localist_widget_container .pin {
width:10px;
height:10px;
border-radius:50% 50% 50% 0;
background:#127BA2;
transform:rotate(-45deg);
float:left;
margin-top:13px
}
.localist_widget_container .pin:after {
content:"";
width:4px;
height:4px;
margin:3px 0 0 3px;
background:#fff;
border-radius:50%;
}
.localist_widget_container .clock {
float:left;
margin-top:4px;
border:2px solid #127ba2;
display:inline-block;
position:relative;
vertical-align:top;
border-radius:100%;
height:7px;
width:7px
}
.localist_widget_container .clock:after,.localist_widget_container .clock:before {
background:#127ba2;
border:1px solid #127ba2;
content:'';
position:absolute;
border-left:none;
width:0
}
.localist_widget_container .clock:after {
height:2px;
left:3px;
top:0
}
.localist_widget_container .clock:before {
height:3px;
left:5px;
top:1px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
</style>
{% endunless %}
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
function upTag(el, tag) {
var e;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}
function hasClass(el, klass) {
if(!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}
function downClass(el, tag, klass) {
var e = getEl(el);
if(!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for(i = 0; i < els.length; i++) {
e = els[i];
if(hasClass(e, klass)) return e;
}
return null;
}
function toggleVisibility(el) {
var e;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}
return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}
{% if current_user %}<!-- logged in -->{% endif %}
<div class="localist_widget_wrapper cardCarousel">
<div class="localist_widget_container">
<ul class="lw lw_event_list">
{% if events == empty %}
<li class="lw lw_event_item nocontent">
<div class="lw_event_item_title">{{ site.snippets.widget_nocontent }}</div>
</li>
{% else %}
{% for event in events %}
{{ event_knowledge_graph_tag }}
<li class="lw lw_event_item">
{% if settings.hide_images != true %}
<a class="lw_event_item_image" href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}{% if settings.expand_descriptions %} onclick="mc_$$ID$$_util.toggle(this); return false;"{% endif %}>
{% photo_for event size:square_300 width:150 height:150 %}
<span class="lw_event_item_date">
{% event_time event order:"date" date_format:settings.date_format time_format:settings.time_format short_time_format:settings.short_time_format %}
{% if show_date_ranges and event.has_many_future_instances %}
- {{ event.last_instance.starts_at | date:settings.date_format }}
{% endif %}
</span>
</a>
{% endif %}
<div class="lw_event_content">
<div class="lw_event_item_title">
<a href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}{% if settings.expand_descriptions %} onclick="mc_$$ID$$_util.toggle(this); return false;"{% endif %}>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate: 30 }}</a>
</div>
{% if settings.expand_descriptions %}<div class=lww style="display:none">{% endif %}
{% unless settings.hide_descriptions %}
<div class="lw_event_item_description">
{% item_description event %}
{% if settings.show_keywords %}
<br/>{{ event.keywords | join:", " }}
{% endif %}
</div>
{% endunless %}
{% if settings.expand_descriptions %}</div>{% endif %}
<div class="lw_event_meta">
{% if event.event_type == 'event' %}
{% if event.place != empty and event.location_name != blank %}
<div class="pin"></div>
<div class="lw_event_item_location">
{% if event.place %}
<a href="{{ event.place.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.place.visible_name }}</a>
{% else %}
<a href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.location_name }}</a>
{% endif %}
</div>
{% endif %}
{% endif %}
{% if settings.show_times %}
{% if event.start_time %}
<div class="clock"></div>
<div class="lw_event_item_time">
{% event_time event order:"time" time_format:settings.time_format short_time_format:settings.short_time_format %}
</div>
{% endif %}
{% endif %}
</div>
{% if settings.expand_descriptions %}<div class=lww style="display:none">{% endif %}
<div class="lw_event_meta">
<div class="action_button">
<a href="{{ event.url }}" aria-label="View details about {{ event.name }}" {% if settings.target_blank %} target="_blank"{% endif %}>{{ im_going_text }}</a>
</div>
</div>
{% if settings.expand_descriptions %}</div>{% endif %}
</div>
</li>
{% endfor %}
{% endif %}
{% if settings.show_view_all_cta %}
<p class="lw lw_view_all_cta"><a href="{% relative_calendar_url %}">View all events...</a></p>
{% endif %}
</ul>
</div>
</div>
Template 5
HTML
<style>
ul.localist-widget-customer {
padding: 0;
margin: 0;
line-height: initial; }
body > ul > a > li > div.infoblock > h4 {
margin-top: 15px;
margin-bottom: 10px; }
.localist-widget-customer .lwd {
margin-right: auto;
margin-left: auto;
width: 100%;
height: auto;
}
.localist-widget-customer li {
list-style: none;
float: left;
width: 300px;
margin-left: 15px;
margin-right: 15px;
min-height: 376px;
margin-bottom: 50px;
border: 1px solid #ccc;
height: 425px;
}
h4 {
color: #000;
text-decoration: none;
margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: normal;
}
.localist-widget-customer a {
text-decoration: none;
}
@media only screen and (max-width: 479px) {
.localist-widget-customer li {
margin-right: 5px;
width: 100% !important; }}
span.day, span.month {
display: inline-block;
font-size: 15px;
font-family: "Karla",helvetica,arial,sans-serif;
}
div.date-label {
padding: 10px;
background-color: #127BA2;
text-align: center !important;
z-index: 1;
width: auto;
padding: 15px 0px;
color: #fff !important;
}
body > ul > a > li > div.date-label > span {
float: none;
color: #fff !important;
font-family: "Karla",helvetica,arial,sans-serif;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}
.lwd {
padding-top: 0px !important;
}
.lwi0 {
padding: 0px !important;
max-height: 500px;
}
body > ul > a > li > div.infoblock > time {
font-weight: 600;
color: #000;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 16px;
font-weight: normal;
}
dd.event-location {
margin-left: 0px;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: normal;
color: #000;
font-size: 16px;
}
div.infoblock {padding: 0px 18px; }
.localist-widget-customer li:hover {background-color: #127BA2; }
ul.localist-widget-customer li:hover .infoblock h4,
ul.localist-widget-customer li:hover .infoblock .event-location,
ul.localist-widget-customer li:hover .infoblock time {
color: white;
}
.lwn0 {
float: none !important;
font-size: 16px !important;
color: #fff !important;
text-transform: uppercase !important;
}
.lclst_widget_footer {
display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if current_user %}<!-- logged in -->{% endif %}
{% for event in events %}
<a href="{{ event.url }}" {% if settings.target_blank %} target="_blank"{% endif %}>
<li>
<div class="date-label{% if event.is_past %} past-date{% endif %}">
<span class="lwn0">
{% event_time event order:"date" date_format:settings.date_format time_format:settings.time_format short_time_format:settings.short_time_format %}
{% if show_date_ranges and event.has_many_future_instances %}
- {{ event.last_instance.starts_at | date:settings.date_format }}
{% endif %}
</span>
</div>
<div class="lwd"><span class="lwi0"> {% photo_for event size:big_300 %}</span></div>
<div class="infoblock">
<h4>
{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate:30 }}
</h4>
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% event_time event order:"time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" <br> " %}
</time>
{% if event.place.visible_name != blank or event.location_name != blank %}
<dd class="event-location">
{% if event.place.visible_name != blank %}
{{ event.place.visible_name }}
{% else %}
{{ event.location_name }}
</dd>
{% endif %}
{% endif %}
</div>
</li>
</a>
{% endfor %}
<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->
</ul>
Template 6
HTML
<style>
/* BODY */
ul.localist-widget-eds {margin-left: 0px;
}
.localist-widget-eds {max-width: 850px;
}
.localist-widget-eds li {
list-style: none;
float: left;
margin-left: 0px;
margin-right: 20px;
background-color: #ffffff;
margin-bottom: 15px;
width: 250px;
height: 100px;
text-decoration: none;
}
.localist-widget-eds a {text-decoration: none; }
/* MONTH & DATE SQUARE */
body > ul > li > div.localist-dateblock {border: 1px solid #C1C6B8; }
.localist-widget-eds div.localist-day {
color: #494949;
background-color: #ffffff;
font-size: 30px;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: normal;
text-align: center;
text-decoration: none;
margin-bottom: 5px;
line-height: 1;}
.localist-widget-eds div.localist-month {
text-decoration: none;
color: #494949;
background-color: #ffffff;
font-size: 18px;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: normal;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
}
.localist-widget-eds div.localist-dateblock {
width: 60px;
min-height: 50px;
border: 1px solid #C1C6B8;
}
/* DETAILS */
.localist-widget-eds div.localist-secondblock {
margin-top: -63px;
margin-left: 75px;
min-height: 44px;
}
.localist-widget-eds div.localist-otherdetails {
color: #494949;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 16px;
font-weight: normal;
width: 75%;
text-decoration: none;
margin-bottom: 2px;
}
/* TITLE */
div.localist-secondblock > div.localist-title > h4 {margin: 0px;
text-decoration: none;}
div.localist-title h4 a {
color: #3a90b0 !important;
text-decoration: none;
text-transform: none;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 18px;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
max-width: 20px;
}
.localist-widget-eds div.localist-titlespace {
margin-bottom: 10px;
background-color: #ffffff;
text-align: center;
font-size: 18px;
font-family: "Karla",helvetica,arial,sans-serif;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<ul class="localist-widget-eds">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el;
return document.getElementById(el);
}
function upTag(el, tag) {
var e;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}
function hasClass(el, klass) {
if(!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}
function downClass(el, tag, klass) {
var e = getEl(el);
if(!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for(i = 0; i < els.length; i++) {
e = els[i];
if(hasClass(e, klass)) return e;
}
return null;
}
function toggleVisibility(el) {
var e;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}
return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}
{% if current_user %}<!-- logged in -->{% endif %}
{% for event in events %}
<li>
<div class="localist-dateblock">
<div class="localist-month">{% event_time event date_format:'M' include_other_year:false order:'date' %} </div>
<div class="localist-day">{% event_time event date_format:'j' include_other_year:false order:'date' %} </div>
</div>
<div class="localist-secondblock">
<div class="localist-title">
<h4>
<a href="{{ event.url }}">{{ event.name | truncate:36 }}
</a></h4>
</div>
<div class="localist-otherdetails">
{% if event.start_time %}<span class="localist-time">{% event_time event time_format:'g:ia' order:'time' optional_minutes:false %}</span>{% endif %}
<div class="localist-venue">{{ event.location_name }}</div>
</div>
</div>
</li>
{% endfor %}
</ul>
Template 7
HTML
<style>
ul.localist-widget-customer {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(14.0625rem, 1fr) );
grid-gap: 1.25rem;
margin: 0;
padding: 0;
}
grid-template-columns: repeat( auto-fit, minmax(14.0625rem, 1fr) );
grid-gap: 1.25rem;
margin: 0;
padding: 0;
}
li.widget-event {
list-style-type: none !important;
position: relative;
display: flex;
flex-direction: column;
line-height: 1.25;
border: 1px solid #c8c8c8;
max-width: 20rem;
height: inherit;
list-style-type: none !important;
position: relative;
display: flex;
flex-direction: column;
line-height: 1.25;
border: 1px solid #c8c8c8;
max-width: 20rem;
height: inherit;
}
div.widget-content {
padding: 20px !important;
height: 100%;
}
div.widget-content > div.title > h4 {
font-size: 1.266rem;
line-height: 1.3;
margin: 0 0 10px 0 !important;
}
div.title > h4 > a {
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: 700 !important;
font-size: 18px !important;
text-decoration: none !important;
color: #127BA2;
}
div.title > h4 > a:hover {
text-decoration: underline !important;
}
div.des {
font-size: 16px !important;
font-weight: 400 !important;
color: #555 !important;
font-family: "Karla",helvetica,arial,sans-serif;
}
div.time {
font-size: 16px !important;
font-weight: 600 !important;
color: #555 !important;
font-family: "Karla",helvetica,arial,sans-serif;
margin-top: 16px !important;
border-top: 1px solid #c8c8c8;
padding-top: 0.8125rem;
}
div.place {
margin-top: 5px;
}
div.place > div > a {
text-decoration: underline;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 16px !important;
color: #127BA2;
}
div.place > div > a:hover {
text-decoration: underline;
}
div.place > div > i {
color: #d01c29 !important;
}
div.place > div > i:hover {
color: #A51417 !important;
}
div.widget-photo-space > span > a > img {
width: 100%;
height: auto;
}
.key span {
display: block;
line-height: 1;
}
.key .day {
font-size: 20px;
letter-spacing: -1px;
font-family: "Karla",helvetica,arial,sans-serif;
}
.key .month {
font-size: 14px;
letter-spacing: 1px;
font-family: "Karla",helvetica,arial,sans-serif;
}
.key {
background-color: #127BA2;
color: #fff;
display: block;
font-weight: 600;
position: absolute;
text-align: center;
text-transform: uppercase;
padding: 10px;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el !important;
return document.getElementById(el) !important;
}
function upTag(el, tag) {
var e !important;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e !important;
e = e.parentNode !important;
}
return null !important;
} else {
return null !important;
}
}
function hasClass(el, klass) {
if(!el) return !important;
var classes = el.className !important;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes))) !important;
}
function downClass(el, tag, klass) {
var e = getEl(el) !important;
if(!e) return null !important;
var els = e.getElementsByTagName(tag) !important;
var i = 0 !important;
for(i = 0 !important; i < els.length !important; i++) {
e = els[i] !important;
if(hasClass(e, klass)) return e !important;
}
return null !important;
}
function toggleVisibility(el) {
var e !important;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '' !important;
} else {
e.style.display = 'none' !important;
}
}
}
return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww')) !important;
}
} !important;
})() !important;
</script>
{% endif %}
{% if current_user %}<!-- logged in -->{% endif %}
{% for event in events %}
<li class="widget-event">
{% for event in events %}
<li class="widget-event">
<div class="key">
<div class="key-container">
<span class="day">{{ event.starts_at | date: "%d" }}</span> <span class="month">{{ event.starts_at | date: "%b" }}</span>
</div>
</div>
<div class="widget-photo-space">
<span class="widget-photo"><a href="{{ event.url }}">{% photo_for event size:big_300 %}</a></span>
</span>
</div>
<div class="widget-content">
<div class="title">
<h4>
<a href="{{ event.url }}">{{ event.name }}</a>
</h4>
</div>
<div class="des">{% item_description event length:130 %}</div>
<div class="time">
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% event_time event order:"date,time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" | " %}
</time>
</div>
<div class="place">
{% if event.place != empty and event.location_name != blank %}
<div class="lw_event_item_location">
{% if event.place %}
<a href="{{ event.place.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.place.visible_name }}</a>
{% else %}
<a href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.location_name }}</a>
{% endif %}
</div>
{% endif %}
</div>
</li>
{% endfor %}
<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->
</ul>
Template 8
HTML
{% comment %}
#################################
START MAKE COLOR/FONT CHANGES HERE
you can change colors and fonts in this section rather than modifying CSS directly below
{% endcomment %}
{% assign date_color = '#127BA2' %}
{% assign card_hover = '127BA2' %}
{% assign font_family = '"Karla",helvetica,arial,sans-serif' %}
{% assign desc_font_family = '"Karla",helvetica,arial,sans-serif' %}
{% comment %}
END MAKE COLOR/FONT CHANGES HERE
#################################
{% endcomment %}
{% capture first_transition %}
-webkit-transition: opacity .10s ease-out,left .5s ease-out;
-moz-transition: opacity .10s ease-out,left .5s ease-out;
transition: opacity .10s ease-out,left .5s ease-out;
{% endcapture %}
{% capture second_transition %}
-webkit-transition: all .10s ease-out;
-moz-transition: all .10s ease-out;
transition: all .10s ease-out;
{% endcapture %}
{% capture second_transition %}
-webkit-transition: all .10s ease-out;
-moz-transition: all .10s ease-out;
transition: all .10s ease-out;
{% endcapture %}
{% capture third_transition %}
-webkit-transition: opacity .10s .10s ease-out,-webkit-transform .10s .10s ease-out,visibility .10s .10s ease-out;
-moz-transition: opacity .10s .10s ease-out,-moz-transform .10s .10s ease-out,visibility .10s .10s ease-out;
transition: opacity .10s .10s ease-out,transform .10s .10s ease-out,visibility .10s .10s ease-out;
{% endcapture %}
{% capture image_transform %}
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
{% endcapture %}
{% capture second_image_transform %}
-webkit-transform: scale(1.75) translateX(-30%) translateY(16%);
-moz-transform: scale(1.75) translateX(-30%) translateY(16%);
-ms-transform: scale(1.75) translateX(-30%) translateY(16%);
-o-transform: scale(1.75) translateX(-30%) translateY(16%);
transform: scale(1.75) translateX(-30%) translateY(16%);
{% endcapture %}
<!-- begin code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.CardEvents {
background:none;
}
.localist-widget-hl{
max-width:1360px !important;
width: 100% !important;
clear:both;
display:table;
}
.localist-widget-hl ol {
margin: 0;
padding: 0;
list-style: none;
font-family: "Karla",helvetica,arial,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.localist-widget-hl .event-list {
clear: both;
position: relative;
{{ first_transition }}
}
.localist-widget-hl li.event {
{{ third_transition }}
}
.localist-widget-hl .event-list li {
margin: 20px 1% !important;
width: 31%;
float: left;
height: auto;
}
.localist-widget-hl .event-card {
display: block;
overflow: hidden;
padding: 0;
position: relative;
background: transparent;
color: #989694;
font-size: .8125rem;
}
.localist-widget-hl .event-overview {
{{ second_transition }}
}
.localist-widget-hl .event-details {
background: {{ card_hover }};
color: #fff;
width: 100%;
height: 100%;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
top: 0;
visibility: hidden;
{{ second_transition }}
}
.localist-widget-hl dl {
border: 0;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
.localist-widget-hl .event-specs dt {
background-position: center;
background-repeat: no-repeat;
clear: both;
margin-right: 15px;
overflow: hidden;
text-indent: -9999px;
width: 40px;
float: left;
}
.localist-widget-hl .event-specs dt,.event-specs dd {
padding: 14px 0 17px;
}
.localist-widget-hl .event-specs dd {
border-top: 1px solid #002948;
position: relative;
margin: 0;
}
.localist-widget-hl .event-detail-title {
display: block;
line-height: 1.1875em;
margin-bottom: 1.5em;
font-size: 13px;
}
.localist-widget-hl .event-specs dd:before {
position: absolute;
top: 0;
left: 40px;
width: 1px;
height: 100%;
background: #002948;
content: '';
}
.localist-widget-hl strong {
font-weight: 700;
}
.localist-widget-hl .event-specs {
border-bottom: 1px solid #002948;
border-width: 1px 0;
line-height: normal;
overflow: hidden;
}
.localist-widget-hl .cover {
height: 100%;
left: 0;
position: absolute;
text-indent: -9999px;
top: 0;
width: 100%;
}
.localist-widget-hl .event-card header {
overflow: hidden;
position: relative;
}
.localist-widget-hl .event-card:hover .event-details {
opacity: 1;
visibility: visible;
}
.localist-widget-hl .event-list .event-overview .content {
height: 7.615384615em;
border: 1px solid #efefef;
border-width: 0 1px;
padding: 23px 20px 19px;
}
.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .event-short-date,.localist-widget-hl .event-card:hover .content:before {
opacity: 0;
text-decoration: none;
visibility: hidden;
}
.localist-widget-hl .event-card .content:before {
bottom: 0;
content: '';
height: 17px;
left: 1px;
position: absolute;
right: 1px;
}
.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .event--date,.localist-widget-hl .event-card:hover .content:before {
opacity: 0;
text-decoration: none;
visibility: hidden;
}
.localist-widget-hl .event-card .content p {
overflow: hidden;
margin: 0;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
line-height: 1.5em;
font-family: "Karla",helvetica,arial,sans-serif;
}
.localist-widget-hl .event-title {
background: rgba(0,0,0,0.5) left top !important;
color: #fff !important;
font-weight: 800 !important;
overflow: hidden !important;
padding: 7px 20px 5px !important;
/*text-overflow: ellipsis;
width: 100%;
white-space: nowrap;*/
z-index: 1;
line-height: 1.875rem !important;
font-size: .8125rem !important;
font-family: "Karla",helvetica,arial,sans-serif;
margin: 0 !important;
outline: 0 !important;
vertical-align: baseline !important;
border: 0 !important;
text-transform: capitalize !important;
margin: 0 !important;
{{ second_transition }}
}
.localist-widget-hl .event-short-date {
background: {{ date_color }};
position: absolute;
width: 2.777777778em;
height: 2.777777778em;
top: 0;
left: 0;
z-index: 1;
padding: .333333333em 0 0;
color: #fff;
font-weight: 800;
font-size: 1.125rem;
line-height: 1.111111111em;
font-family: : "Karla",helvetica,arial,sans-serif;
text-align: center;
text-transform: uppercase;
{{ second_transition }}
}
.event-title-short-date .event-title, .event-title-short-date .event-short-date, .event-title-short-date .event-title-location-time{
position:static !important;
float:left;
}
.event-title-short-date {
background: #071B2E;
color: #ffffff;
width: 100%;
float: right;
padding: 10px;
position: relative;
margin: 0;
clear: both;
border-bottom: 5px solid #127BA2;
}
.event-title-short-date .event-title{
width:100%;
background:transparent !important;
padding: 0 !important;
line-height: 1.4 !important;
color: #ffffff !important;
}
.event-title-short-date .event-short-date{
width: 60px !important;
background: rgb(239, 239, 239) !important;
color: #002949 !important;
height: auto !important;
padding: 8px 0 10px !important;
}
.event-title-short-date .event-title-location-time{
width:75% !important;
padding:0 0 0 15px;
}
.localist-widget-hl .event-card:hover .event-img {
{{ second_image_transform }}
}
.localist-widget-hl .event-card .content:before {
position: absolute;
left: 1px;
bottom: 0;
right: 1px;
content: '';
height: 17px;
}
.localist-widget-hl .event-img {
position: relative;
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
display: block;
left: 50%;
{{ image_transform }}
{{ second_transition }}
}
.localist-widget-hl .event-card img {
display: block;
height: 230px!important;
width: 100% !important;
min-height: auto !important;
min-width: auto !important;
transform: inherit !important;
-webkit-transition: inherit !important;
position: static;
object-fit: cover;
object-position: 100% 0;
}
.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .localist-widget-hl .event-short-date,.localist-widget-hl .event-card:hover .content:before {
opacity: 0;
text-decoration: none;
visibility: hidden;
}
.localist-widget-hl .event-card .event-short-date {
background: {{ date_color }};
}
.localist-widget-hl .event-card:hover header {
overflow: visible;
}
.localist-widget-hl .event-card:hover {
border-color: {{ card_hover }};
}
.localist-widget-hl .event-card:hover .event-overview {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.localist-widget-hl .event-list .event-card {
}
.localist-widget-hl .event-short-date abbr {
display: block;
font-size: 11px;
font-weight: 700;
line-height: 1.2em;
border: 0 none;
}
.localist-widget-hl * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.localist-widget-hl .pin {
width: 17px;
height: 17px;
border-radius: 48% 50% 50% 0;
transform: rotate(-45deg);
float: left;
margin-left: 10px;
text-indent: initial;
-webkit-backface-visibility: hidden;
}
.localist-widget-hl .pin:after {
content: "";
width: 6px;
height: 6px;
margin: 5px 0 0 6px;
background: {{ card_hover }};
border-radius: 50%;
position: absolute;
}
.localist-widget-hl .clock {
float: left;
margin-top: 0;
border: 2px solid #fff;
display: inline-block;
position: relative;
vertical-align: top;
border-radius: 100%;
height: 18px;
width: 18px;
margin-left: 8px;
-webkit-backface-visibility: hidden;
}
.localist-widget-hl .clock:before {
height: 4px;
left: 8px;
top: 4px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
border: 1px solid #fff;
content: '';
position: absolute;
}
.localist-widget-hl .clock:after {
height: 4px;
left: 6px;
top: 2px;
border: 1px solid #fff;
content: '';
position: absolute;
}
/*Card*/
.localist-widget-hl{
width:100%;
margin:30px auto;
}
.localist-widget-hl .event-card header:first-child
{
border:0 !important;
}
.localist-widget-hl .event-details {
background: #071B2E;
color:#fff !important;
border-bottom: 5px solid #127BA2;
}
.localist-widget-hl .event-list .event-overview .content
{
padding: 17px 17px 10px !important;
color:#000 !important;
}
.localist-widget-hl .event-card .content p {
overflow:visible !important;
line-height:24px !important;
font-size:16px !important;
font-family: "Karla",helvetica,arial,sans-serif;
}
.calendar-header .localist-widget-hl{
clear:both;
display:table;
z-index: 1;
position: relative;
}
.localist-widget-hl .event-list .event-overview .content{
/*display: none;*/
}
.localist-widget-hl .event-detail-title {
font-size:16px !important;
}
.localist-widget-hl .event-specs{
font-size:13px !important;
}
.localist-widget-hl .event-short-date abbr{
text-decoration:none !important;
}
.localist-widget-hl .clock{
border: 2px solid #324f69 !important;
}
.localist-widget-hl .clock:before{
border: 1px solid #324f69 !important;
}
.localist-widget-hl .clock:after{
border: 1px solid #324f69 !important;
}
.localist-widget-hl .pin{
background: #324f69 !important;
}
.localist-widget-hl .pin:after {
background: #fba504 !important;
}
span.start-time.location {
display: none !important;
}
.calendar-header h2.f-primary-b.f-title-big {
color: #fff;
text-align: center;
margin-bottom: 20px;
font-size:3.23077em !important;
}
.calendar-header h2.f-primary-b.f-title-big a{
color: #fff;
text-decoration:none;
}
.b-calendar-link{
color: #fff;
display: table;
margin: 0 auto 25px;
font-size: 17px;
padding: 10px 10px;
}
.b-calendar-link a {
text-decoration: none;
color: #eeb111;
font-weight: 900;
}
.b-calendar-link a:hover {
text-decoration: underline;
}
abbr.event-day {
display: table;
margin: 0 auto;
font-size: 9px !important;
}
abbr.event-month {
font-size: 13px !important;
}
abbr.event-date {
font-size: 20px !important;
font-weight: bold !important;
text-align: center;
vertical-align: middle;
position: relative;
line-height: 0.9 !important;
}
/*End Card*/
@media only screen and (min-width: 90.063em){
.localist-widget-hl .event-list li {
height:300px;
}
}
@media only screen and (max-width: 920px){
.localist-widget-hl .event-list li {
height:auto;
}
}
@media only screen and (max-width: 800px){
.event-title-short-date .event-title-location-time {
width: 70% !important;
padding: 0 0 0 10px;
}
}
@media only screen and (max-width: 767px){
.localist-widget-hl .event-list li {
height:auto;
}
}
@media only screen and (max-width: 700px){
.localist-widget-hl .event-list li {
height:auto !important;
width:48% !important;
}
}
@media only screen and (max-width: 500px){
.localist-widget-hl .event-list li {
height:auto !important;
width:85% !important;
display:table;
margin:20px auto 0 !important;
float:none;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
/*if($(window).width()>500){
var x = $('.event-title'), i=0;
while(i<x.length){
x[i].innerText = x[i].innerText.slice(0, 35);
i++;
}
$('<i> ...</i>').appendTo($('header .event-title'));
}*/
var j=0;
var z = $('header .event-day');
while(j<z.length){z[j].innerText = z[j].innerText.slice(0, 3);j++;}
});
</script>
<div class="localist-widget-hl CardEvents">
<ol class="event-list">
{% if events == empty %}
<li class="lw lw_event_item nocontent">
<div class="lw_event_item_title">{{ site.snippets.widget_nocontent }}</div>
</li>
{% else %}
{% for event in events %}
<li class="event">
<article class="event-card">
<div class="event-overview">
<header>
{% photo_for event size:big_300 width:250 height:250 class:'event-img' %}
<div class="event-title-short-date">
<time class="event-short-date" datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
<abbr class="event-day">{% event_time event order:"date" date_format:"l" short_time_format:"l" %}</abbr>
<abbr class="event-month" title="{% event_time event order:"date" date_format:"F" short_time_format:"F" %}">
{% event_time event order:"date" date_format:"M" date_format_year:"M Y" short_time_format:"M" %}
</abbr>
<abbr class="event-date">{% event_time event order:"date" date_format:"d" date_format_year:"d" short_time_format:"d" %}</abbr>
</time>
<div class="event-title-location-time">
<h2 class="event-title">{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate:30 }}</h2>
{% if event.place.visible_name != blank or event.location_name != blank %}
<div class="event-location">
{% if event.place.visible_name != blank %}
{{ event.place.visible_name }}
{% else %}
{{ event.location_name }}
</div>
{% endif %}
{% endif %}
<div class="event-date">
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% event_time event order:"time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" <br> " %}
</time>
</div>
</div>
</div>
</header>
</div>
<div class="event-details">
<strong class="event-detail-title">{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name }}</strong>
<div class="content"><p>{% item_description event %}</p></div>
</div>
<a class="cover" href="{{ event.url }}" {% if settings.target_blank %} target="_blank"{% endif %}>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name }}</a>
{% if event.location_name or event.place.visible_name or event.start_time %}
<span class="start-time location">
{% if event.start_time %}
{% event_time event order:"time" time_format:"h:i a" short_time_format:"h:i a" %}
{% if event.place.visible_name != blank or event.location_name != blank %} - {% endif %}
{% endif %}
{% if event.place.visible_name != blank or event.location_name != blank %}
{% if event.place.visible_name != blank %}
{{ event.place.visible_name }}
{% else %}
{{ event.location_name }}
{% endif %}
{% endif %}
</span>
{% endif %}
</article>
</li>
{% endfor %}
{% endif %}
</ol>
</div>
{% comment %}
#################################
START MAKE COLOR/FONT CHANGES HERE
you can change colors and fonts in this section rather than modifying CSS directly below
{% endcomment %}
{% assign date_color = '#127BA2' %}
{% assign card_hover = '127BA2' %}
{% assign font_family = '"Karla",helvetica,arial,sans-serif' %}
{% assign desc_font_family = '"Karla",helvetica,arial,sans-serif' %}
{% comment %}
END MAKE COLOR/FONT CHANGES HERE
#################################
{% endcomment %}
{% capture first_transition %}
-webkit-transition: opacity .10s ease-out,left .5s ease-out;
-moz-transition: opacity .10s ease-out,left .5s ease-out;
transition: opacity .10s ease-out,left .5s ease-out;
{% endcapture %}
{% capture second_transition %}
-webkit-transition: all .10s ease-out;
-moz-transition: all .10s ease-out;
transition: all .10s ease-out;
{% endcapture %}
{% capture second_transition %}
-webkit-transition: all .10s ease-out;
-moz-transition: all .10s ease-out;
transition: all .10s ease-out;
{% endcapture %}
{% capture third_transition %}
-webkit-transition: opacity .10s .10s ease-out,-webkit-transform .10s .10s ease-out,visibility .10s .10s ease-out;
-moz-transition: opacity .10s .10s ease-out,-moz-transform .10s .10s ease-out,visibility .10s .10s ease-out;
transition: opacity .10s .10s ease-out,transform .10s .10s ease-out,visibility .10s .10s ease-out;
{% endcapture %}
{% capture image_transform %}
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
{% endcapture %}
{% capture second_image_transform %}
-webkit-transform: scale(1.75) translateX(-30%) translateY(16%);
-moz-transform: scale(1.75) translateX(-30%) translateY(16%);
-ms-transform: scale(1.75) translateX(-30%) translateY(16%);
-o-transform: scale(1.75) translateX(-30%) translateY(16%);
transform: scale(1.75) translateX(-30%) translateY(16%);
{% endcapture %}
<!-- begin code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.CardEvents {
background:none;
}
.localist-widget-hl{
max-width:1360px !important;
width: 100% !important;
clear:both;
display:table;
}
.localist-widget-hl ol {
margin: 0;
padding: 0;
list-style: none;
font-family: "Karla",helvetica,arial,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.localist-widget-hl .event-list {
clear: both;
position: relative;
{{ first_transition }}
}
.localist-widget-hl li.event {
{{ third_transition }}
}
.localist-widget-hl .event-list li {
margin: 20px 1% !important;
width: 31%;
float: left;
height: auto;
}
.localist-widget-hl .event-card {
display: block;
overflow: hidden;
padding: 0;
position: relative;
background: transparent;
color: #989694;
font-size: .8125rem;
}
.localist-widget-hl .event-overview {
{{ second_transition }}
}
.localist-widget-hl .event-details {
background: {{ card_hover }};
color: #fff;
width: 100%;
height: 100%;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
top: 0;
visibility: hidden;
{{ second_transition }}
}
.localist-widget-hl dl {
border: 0;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
.localist-widget-hl .event-specs dt {
background-position: center;
background-repeat: no-repeat;
clear: both;
margin-right: 15px;
overflow: hidden;
text-indent: -9999px;
width: 40px;
float: left;
}
.localist-widget-hl .event-specs dt,.event-specs dd {
padding: 14px 0 17px;
}
.localist-widget-hl .event-specs dd {
border-top: 1px solid #002948;
position: relative;
margin: 0;
}
.localist-widget-hl .event-detail-title {
display: block;
line-height: 1.1875em;
margin-bottom: 1.5em;
font-size: 13px;
}
.localist-widget-hl .event-specs dd:before {
position: absolute;
top: 0;
left: 40px;
width: 1px;
height: 100%;
background: #002948;
content: '';
}
.localist-widget-hl strong {
font-weight: 700;
}
.localist-widget-hl .event-specs {
border-bottom: 1px solid #002948;
border-width: 1px 0;
line-height: normal;
overflow: hidden;
}
.localist-widget-hl .cover {
height: 100%;
left: 0;
position: absolute;
text-indent: -9999px;
top: 0;
width: 100%;
}
.localist-widget-hl .event-card header {
overflow: hidden;
position: relative;
}
.localist-widget-hl .event-card:hover .event-details {
opacity: 1;
visibility: visible;
}
.localist-widget-hl .event-list .event-overview .content {
height: 7.615384615em;
border: 1px solid #efefef;
border-width: 0 1px;
padding: 23px 20px 19px;
}
.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .event-short-date,.localist-widget-hl .event-card:hover .content:before {
opacity: 0;
text-decoration: none;
visibility: hidden;
}
.localist-widget-hl .event-card .content:before {
bottom: 0;
content: '';
height: 17px;
left: 1px;
position: absolute;
right: 1px;
}
.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .event--date,.localist-widget-hl .event-card:hover .content:before {
opacity: 0;
text-decoration: none;
visibility: hidden;
}
.localist-widget-hl .event-card .content p {
overflow: hidden;
margin: 0;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
line-height: 1.5em;
font-family: "Karla",helvetica,arial,sans-serif;
}
.localist-widget-hl .event-title {
background: rgba(0,0,0,0.5) left top !important;
color: #fff !important;
font-weight: 800 !important;
overflow: hidden !important;
padding: 7px 20px 5px !important;
/*text-overflow: ellipsis;
width: 100%;
white-space: nowrap;*/
z-index: 1;
line-height: 1.875rem !important;
font-size: .8125rem !important;
font-family: "Karla",helvetica,arial,sans-serif;
margin: 0 !important;
outline: 0 !important;
vertical-align: baseline !important;
border: 0 !important;
text-transform: capitalize !important;
margin: 0 !important;
{{ second_transition }}
}
.localist-widget-hl .event-short-date {
background: {{ date_color }};
position: absolute;
width: 2.777777778em;
height: 2.777777778em;
top: 0;
left: 0;
z-index: 1;
padding: .333333333em 0 0;
color: #fff;
font-weight: 800;
font-size: 1.125rem;
line-height: 1.111111111em;
font-family: : "Karla",helvetica,arial,sans-serif;
text-align: center;
text-transform: uppercase;
{{ second_transition }}
}
.event-title-short-date .event-title, .event-title-short-date .event-short-date, .event-title-short-date .event-title-location-time{
position:static !important;
float:left;
}
.event-title-short-date {
background: #071B2E;
color: #ffffff;
width: 100%;
float: right;
padding: 10px;
position: relative;
margin: 0;
clear: both;
border-bottom: 5px solid #127BA2;
}
.event-title-short-date .event-title{
width:100%;
background:transparent !important;
padding: 0 !important;
line-height: 1.4 !important;
color: #ffffff !important;
}
.event-title-short-date .event-short-date{
width: 60px !important;
background: rgb(239, 239, 239) !important;
color: #002949 !important;
height: auto !important;
padding: 8px 0 10px !important;
}
.event-title-short-date .event-title-location-time{
width:75% !important;
padding:0 0 0 15px;
}
.localist-widget-hl .event-card:hover .event-img {
{{ second_image_transform }}
}
.localist-widget-hl .event-card .content:before {
position: absolute;
left: 1px;
bottom: 0;
right: 1px;
content: '';
height: 17px;
}
.localist-widget-hl .event-img {
position: relative;
width: auto;
height: auto;
min-height: 100%;
min-width: 100%;
max-width: 100%;
display: block;
left: 50%;
{{ image_transform }}
{{ second_transition }}
}
.localist-widget-hl .event-card img {
display: block;
height: 230px!important;
width: 100% !important;
min-height: auto !important;
min-width: auto !important;
transform: inherit !important;
-webkit-transition: inherit !important;
position: static;
object-fit: cover;
object-position: 100% 0;
}
.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .localist-widget-hl .event-short-date,.localist-widget-hl .event-card:hover .content:before {
opacity: 0;
text-decoration: none;
visibility: hidden;
}
.localist-widget-hl .event-card .event-short-date {
background: {{ date_color }};
}
.localist-widget-hl .event-card:hover header {
overflow: visible;
}
.localist-widget-hl .event-card:hover {
border-color: {{ card_hover }};
}
.localist-widget-hl .event-card:hover .event-overview {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.localist-widget-hl .event-card img {
display: block;
height: 230px!important;
width: 100% !important;
min-height: auto !important;
min-width: auto !important;
transform: inherit !important;
-webkit-transition: inherit !important;
position: static;
object-fit: cover;
object-position: 100% 0;
}
.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .localist-widget-hl .event-short-date,.localist-widget-hl .event-card:hover .content:before {
opacity: 0;
text-decoration: none;
visibility: hidden;
}
.localist-widget-hl .event-card .event-short-date {
background: {{ date_color }};
}
.localist-widget-hl .event-card:hover header {
overflow: visible;
}
.localist-widget-hl .event-card:hover {
border-color: {{ card_hover }};
}
.localist-widget-hl .event-card:hover .event-overview {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.localist-widget-hl .event-list .event-card {
}
.localist-widget-hl .event-short-date abbr {
display: block;
font-size: 11px;
font-weight: 700;
line-height: 1.2em;
border: 0 none;
}
.localist-widget-hl * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.localist-widget-hl .pin {
width: 17px;
height: 17px;
border-radius: 48% 50% 50% 0;
transform: rotate(-45deg);
float: left;
margin-left: 10px;
text-indent: initial;
-webkit-backface-visibility: hidden;
}
.localist-widget-hl .pin:after {
content: "";
width: 6px;
height: 6px;
margin: 5px 0 0 6px;
background: {{ card_hover }};
border-radius: 50%;
position: absolute;
}
.localist-widget-hl .clock {
float: left;
margin-top: 0;
border: 2px solid #fff;
display: inline-block;
position: relative;
vertical-align: top;
border-radius: 100%;
height: 18px;
width: 18px;
margin-left: 8px;
-webkit-backface-visibility: hidden;
}
.localist-widget-hl .clock:before {
height: 4px;
left: 8px;
top: 4px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
border: 1px solid #fff;
content: '';
position: absolute;
}
.localist-widget-hl .clock:after {
height: 4px;
left: 6px;
top: 2px;
border: 1px solid #fff;
content: '';
position: absolute;
}
/*Card*/
.localist-widget-hl{
width:100%;
margin:30px auto;
}
.localist-widget-hl .event-card header:first-child
{
border:0 !important;
}
.localist-widget-hl .event-details {
background: #071B2E;
color:#fff !important;
border-bottom: 5px solid #127BA2;
}
.localist-widget-hl .event-list .event-overview .content
{
padding: 17px 17px 10px !important;
color:#000 !important;
}
.localist-widget-hl .event-card .content p
{
overflow:visible !important;
line-height:24px !important;
font-size:16px !important;
font-family: "Karla",helvetica,arial,sans-serif;
}
.calendar-header .localist-widget-hl{
clear:both;
display:table;
z-index: 1;
position: relative;
}
.localist-widget-hl .event-list .event-overview .content{
/*display: none;*/
}
.localist-widget-hl .event-detail-title
{
font-size:16px !important;
}
.localist-widget-hl .event-specs
{
font-size:13px !important;
}
.localist-widget-hl .event-short-date abbr{
text-decoration:none !important;
}
.localist-widget-hl .clock{
border: 2px solid #324f69 !important;
}
.localist-widget-hl .clock:before{
border: 1px solid #324f69 !important;
}
.localist-widget-hl .clock:after{
border: 1px solid #324f69 !important;
}
.localist-widget-hl .pin{
background: #324f69 !important;
}
.localist-widget-hl .pin:after {
background: #fba504 !important;
}
span.start-time.location {
display: none !important;
}
.calendar-header h2.f-primary-b.f-title-big {
color: #fff;
text-align: center;
margin-bottom: 20px;
font-size:3.23077em !important;
}
.calendar-header h2.f-primary-b.f-title-big a{
color: #fff;
text-decoration:none;
}
.b-calendar-link{
color: #fff;
display: table;
margin: 0 auto 25px;
font-size: 17px;
padding: 10px 10px;
}
.b-calendar-link a {
text-decoration: none;
color: #eeb111;
font-weight: 900;
}
.b-calendar-link a:hover {
text-decoration: underline;
}
abbr.event-day {
display: table;
margin: 0 auto;
font-size: 9px !important;
}
abbr.event-month {
font-size: 13px !important;
}
abbr.event-date {
font-size: 20px !important;
font-weight: bold !important;
text-align: center;
vertical-align: middle;
position: relative;
line-height: 0.9 !important;
}
/*End Card*/
@media only screen and (min-width: 90.063em){
.localist-widget-hl .event-list li {
height:300px;
}
}
@media only screen and (max-width: 920px){
.localist-widget-hl .event-list li {
height:auto;
}
}
@media only screen and (max-width: 800px){
.event-title-short-date .event-title-location-time {
width: 70% !important;
padding: 0 0 0 10px;
}
}
@media only screen and (max-width: 767px){
.localist-widget-hl .event-list li {
height:auto;
}
}
@media only screen and (max-width: 700px){
.localist-widget-hl .event-list li {
height:auto !important;
width:48% !important;
}
}
@media only screen and (max-width: 500px){
.localist-widget-hl .event-list li {
height:auto !important;
width:85% !important;
display:table;
margin:20px auto 0 !important;
float:none;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<div class="localist-widget-hl CardEvents">
<ol class="event-list">
{% if events == empty %}
<li class="lw lw_event_item nocontent">
<div class="lw_event_item_title">{{ site.snippets.widget_nocontent }}</div>
</li>
{% else %}
{% for event in events %}
<li class="event">
<article class="event-card">
<div class="event-overview">
<header>
{% photo_for event size:big_300 width:250 height:250 class:'event-img' %}
<div class="event-title-short-date">
<time class="event-short-date" datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
<abbr class="event-day">{% event_time event order:"date" date_format:"l" short_time_format:"l" %}</abbr>
<abbr class="event-month" title="{% event_time event order:"date" date_format:"F" short_time_format:"F" %}">
{% event_time event order:"date" date_format:"M" date_format_year:"M Y" short_time_format:"M" %}
</abbr>
<abbr class="event-date">{% event_time event order:"date" date_format:"d" date_format_year:"d" short_time_format:"d" %}</abbr>
</time>
<div class="event-title-location-time">
<h2 class="event-title">{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate:30 }}</h2>
{% if event.place.visible_name != blank or event.location_name != blank %}
<div class="event-location">
{% if event.place.visible_name != blank %}
{{ event.place.visible_name }}
{% else %}
{{ event.location_name }}
</div>
{% endif %}
{% endif %}
<div class="event-date">
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% event_time event order:"time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" <br> " %}
</time>
</div>
</div>
</div>
</header>
</div>
<div class="event-details">
<strong class="event-detail-title">{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name }}</strong>
<div class="content"><p>{% item_description event %}</p></div>
</div>
<a class="cover" href="{{ event.url }}" {% if settings.target_blank %} target="_blank"{% endif %}>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name }}</a>
{% if event.location_name or event.place.visible_name or event.start_time %}
<span class="start-time location">
{% if event.start_time %}
{% event_time event order:"time" time_format:"h:i a" short_time_format:"h:i a" %}
{% if event.place.visible_name != blank or event.location_name != blank %} - {% endif %}
{% endif %}
{% if event.place.visible_name != blank or event.location_name != blank %}
{% if event.place.visible_name != blank %}
{{ event.place.visible_name }}
{% else %}
{{ event.location_name }}
{% endif %}
{% endif %}
</span>
{% endif %}
</article>
</li>
{% endfor %}
{% endif %}
</ol>
</div>
Template 9
HTML
<style>
ul.localist-widget-customer {
padding: 0;
margin: 0;
line-height: initial; }
.localist-widget-customer div.secondblock {
padding: 0px 10px; }
.localist-widget-customer > li > div.titlespace > div > a > h4 {
margin-top: 15px;
margin-bottom: 10px; }
.localist-widget-customer div.day {color: #000000;
background-color: white;
padding: 10px;
font-size: 1em;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: bold;
margin-bottom: 2px;
text-align: center; }
.localist-widget-customer div.day {text-decoration: none !important;
font-family: "Karla",helvetica,arial,sans-serif !important;
}
.localist-widget-customer div.month {text-decoration: none !important;
font-size: 12px;
font-family: "Karla",helvetica,arial,sans-serif !important;
}
.localist-widget-customer div.month {color: #295135;
background-color: white;
padding: 5px;
font-size: 12px;
font-family: "Karla",helvetica,arial,sans-serif !important;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
}
.localist-widget-customer div.otherdetails {color: #295135;
font-family: "Karla",helvetica,arial,sans-serif !important;
font-size: 12px;
font-weight: bold;
text-decoration: none;
margin-top: 5px;
padding: 0px 10px;
}
.localist-widget-customer div.dateblock {
width: 15%;
}
.localist-widget-customer div.des {
float: none;
font-family: "Karla",helvetica,arial,sans-serif !important;
color: #000000;
font-size: 12px;
margin-bottom: 10px;
}
.localist-widget-customer .lwd {margin-right: auto;
margin-left: auto;
width: 100%;
height: 215px;
}
.localist-widget-customer li {list-style: none;
float: left;
width: 300px;
margin-left: 15px;
margin-right: 15px;
height: 422px;
min-height: 376px;
margin-bottom: 50px;
border: 1px solid #ccc;
font-family: "Karla",helvetica,arial,sans-serif;
}
body > ul > a > li > div.titlespace > div > h4 {color: #127ba2 !important;
text-decoration: none;
font-family: "Karla",helvetica,arial,sans-serif !important;
text-transform: uppercase;
}
.localist-widget-customer div.titlespace {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-size: 14px;
font-family: "Karla",helvetica,arial,sans-serif !important;
padding: 0px 10px;
}
.localist-widget-customer a {text-decoration: none; }
@media only screen and (max-width: 479px) {
.localist-widget-customer li {
margin-right: 5px;
width: 100% !important; }}
span.day {
display: block;
font-size: 1.2em;
line-height: 18px;
}
span.month {
font-size: 1em;
line-height: 14px;
}
div.date-label {
padding: 10px;
background-color: rgba(18, 123, 162, .7);
color: white;
text-align: center;
z-index: 1;
float: left;
position: absolute;
text-transform: uppercase;
font-family: "Karla",helvetica,arial,sans-serif !important;
}
.lwd {padding-top: 0px !important; }
.lwi0 {padding: 0px !important; }
.moredates {
padding-left: 10px !important;
text-decoration: underline;
font-size: 0.8em;
}
body > ul > a > li > div.secondblock > span {color: #808285 !important; }
body > ul > a > li > div.secondblock > div.time {font-weight: 600;
color: #127BA2; }
</style>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.typekit.net/pqq8aix.css">
<ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el;
return document.getElementById(el);
}
function upTag(el, tag) {
var e;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}
function hasClass(el, klass) {
if(!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}
function downClass(el, tag, klass) {
var e = getEl(el);
if(!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for(i = 0; i < els.length; i++) {
e = els[i];
if(hasClass(e, klass)) return e;
}
return null;
}
function toggleVisibility(el) {
var e;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}
return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}
{% if current_user %}<!-- logged in -->{% endif %}
{% for event in events %}
<a href="{{ event.url }}" {% if settings.target_blank %} target="_blank"{% endif %}>
<li>
<div class="date-label{% if event.is_past %} past-date{% endif %}">
<span class="day">{{ event.starts_at | date: "%d" }}</span>
<span class="month">{{ event.starts_at | date: "%b" }}</span>
</div>
<div class="lwd"><span class="lwi0"> {% photo_for event size:square_300 %}</span></div>
<h4>
{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate:30 }}
</h4>
</div>
</div>
<div class="secondblock">
<div class="des">{% item_description event length:130 %}</div>
<div class="time">
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% event_time event order:"date,time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" <br> " %}
</time>
</div>
<!--VIEW DATES THROUGH CTA FOR RECURRING EVENTS-->
<span class="moredates">
{% assign future_dates = event.future_dates %}
{% unless future_dates == blank %}
<p>More dates through {{ event.last_date | date:site.format.date_range }}</p>
<div id="x-all-dates" style="display: none">
{% for instances in event.future_dates %}
<p class="dateright">
{% event_time instances[0] date:long separator:" at " minutes:yes %}
{% if instances[0].end_time %}
to {{ instances[0].ends_at | date:site.format.time_long }}
{% endif %}
</p>
{% for instance in instances offset:1 %}
<p class="additional-date">
{% event_time instance order:'time,end' minutes:yes %}
</p>
{% endfor %}
{% endfor %}
</div>
{% endunless %}
</span>
</div>
<!--END VIEW DATES THROUGH CTA FOR RECURRING EVENTS-->
</li>
</a>
{% endfor %}
<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->
</ul>
Template 10
HTML
<style>
.iconp, .icont {
width: 14px;
margin: 2px 5px 0 0;
}
li.widget-event {
background: #fff;
}
.month {
color: #333;
}
.day {
color: #127BA2;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 5rem;
font-weight: 900;
line-height: 0.9;
}
ul.localist-widget-customer {
display: grid;
grid-template-columns: repeat( auto-fill, minmax(20rem, 1fr) );
grid-gap: 1.25rem;
margin: 0;
padding: 0;
}
li.widget-event {
list-style-type: none !important;
position: relative;
display: flex;
flex-direction: column;
line-height: 1.25;
border: 1px solid #d7d7d7;
}
div.widget-content {
background: #fff;
padding-left: 0.75rem;
height: 100%;
margin-bottom: 6rem;
}
div.widget-content > div.title > h4 {
font-size: 1rem;
line-height: 1.3;
margin: 7px 0;
}
div.title > h4 > a {
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: 700 !important;
font-size: 1rem;
text-decoration: none !important;
color: #127BA2;
}
div.title > h4 > a:hover {
text-decoration: underline !important;
}
div.des {
font-size: 16px !important;
font-weight: 400 !important;
color: #555 !important;
font-family: "Karla",helvetica,arial,sans-serif;
}
div.time {
font-size: 16px !important;
color: #333333 !important;
font-family: "Karla",helvetica,arial,sans-serif;
}
div.place {
margin-top: 5px;
}
div.place > div > a {
text-decoration: none;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 16px !important;
color: #333;
}
div.place > div > a:hover {
text-decoration: none;
}
div.place > div > i {
color: #d01c29 !important;
}
div.place > div > i:hover {
color: #A51417 !important;
}
div.widget-photo-space > span > a > img {
width: 100%;
height: auto;
}
.key span {
display: block;
line-height: 1;
}
.key .day {
font-size: 5rem;
letter-spacing: -1px;
font-family: "Karla",helvetica,arial,sans-serif;
}
.key .month {
font-size: 1em;
letter-spacing: 1px;
font-family: "Karla",helvetica,arial,sans-serif;
text-transform: uppercase;
}
.key {
width: fit-content;
max-height: 121px;
margin: 1rem;
padding: 1rem 0;
border-right: none;
border-bottom: 1px solid #999;
text-align: left;
}
/* icons */
.pin:after {
position:absolute;
}
.pin {
width:12px;
height:12px;
border-radius:50% 50% 50% 0;
background:#333;
transform:rotate(-45deg);
float:left;
margin-top:2px;
margin-right:5px;
margin-left:2px;
position:relative;
}
.pin:after {
content:"";
width:6px;
height:6px;
margin:3px 0 0 3px;
background:#fff;
border-radius:50%;
}
.clock {
float:left;
margin-top:2px;
margin-right:5px;
border:2px solid #333;
display:inline-block;
position:relative;
vertical-align:top;
border-radius:100%;
height:12px;
width:12px;
}
.clock:after,.clock:before {
background:#ccc;
border:1px solid #333;
content:'';
position:absolute;
border-left:none;
width:0;
}
.clock:after{
height:5px;
left:5px;
top:0;
}
.clock:before{
height:6px;
left:9px;
top:2.3px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el !important;
return document.getElementById(el) !important;
}
function upTag(el, tag) {
var e !important;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e !important;
e = e.parentNode !important;
}
return null !important;
} else {
return null !important;
}
}
function hasClass(el, klass) {
if(!el) return !important;
var classes = el.className !important;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes))) !important;
}
function downClass(el, tag, klass) {
var e = getEl(el) !important;
if(!e) return null !important;
var els = e.getElementsByTagName(tag) !important;
var i = 0 !important;
for(i = 0 !important; i < els.length !important; i++) {
e = els[i] !important;
if(hasClass(e, klass)) return e !important;
}
return null !important;
}
function toggleVisibility(el) {
var e !important;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '' !important;
} else {
e.style.display = 'none' !important;
}
}
}
return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww')) !important;
}
} !important;
})() !important;
</script>
{% endif %}
{% if current_user %}<!-- logged in -->{% endif %}
{% for event in events %}
<li class="widget-event">
<div class="widget-photo-space">
<span class="widget-photo"><a href="{{ event.url }}">{% photo_for event size:big_300 %}</a></span>
</div>
<div class="key">
<div class="key-container">
<span class="month">{{ event.starts_at | date: "F" }}</span><span class="day">{{ event.starts_at | date: "%d" }}</span>
</div>
</div>
<div class="widget-content">
<div class="title">
<h4>
<a href="{{ event.url }}">{{ event.name }}</a>
</h4>
</div>
<div class="time">
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% unless event.start_time == blank %}
<div class="clock"></div>
{% endunless %}
{% event_time event order:"time" time_format: "g:i" short_time_format:"g:i" separator:" - " %}
{% if event.next_instance.end_time %} - {{ event.ends_at | date:site.format.time_long }}{% endif %}
{% if event.start_time == blank %}
{% endif %}
</time>
</div>
<div class="place">
{% if event.place != empty and event.location_name != blank %}
<div class="pin"></div>
<div class="lw_event_item_location">
{% if event.place %}
<a href="{{ event.place.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.place.visible_name }}</a>
{% else %}
<a href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.location_name }}</a>
{% endif %}
</div>
{% endif %}
</div>
</li>
{% endfor %}
<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->
</ul>
Comments
0 comments
Article is closed for comments.