Event List Widget Styling

Style 1

Style 1 html – copy/paste this into your widget html area inside VBO

<div class='event grid-item'>
<div class='eventwrapper'>
<div class='column-1'>{POSTER}</div>
<div class='column-2'>
<div class='event-name'>{EVENTNAME}</div>
<div class='event-date'>{EVENTDATE}</div>
<div class='event-button'>{BUTTON}</div>
</div>
</div>
</div>

Style 1 css – copy/paste this into your widget css area or your website stylesheet

.upcoming-events {
width: 100%;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}

.upcoming-events:after {
content: "";
visibility: hidden;
height: 0;
display: block;
clear: both;
}

.grid-item {
float: left;
width: 100%;
min-height: 1px;
padding: 0 10px;
position: relative;
}

@media only screen and (min-width: 768px) {
.grid-item {
width: 23%;
}
}

.column-1 {
margin-bottom: 15px;
}

.column-1 a {
display: block;
}

.column-1 img {
display: block;
width: 100%;
max-width: 100%;
}

.event {
margin-bottom: 15px;
}

.eventwrapper {
background: #fff;
padding: 10px;
box-shadow: 0 1px 9px rgba(0, 0, 0, 0.14);
border: 1px solid #dadada;
}

.event-name {
color: #1e1e1e;
font-size: 17px;
font-weight: normal;
line-height: 1.3;
min-height: 44px;
}

.event-date {
border-top: 1px solid #dadada;
font-size: 16px;
color: #000;
margin-bottom: 5px;
margin-top: 10px;
line-height: 1.3;
padding-top: 10px;
min-height: 40px;
}

.event-button {
text-align: center;
}

.event-button a {
display: block;
color: #fff;
background: #ED174F;
border-radius: 3px;
text-transform: uppercase;
padding: 6px;
font-weight: 600;
}

.event-button a:hover {
background: #999;
text-decoration: none;
}

.owl-theme .owl-dots .owl-dot.active span {
background-color: #7FC241;
}

Style 2

Style 3