Liveblog HTML/CSS

The Tickaroo Embed Version 3 is deprecated for all use cases, except for some sport templates. We strongly encourage using V4. V3 will not receive any new features of the News Editor V2! If you do not see the new sport templates in your account or require a specific sports type, kindly reach out to us for assistance.

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"