CSS Styling

This section intends to help you customize your liveblogs in case you have already fully utilized all options included in our themes. Before you write your own css styles we recommend checking out all available layouts, colors and options available within our themes. In most cases you should not need to write custom css since our themes intend to cover the majority of use cases. For example, our themes have popular styles like card layout, timeline and masonry layout already built in.

Apply CSS to your Liveblog

There are two ways to apply custom CSS to your Liveblog.

1. Integrated CSS Styles

Add the CSS in our settings (go to Settings » Integration » CSS Styles). CSS styles are then automatically added as inline styles into your HTML and delivered as a part of your theme.

Advantages:

• adjustments can be done without deploying your website
• styles will be connected to your theme
• styles can be used accross different plattforms
• liveblog styles are stored in a central, easily accessible location
• tickaroo support can easily help you

How to create a CSS style

To use a CSS style it needs to be linked to from one of your themes. So everytime you choose your theme for your liveblog, it will also load your linked CSS style.

This means you need to do two things:

1. Create a CSS style
   Navigate to Settings » Integration » CSS Styles, click on “Edit CSS styles” and create a new CSS style.
2. Link the CSS style from one of your themes
   Edit one of your themes (Settings » Integration » Edit Themes), open the options and choose the CSS style you have just created.

2. CSS in your page

Add the CSS to your page as usual. We do not use iframes but insert the widgets directly into your existing HTML. Therefore you can apply CSS directly to the liveblog.

Advantages:

• Possibly slightly better performance (Depending on your building routine).

Note: When you add the CSS customizations to your own page, you must make sure that your CSS selectors are more specific than ours. Otherwise the changes will be ineffective, because in most cases our CSS is loaded asynchronously and overwrites your CSS changes due to same specificity. W3Schools: Specificity

Specificity Example

.tik4 {
  --t4-txt-base: ...;
}

.tik4.tik4 {
  --t4-txt-base: ...;
}

Styling Guide

Find some information that will help you create your own custom CSS styles.

Classname and variable prefixes

All classnames are prefixed with tik4-. CSS variables we use are prefixed with t4-. Since our CSS is directly inserted into your website, this is simply done to avoid styling conflicts with your own CSS.

CSS Variables

To make your liveblogs easier to customize we have defined most of the values that affect the appearance as CSS variables. All variables are defined within the .tik4 selector. This selector has solely the function of making all variables available.

.tik4 {
    --t4-min-width: 360px;
    --t4-rounded-sm: calc(var(--t4-sc) * .125rem);
    --t4-rounded: calc(var(--t4-sc) * .25rem);
    --t4-rounded-lg: calc(var(--t4-sc) * .5rem);
    --t4-duration: .1s;
    --t4-duration-slow: 300ms;
    --t4-sp-0-5: calc(var(--t4-sc) * .125rem);
    --t4-sp-2-5: calc(var(--t4-sc) * .625rem);
    ...
}

Basic Variables

With some basic variables certain defaults can be set.

To see all CSS variables, please use your browser’s inspector and select the <div class="tik4-live tik4 ..."> element.

Example: Remove round corners

.tik4-button {
  border-radius: 0;
}
.
.

.tik4 {
  --t4-rounded-sm: 0;
  --t4-rounded: 0;
  --t4-rounded-lg: 0;
}

If general adjustments are necessary, we normally recommend overwriting the existing variables.

Font Sizes & Liveblog Scaling

All font sizes, spacing and other elements of the liveblog depend on a centrally defined scaling variable (-t4-sc: 1) within the .tik4 selector. This can be seen in the table above (example: --t4-txt-base: calc(var(-t4-sc) * 1rem).

The liveblog is optimized for the browser default font size of 16px. However, some websites set the font size of the HTML document to 10px. In this case, the liveblog will inevitably be displayed as too small. To counteract this, simply set the scaling variable to 1.6.

Example

.tik4 {
  --t4-sc: 1;
}

.tik4 {
  --t4-sc: 1.6;
}

Colors

Theme Colors

To see all used colors, please use yor the inspector of your browser and select the <div class="tik4-live tik4 ..."> element.

Color Schemes (Dark Mode)

Embed V4 also supports dark mode and inverted events. Both can be activated via a theme. As you can see in the theme colors table, for each color a light (--***--l) and dark (--***--d) variant is defined. If you want to use the dark mode or the inverted events, please note the following:

• Always define both a --***--l and a --***--d variant for the desired color - even if it has the same color value.
• Do not overwrite the --*** variable. Then the mechanism that switches between the dark and light color will no longer work.

Example

.tik4 {
  --t4-primary: #E01A4F;
}
.

.tik4 {
  --t4-primary--l: #E01A4F;
  --t4-primary--d: #E72D5F;
}

Recommended mobile optimization: horizontal spacing

Container elements that contain the liveblog often have a horizontal spacing to the edge of the viewport. Since the liveblog itself already provides horizontal spacing, there is little space left to display the actual content, particularly on mobile devices. Therefore, it is often recommended to optimize the spacing on mobile views. This could look like as following.

Example: Edge to edge content

.container {
  /* container with spacing */
  padding-left: 1rem;
  padding-right: 1rem;
}
.container .tik4-live {
  /* resetting spacing for edge to edge
   liveblog by using negative margins */
  margin-left: -1rem;
  margin-right: -1rem;
}
@media screen and (min-width: 576px) {
  .container .tik4-live {
    /* removing negative margin 
    for wider screen sizes */
    margin-left: 0;
    margin-right: 0;
  }
}

Highlighted & Pinned Events

If events are marked as highlighted or pinned by the reporters, they can be identified using CSS classes:

You can change the colors using the following CSS variables:

Main HTML structure

Below you can see the complete basic DOM structure for a Tickaroo Liveblog.

/* .tik4-live wrapper element:
- with theme options (.tik4-live--cards)
- with tik4 variables (.tik4)
- and with theme colors as inline-styles */
<div class="tik4-live tik4 tik4-live--cards" style="--t4-primary--l: #4BA368">
  /* Your CSS Styles as inline css */
  <style>...</style>
  <div class="tik4-live__container">

    /* Filter for tags if available */
    <div class="tik4-tag-filter">
      ...
    </div>

    /* Load updates button if available */
    <div className="tik4-pending-update">
      ...
    </div>

    /* Chapters if available */
    <div class="tik4-chapters">
      ...
    </div>

    /* Load more content buttons if available */
    <div className="tik4-loading-top">
    </div>

    /* Event list */
    <div class="tik4-event-list">
      <div class="tik4-event tik4-event--pin">
        ...
      </div>
      <div class="tik4-event">
        ...
      </div>
      /* Milestone between events if available */
      <div class="tik4-milestone">
        ...
      <div>
      <div class="tik4-event">
        ...
      </div>
      ...
    </div>

    /* Load more content buttons if available */
    <div className="tik4-load-more-bottom">
      ...
    </div>

    /* Powered by */
    <div class="tik4-by">...</div>

  </div>
</div>

/* Comments are rendered within a modal as a direct child of your body element */
<div class="tik4-modal ...">
  ...
</div>