Betting Entertainment Tools

Widgets Demo

Theming customization

Widget comes with pre-existing styling but can be customized by applying custom CSS properties to its different HTML elements. The widget's custom class selectors and supported CSS properties are listed below. Note that all custom classes must be nested within the .sr-bb.sr-insights selector class. This ensures that the custom styles only apply to that widget and not to other elements on the page.

Class Customization options
srct-ins-button background-color, border-radius
srct-ins-button__icon color
srct-ins-button_text color, font-size, font-family
srct-ins-header background-color, border-color, border-width
srct-ins-header__icon color
srct-ins-header__text color, font-size, font-weight
srct-ins-header__arrow color
srct-ins-container background-color, font-family
srct-ins-card background-color, border-radius, border-color, box-shadow
srct-ins-text color, text-decoration
srct-ins-showmore color, font-size
srct-ins-popup background-color, color, font-size, font-family
srct-ins-popup__icon color
srct-ins-cta background-color, border-color
srct-ins-market color, font-size, font-weight
srct-ins-market__icon color
srct-ins-outcome background-color, border-radius, padding
srct-ins-outcome--selected background-color
srct-ins-outcome--disabled background-color
srct-ins-outcome__name color, font-size, font-weight
srct-ins-outcome__value color, font-size, font-weight
srct-ins-bubble-count background-color, border-color, color
srct-ins-bubble-count-text color
srct-ins-bubble-new background-color, border-color, color
srct-ins-robot-icon color

Tournament Bet Insights specific theming classes:

Class Customization options
srct-ins-card-header color, background-color, border-color, font-family
srct-ins-card-header__live-label color, font-weight, font-family
srct-ins-card-header__competitors color, font-size, font-weight
srct-ins-card-header__datetime color, font-size, font-weight
srct-ins-card-header__result color, font-weight