CSS Examples & Ideas

This guide provides practical CSS snippets and styling ideas to help you further customize the look and feel of your liveblog.

Media credit label

Use the following snippet to add a custom label to your media credits:

.tik4-media-body__credit:before {
  content: "Credit: ";
}

“Powered by” Branding

This example adds a “Powered by” text and a logo to a specific liveblog message. If you have sponsors for your liveblog, this can be an interesting way to display their branding.

Here, we use a tag with the identifier sponsored-by-tickaroo. This identifier allows you to target specific tagged messages via CSS. These messages automatically receive the class .tik4-event--tag-sponsored-by-tickaroo.

The Tickaroo logo is base64-encoded and embedded directly into the CSS.

.tik4-event--tag-sponsored-by-tickaroo .tik4-event__body:after {
  width: 100%;
  margin-top: var(--t4-sp-4);
  content: "This post is sponsored by";
  font-size: var(--t4-txt-sm);
  background-position: left bottom;
  background-repeat: no-repeat;
  padding-bottom: calc(var(--t4-sc) * 1.75rem);
  background-size: calc(var(--t4-sc) * 7rem) calc(var(--t4-sc) * 1.5rem);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTYgMjUiPjxwYXRoIGZpbGw9IiMzNDM0MzQiIGQ9Ik02MC44NSA3LjA0YzEuMjUgMCAyLjMyLjEyIDMuMTguMzZhNC40IDQuNCAwIDAgMSAyLjEyIDEuM2MuNTQuNi45NCAxLjQgMS4xNyAyLjQzLjIzIDEgLjM2IDIuMjUuMzYgMy43NHY1LjI4YzAgLjMxLjA2LjUuMTcuNi4xMi4xLjI4LjE0LjUuMTRoLjg1bC4xMiAyLjRjLS4yNi4zLS42Ni41OC0xLjE3LjktLjUuMy0xLjI1LjQ1LTIuMi40NS0uNDMgMC0uODYtLjAzLTEuMy0uMDctLjQzLS4wNS0uODEtLjEzLTEuMTctLjJsLTEuNzQtMi4yLS45NSAxLjY3Yy0uMzUuMi0uNzYuNC0xLjIyLjU0YTcuMTcgNy4xNyAwIDAgMS0zLjctLjAyIDMuNzYgMy43NiAwIDAgMS0yLjM3LTIuMjYgNS40OCA1LjQ4IDAgMCAxLS4zNy0yLjE2YzAtLjkxLjEzLTEuNjYuMzYtMi4yNi4yMy0uNi42Mi0xLjEgMS4xNi0xLjUzYTYuNjYgNi42NiAwIDAgMSAyLjEtMS4wM2MuODctLjI2IDEuOTItLjUgMy4xNi0uNzVsMS4zOS0uMjUtLjAyLS41NmMwLS41LS4xLS44NC0uMzQtLjk4LS4yNC0uMTQtLjU1LS4yLS45OS0uMi0uNjYgMC0xLjQzLjExLTIuMzQuMzUtLjkxLjIzLTEuOTcuNTUtMy4xNS45NmwtLjktNC43Yy45NC0uNTMgMi4wNi0uOTggMy4zMy0xLjM4IDEuMy0uMzkgMi42LS41NyAzLjk2LS41N1pNOC42IDIuOXY0LjU2aDMuMzN2NC4xSDguNnY3LjI0YzAgLjU0LjEuOTEuMzIgMS4xMy4yMi4yMi43NC4zMyAxLjU4LjMzaDEuNTRsLjM1IDMuNTZhNSA1IDAgMCAxLTEuNDQuNTRjLS43MS4xOC0xLjU3LjI2LTIuNTcuMjYtMi4xNSAwLTMuNzItLjYzLTQuNjgtMS45LS45OC0xLjI4LTEuNDgtMy4wNC0xLjQ4LTUuM3YtNS44N0guNDhWOS4wMUw2IDIuOWgyLjZabTIxLjMxIDQuMTRhMTIuNTcgMTIuNTcgMCAwIDEgNS4wNC45NWwtLjggNS4xLTEuNjQtLjQyYTggOCAwIDAgMC0xLjkyLS4yYy0uMzIgMC0uNjIuMDQtLjg2LjFhLjkyLjkyIDAgMCAwLS41OS40Yy0uMTQuMi0uMjUuNDgtLjMyLjg0LS4wOC4zNS0uMS44NC0uMSAxLjR2MS4zN2MwIDEuMTMuMTIgMS45NS4zOSAyLjQ0LjI2LjQ4Ljc0LjczIDEuNDcuNzMuODYgMCAxLjYzLS4xMSAyLjMzLS4zMi43LS4yIDEuMjUtLjM5IDEuNjgtLjUzbC40IDQuNTctLjguMzVjLS4zMS4xNC0uNjcuMjctMS4wOC4zNy0uNDIuMS0uODkuMjItMS40LjMtLjU0LjEtMS4xNC4xMy0xLjguMTMtMS4zIDAtMi40NC0uMi0zLjQxLS42Mi0uOTgtLjQyLTEuOC0xLTIuNDQtMS43N2E3LjggNy44IDAgMCAxLTEuNDctMi43NmMtLjMzLTEuMDctLjUtMi4yNy0uNS0zLjU3IDAtMS4zNS4xNy0yLjU3LjUtMy42NWE3LjU0IDcuNTQgMCAwIDEgMS40OC0yLjggNi43NiA2Ljc2IDAgMCAxIDIuNDQtMS44Yy45OC0uNCAyLjEtLjYxIDMuNC0uNjFabTYxIDBjMS4yNSAwIDIuMzUuMiAzLjMzLjZhNi45OCA2Ljk4IDAgMCAxIDQuMDYgNC40N2MuMzcgMS4wNy41NSAyLjI5LjU1IDMuNjIgMCAxLjM3LS4xOCAyLjYtLjU1IDMuN2E3Ljc2IDcuNzYgMCAwIDEtMS42IDIuOEE3LjA2IDcuMDYgMCAwIDEgOTQuMiAyNGMtLjk4LjQzLTIuMDguNjItMy4yOC42Mi0xLjI1IDAtMi4zNS0uMi0zLjMzLS42MmE3LjE1IDcuMTUgMCAwIDEtNC4wOC00LjUyYy0uMzYtMS4wOC0uNTQtMi4zLS41NC0zLjY1IDAtMS4zNi4xOC0yLjU5LjU0LTMuNjguMzYtMS4wOC44OS0yIDEuNTctMi43NmE2LjcgNi43IDAgMCAxIDIuNS0xLjc0Yy45OS0uNCAyLjEtLjYgMy4zNC0uNlptMTYuOTQgMGMxLjIzIDAgMi4zNS4yIDMuMzIuNmE2Ljk1IDYuOTUgMCAwIDEgNC4wNiA0LjQ3Yy4zNyAxLjA3LjU2IDIuMjkuNTYgMy42MiAwIDEuMzctLjE5IDIuNi0uNTYgMy43YTcuMDggNy4wOCAwIDAgMS00LjEgNC41NiA4LjIgOC4yIDAgMCAxLTMuMjguNjNjLTEuMjQgMC0yLjM0LS4yLTMuMzItLjYyYTcuMTYgNy4xNiAwIDAgMS00LjA4LTQuNTJjLS4zNi0xLjA4LS41NC0yLjMtLjU0LTMuNjUgMC0xLjM2LjE4LTIuNTkuNTQtMy42OC4zNS0xLjA4Ljg4LTIgMS41Ni0yLjc2YTYuNzUgNi43NSAwIDAgMSAyLjUtMS43NGMxLS40IDIuMS0uNiAzLjM0LS42Wm0tODcuNTUuNDFWMjQuMmgtNi40OFY3LjQ1aDYuNDhaTTQyLjg2IDEuOVYxMGwtLjM2IDMuMTNMNDYgNy40NGg2LjQ2bC01LjI2IDcuMjEgMi4zMiAxLjc1IDMuMTkgNy44aC02Ljc4bC0yLjUxLTYuNjUtLjU2Ljg3djUuNzZoLTYuNDJWMS45aDYuNDJabTM3Ljk1IDUuMzRjLjQ4IDAgLjg0LjAxIDEuMDcuMDYuMjMuMDUuNDMuMDguNi4xM2wtLjcyIDYuMzZhNy4zIDcuMyAwIDAgMC0xLS4xN2MtLjQ1LS4wNS0uOTMtLjA4LTEuNDctLjA4LS44NSAwLTEuNjIuMS0yLjM1LjI4djEwLjM3aC02LjQxVjcuNDVoNC44NWwxLjU0IDMuMzMgMS44LTMuMThhNS4zMiA1LjMyIDAgMCAxIDIuMS0uMzdabS0xOS41NCA5LjgyLS45Ny4yMWMtLjU1LjEzLS45LjMxLTEuMDkuNTgtLjE3LjI2LS4yNS42NS0uMjUgMS4xN3YuMzFjMCAuNTguMSAxIC4zMiAxLjI1cy41Ni4zNyAxIC4zN2MuMjcgMCAuNDktLjAyLjYzLS4wNmwuMzYtLjE1di0zLjY4Wm0yOS42Mi01LjAyYy0uMjQgMC0uNDYuMDMtLjYzLjFhLjguOCAwIDAgMC0uNC40MmMtLjEuMi0uMTUuNS0uMi44Ni0uMDQuMzctLjA2Ljg2LS4wNiAxLjQ2djEuODRjMCAuNzMuMDIgMS4zLjA2IDEuNzQuMDUuNDQuMS43OC4yIDEgLjA5LjI0LjIyLjQuMzkuNDcuMTUuMDguMzcuMS42NC4xcy40OC0uMDMuNjQtLjFjLjE4LS4wOC4zLS4yMy40LS40Ni4xLS4yMy4xNS0uNTguMi0xIC4wMy0uMzguMDQtLjg3LjA1LTEuNDh2LTIuMTFjMC0uNi0uMDEtMS4wOS0uMDYtMS40NmEzLjEgMy4xIDAgMCAwLS4yLS44Ni44Mi44MiAwIDAgMC0uNC0uNDIgMS43IDEuNyAwIDAgMC0uNjMtLjFabTE2Ljk0IDBjLS4yNCAwLS40Ni4wMy0uNjMuMWEuODYuODYgMCAwIDAtLjQxLjQyYy0uMS4yLS4xNS41LS4yLjg2LS4wMy4zMi0uMDUuNzItLjA1IDEuMjF2Mi4wOWMwIC43My4wMSAxLjMuMDYgMS43NC4wNC40NC4xLjc4LjE5IDEgLjEuMjQuMjIuNC40LjQ3LjE0LjA4LjM2LjEuNjQuMS4yNiAwIC40OC0uMDMuNjQtLjEuMTYtLjA3LjMtLjIzLjQtLjQ2LjA5LS4yMy4xNC0uNTguMTktMSAuMDQtLjQuMDUtLjg4LjA2LTEuNDh2LTIuMTFjMC0uNi0uMDItMS4wOS0uMDYtMS40NmEzLjEgMy4xIDAgMCAwLS4yLS44Ni44LjggMCAwIDAtLjQtLjQyIDEuNSAxLjUgMCAwIDAtLjYzLS4xWk0xNy4wNy4xN2MxIDAgMS44NS4zIDIuNTEuOS42Ny41OCAxIDEuMzggMSAyLjM3IDAgMS0uMzQgMS43Ny0xIDIuMzUtLjY3LjU4LTEuNTIuODUtMi41MS44NS0xIDAtMS44NS0uMjctMi41Mi0uODUtLjY3LS41OC0xLTEuMzUtMS0yLjM1cy4zNC0xLjc5IDEtMi4zOGMuNjctLjU5IDEuNTItLjg5IDIuNTItLjg5WiIvPjwvc3ZnPg==")
}

Themed messages

You can easily define custom themes for specific liveblog messages. Tags can be used to control which messages should use a particular theme — for example, for sponsored posts.

In the following example, we use a tag with the identifier tickaroo-theme. This identifier enables you to target specific tagged messages via CSS. These messages automatically receive the class .tik4-event--tag-tickaroo-theme, allowing us to style them using Tickaroo’s brand colors.

.tik4-event--tag-tickaroo-theme.tik4-event.tik4-event.tik4-event {
  --t4-bg: #343434;
  --t4-primary: #343434;
  --t4-secondary: #343434;
  --t4-txt: #FFFFFF;
  --t4-muted: #FFFFFF;
  --t4-link: #343434;
  
  --t4-ev-bg: #e01a4f;
  --t4-ev-h-b-bg: #343434;
  
  --t4-ff-b: #FFF;
  --t4-ff-bg: rgba(0,0,0, 0.15);
  
  --t4-sfc-bg: rgba(0,0,0, 0.1);
  --t4-sfc-b: rgba(0,0,0, 0.2);  
}

Example: Liveblog with themed messages and ad examples

💡 Tip: You can even embed a custom font using a base64-encoded font file.