Liveblog HTML/CSS
The HTML Structure
When you embed a ticker, the following HTML structure is generated within your container to hold a ticker:
<div class="tik3-ticker">
<div class="tik3-scoreboard-container">
</div>
<ul class="tik3-event-list">
</ul>
<span class="tik3-powered-by">powered by <a href="https://www.tickaroo.com" target="_blank">Tickaroo</a></span>
</div>
Notes:
tik3-scoreboard-container
will only be generated on a liveblog with a scoreboard and handleScoreboard: “auto”- The
tik3-powered-by
element must remain visible as long as the ticker is visible
The Layout Structure
All elements that are used to define the layout have a tik3-flex-
class prefix assigned to them. One of the biggest benefits of the tik3
version is that you can now use/modify/override a more robust layout that is using flexbox. E.g.: to change the layout to a meta-info (sidebar) and main section (content) side-by-side alignment extend your css with this snippet (make sure showEventMeta
option is set to 'off'
).
.your_scope .tik3-ticker.tik3-ticker-wide .tik3-flex-event {
align-items: baseline;
flex-direction: row;
}
.your_scope .tik3-ticker.tik3-ticker-wide .tik3-flex-event .tik3-flex-event__info {
width: 100%;
}
.your_scope .tik3-ticker.tik3-ticker-wide .tik3-flex-event .tik3-flex-event__meta {
width: 15%;
}
.your_scope .tik3-ticker.tik3-ticker-wide .tik3-flex-event .tik3-flex-event__content {
width: 85%;
}
.your_scope .tik3-ticker.tik3-ticker-wide .tik3-flex-event .tik3-flex-event-meta-state__time-empty {
display: block;
}
// `.your_scope` is needed to give the selectors more "weight"
The Font-Size Structure
All font-sizes and icons sizes using the em
unity, based of the ticker’s root font-size. Here is an example how to optically “scale” the ticker larger:
.your_scope .tik3-ticker {
font-size: 20px;
}
// `.your_scope` is needed to give the selectors more "weight"