Mit den Widgets kannst du Informationen
zu deinen Veranstaltungen in
unterschiedlichen Formen auf deine
Homepage integrieren.
Der Vorteil hierbei ist, wenn diese
Widgets einmal eingebunden sind, kannst du
den Inhalt und die Darstellung komplett
aus dem Ticketsystem heraus steuern.
- Alle Veranstaltungen mit den einzelnen
Veranstaltungstage werden abgebildet
- Erweiterter Filter für die
Kategorien
Beispiel: Widget -Style 6
HTML-Code
<div class='event'>
<div class='eventwrapper
clearfix'>
<div class='egocol-1'>
<div
class='event-name'>{EVENTNAME}</div>
</div>
<div class='egocol-2'>
<div
class='event-date'>{EVENTDATE}</div>
<div
class='event-venue'>{VENUENAME}</div>
</div>
<div class='egocol-3'>
<div
class='event-button'>{BUTTON}</div>
</div>
</div>
</div>
CSS-Code
/* outer structure */
.event { overflow: hidden; }
.eventwrapper { width: 100%; margin: 7px 0; padding: 10px; background-color: #fff; border: 1px solid #dadada; border-radius: 0px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); }
/* inner elements */
.posterwrapper { position: relative; max-height: 200px; overflow: hidden; border-radius: 0px; }
.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-venue { padding: 0 0 0 10px; color: #333; font-size: 13px; margin-bottom: 0px; }
.event-date { padding: 0 0 0 10px; color: #333; font-size: 13px; font-weight: bold; margin-bottom: 0px; }
.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: #037DB1; 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: 0px; text-transform: uppercase; font-weight: normal; text-decoration: none; }
.button:hover { background-color: #85754E; border-color: #85754E; color: #fff; text-decoration: none; }
/* layout */
.clearfix:after { content: ''; visibility: hidden; height: 0px; display: block; clear: both; }
.egocol-1,
.egocol-2,
.egocol-3 { position: relative; float: left; }
.egocol-1 { width: 30%; }
.egocol-2 { width: 50%; }
.egocol-3 { width: 20%; }
@media only screen and (max-width: 640px) {
.egocol-1,
.egocol-2,
.egocol-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; }
}
@media only screen and (min-width: 600px) {
.event-filter {
display: flex;
}
.filterwrapper {
width: 30%;
}
}
.filterheader {
font-size: 20px;
font-weight: bold;
padding-top: 10px;
}