Skip to content

Customization

This guide is for web developers and anyone familiar with CSS.

Tyles are designed to blend into the existing content of any web page. They will automatically inherit the typography of the page they’re embedded in – such as the fonts, text sizes, and colors.

Sometimes you may need more control over how Tyles are displayed. This guide covers how to customize the appearance of any Tyle by applying custom CSS. This allows you to seamlessly match your Tyles to any brand.

To make this easier for developers, we provide stable CSS class names so you can take full control over the final presentation.

Stable selectors

The following CSS selectors are guaranteed to be consistent and are safe to use for styling.

SelectorElement Description
.tiq-unitThe root div container for a Tyle. Encloses the visible content and accompanying JavaScript.
[data-tiq-unit=”XXXX-XXXX”]Target a specific Tyle on the page using its unique identifier (which is also static).

Note, the .tiq-unit container also has an id parameter which is dynamic and therefore not suitable for targeting.
.tiq-unit-scriptThis selector belongs to a <script> tag which is automatically injected and required for each Tyle to function correctly. It is provided as a courtesy and not intended to be targeted.
.tiq-contentdiv element that contains the visible content of the Tyle.
.tiq-content aTargets all links within the body of the Tyle’s visible content.
.tiq-content imgTargets all images within the body of the Tyle’s visible content.

Best practices

  • Responsive design: Remember to test your customizations on various screen sizes. Use media queries in your stylesheet to ensure your changes look good on both desktop and mobile devices.
  • Optimize images: When creating image Tyles, please upload optimized images. Images should be the same dimensions as the Tyle and saved in a web-safe format (e.g. WebP or PNG). See our performance tips.
  • Future updates: We are committed to maintaining the stable selectors listed in the table above. Relying on these will ensure your customizations are not broken by future updates.

Example customizations

Add the following CSS snippets to your own stylesheet to override the styles of any Tyle.

Text that matches your brand color and font

/* Target the main container to change font and primary text color */
.tiq-unit {
  font-family: "Open Sans", sans-serif;
  color: #2c3e50; /* Dark grey */
}

Change the background color

.tiq-unit {
  background-color: #2f4f4f; /* Dark slate gray */
}

Underline all links

.tiq-content a {
    text-decoration: underline;
}

Add a hover effect to the entire Tyle

.tiq-unit:hover {
    filter: brightness(1.5); /* A brighter shade */
}

Stick to the top-left of the page

.tiq-unit {
    border: 1px solid blue;
    padding: 10px;
    width: 200px;
    top: 0;
    left: 0;
    z-index: 999;
}