Creating a Sponsored Post Using Tags

This guide explains how to mark individual liveblog messages as sponsored content using the tag system and custom CSS styles. If you have sponsors for your liveblog, this can be an interesting way to display their branding.

Overview

Sponsored posts are regular liveblog messages that carry a specific tag to identify them as advertiser-funded content. In this example we add custom styling and a logo to those messages

Step 1: Create a Tag

Go to the settings page within a liveblog and make sure “Use tags” is checked. Click “Manage tags” to navigate to the tags overview page.

Add the tag you want to use to identify liveblog messages as sponsored posts. It is important to set not only a tag name but also an identifier. The identifier allows you to target the post via CSS.

You can also choose to add the sponsor’s icon to the tag or hide the tag itself from readers.

In this example, we use an identifier of sponsored-by-tickaroo. Tagged messages automatically receive the CSS class .tik4-event--tag-sponsored-by-tickaroo.

Step 2: Add the Tag to a Liveblog Message

Open the desired liveblog message in the editor and apply the tag you created in Step 1.

Step 3: Add Your CSS

To add the CSS, we recommend using a CSS Style connected to your theme within the Tickaroo liveblog platform (admin rights required).

Alternatively, you can add the CSS directly on your own website.

To display a “sponsored by” label and logo, apply styles to the :after pseudo-element of .tik4-event__body. The logo below is base64-encoded, but you can also reference an external URL to your logo asset.

.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==")
}

Add Themeing

To change the colors of your sponsored post and make it stand out, overwrite the color variables:

.tik4-event--tag-sponsored-by-tickaroo.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);  
}

Notes