The preferred way to style Widgets is by using style generator on the Sportradar Demo page. Here you can select your desired style, generate code and simply include the generated file on your page.

On the left side of the demo page there are Settings and Styling menu items intended for widget customization. After desired result click on Get code menu item, enter Client ID and click Download code button. Your widget is now generated.

You can also save and export your color theme settings for later import. On the demo page click Styling menu item and select your colors. Click Save button to save your color theme. Theme will now be available in My themes section where you can export it to json file with Export button.

If you need more fine grained control over styling, you can write your own styles, but we encourage you to only style classes with .srt- prefix, which are meant for branding. We offer no guarantee that any other classes or internal widget structure won't change in the future. You also need to use at least 2 class selectors for every rule (.sr-bb is always available on every widget), so they are not overridden with our css normalization rules.

Example:

.sr-bb .srt-base-1 {
    background-color: #eee;
}

All widgets class names are prefixed with reserved sr- or srt- classes. In order to avoid conflict with the rest of your page we have a css normalization rules of form of .sr-bb div {}. CSS isolation will only work as intended if the rest of your page isn't using sr- or srt- prefixes and you don't have rules for element selectors (e.g. div, span).

For your style to take precedence over our styles, keep in mind, to include your own styles after inclusion of our styles on the page.

<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="custom-styles.css">

Showcase

As mentioned earlier we have predefined themes on our demo page. Here are two showcases, light and dark theme, for our Match preview widget.

Light Theme (Match Preview)	Dark Theme (Match Preview 2)
Demo	Demo