skip to Main Content

Style 1

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

<div class='event'>
<div class='eventwrapper clearfix'>
<div class='vbocol-1'><div class='posterwrapper'><div class='event-price'>{PRICERANGE}</div>{POSTER}</div></div>
<div class='vbocol-2'>
<div class='event-name'>{EVENTNAME}</div>
<div class='event-date'>{EVENTDATE}</div>
<div class='event-info'>{EVENTINFO}</div>
<div class='more-button'>{MORE}</div>
</div>
<div class='vbocol-3'>
<div class='event-button'>{BUTTON}</div>
</div>
</div>
</div>

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

/* outer structure */
.event { overflow: hidden; }
.eventwrapper { width: 100%; margin: 7px 0; padding: 10px; background-color: #fff; border: 1px solid #dadada; border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); }

/* inner elements */
.posterwrapper { position: relative; max-height: 200px; overflow: hidden; border-radius: 3px; }
.event-price { position: absolute; font-size: 16px; color: #fff; text-align: center; background: rgba(0,0,0,0.5); width: 100%; padding: 6px; bottom: 0; }
.event-pic { height: auto; width: 100%; }
.event-name { padding: 0 0 0 10px; color: #000; font-size: 20px; }
.event-date { padding: 0 0 0 10px; color: #333; font-size: 13px; margin-bottom: 10px; }
.event-info { position: relative; height: 4.1em; overflow: hidden; font-size: 14px; line-height: 1.4; padding: 0 10px; }
.event-info:after { content: ''; text-align: right; position: absolute; bottom: 0; right: 0; width: 70%; height: 1.4em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); }
.event-button .button { display: block; width: 100%; font-size: 14px; padding: 9px 15px; text-align: center; background-color: #07A303; color: #fff; }
.more-button { text-align: left; padding: 10px; }
.more-button .button { background: #ccc; color: #666; font-size: 11px; padding: 3px 6px; }
.more-button .button:hover { background: #dadada; color: #333;}
.button { border-radius: 3px; text-transform: uppercase; font-weight: normal; text-decoration: none; }
.button:hover { background-color: #70b96a; border-color: #98E992; color: #fff; text-decoration: none; }

/* layout */
.clearfix:after { content: ''; visibility: hidden; height: 0px; display: block; clear: both; }
.vbocol-1,
.vbocol-2,
.vbocol-3 { position: relative; float: left; }
.vbocol-1 { width: 30%; }
.vbocol-2 { width: 50%; }
.vbocol-3 { width: 20%; }

@media only screen and (max-width: 640px) { 
.vbocol-1,
.vbocol-2,
.vbocol-3 { float: none; width: 100%; }

.event-info,
.eventdate-info,
.more-button,
.event-name,
.event-date { padding-left: 0; padding-right: 0; }
.event-name { margin-top: 10px; }
.more-button { margin-bottom: 10px; }
}

Style 2

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

<div class='event'>
<div class='eventwrapper'>
<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 2 CSS – copy/paste this into your widget CSS area or your website stylesheet

.event { margin-bottom: 10px; }
.eventwrapper { background: #f8f8f8; border: 1px solid #dadada; box-shadow: none; padding: 10px 15px; }
.event-button { text-align: left; }
.event-button a { display: inline-block; font-weight: normal; font-size: 14px; padding: 4px 10px;}

@media (max-width: 640px) {

.event { float: none; width: 100%; margin-bottom: 10px; }

}