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"