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:
- Create a CSS style
Navigate to Settings » Integration » CSS Styles, click on “Edit CSS styles” and create a new CSS style. - 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);
...
}
.tik4-live
class and never the .tik4
class.
The .tik4
class is only used to provide CSS variables in various places (e.g. also in the chat modal).
Basic Variables
With some basic variables certain defaults can be set.
Variable | Default | Description |
---|---|---|
--t4-rounded-sm | calc(var(--t4-sc) * .125rem) | Border radius (sm) |
--t4-rounded | calc(var(--t4-sc) * .25rem) | Border radius (default), e. g. |
--t4-rounded-lg | calc(var(--t4-sc) * .5rem) | Border radius (lg) |
--t4-sp-0-5 | calc(var(--t4-sc) * .125rem) | Spacer |
... | ... | |
--t4-sp-4 | calc(var(--t4-sc) * 1rem) | Spacer |
... | ... | |
--t4-sp-12 | calc(var(--t4-sc) * 3rem) | Spacer |
--t4-txt-xs | calc(var(--t4-sc) * .75rem) | Font size (xs) |
--t4-txt-sm | calc(var(--t4-sc) * .875rem) | Font size (sm) |
--t4-txt-base | calc(var(--t4-sc) * 1rem) | Font size (default) |
--t4-txt-lg | calc(var(--t4-sc) * 1.25rem) | Font size (lg) |
--t4-txt-xl | calc(var(--t4-sc) * 1.5rem) | Font size (xl) |
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
Variable | Default | Description |
---|---|---|
--t4-primary--l | #E01A4F | Primary color (light mode), e. g. primary button, highlight border |
--t4-primary--d | #E72D5F | Primary color (dark mode) |
--t4-secondary--l | #0085CC | Secondary color (light mode), e. g. secondary buttons, web consent toggle, links, hover and active states |
--t4-secondary--d | #00A2FA | Secondary color (dark mode) |
--t4-txt--l | #1C1C1B | Text color (light mode) |
--t4-txt--d | #FAF9F7 | Text color (dark mode) |
--t4-muted--l | #706F6D | Text muted (light mode) |
--t4-muted--d | #B8B7B6 | Text muted (dark mode) |
--t4-bg--l | #FFFFFF | Background color (light mode) |
--t4-bg--d | #242322 | Background color (dark mode) |
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:
CSS Class | Description |
---|---|
.tik4-event--highlight | Highlighted event |
.tik4-event--pin | Pinned event |
You can change the colors using the following CSS variables:
Variable | Default | Description |
---|---|---|
--t4-ev-h-bg--l | #F5F3F0 | Background for highlighted events (light mode) |
--t4-ev-h-bg--l | #333231 | Background for highlighted events (dark mode) |
--t4-ev-h-b-bg--l | var(--t4-primary--l) | Border color for highlighted events, points to primary color by default (light mode) |
--t4-ev-h-b-bg--l | var(--t4-primary--d) | Border color for highlighted events, points to primary color by default (dark mode) |
--t4-ev-p-bg--l | #F5F3F0 | Background for sticky events (light mode) |
--t4-ev-p-bg--d | #333231 | Background for sticky events (dark mode) |
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>