Theming

Virtual Stadium offers extensive customization options to match your brand identity and user experience requirements. You can customize the visual appearance through CSS styling, replace default icons with your own branded assets, and even customize text translations.

This guide covers all available customization options for the Virtual Stadium widget.

#Table of Contents

• CSS Styling
• Icon Customization

#CSS Styling

Custom styling offers customers the flexibility to tailor the aesthetics of the Virtual Stadium widget to their precise requirements. This is accomplished by applying custom CSS properties to the widget's underlying HTML components. All customization takes place within the specified scope of the .sr-bb.sr-virtualStadium selector class, enabling customers to effectively alter the default visual presentation.

The srct-vs classes are designated styling classes for the Virtual Stadium. It's recommended to use the CSS properties listed below with these classes. While you can use other CSS properties as well, it's not advised. Using spacing properties like radius | top | padding | margin might cause issues with future updates to your setup.

#Announcement Styling

#Bet Insights Styling

#Bet Slip

#Bet Slip Share

#Channel Navigation

#Color Styling

#Composer

#Countdown Styling

#Drawer Styling

#Flash Bet Styling

#General Styling

#Live Data

#Message

#Navigation Styling

#Progress Bar Styling

#Quote

#Reactions

#Report

#Tag

#User Profile

#Icon Customization

Icons in Virtual Stadium can be replaced with custom icons by providing branding property when integrating widget to a site. All general icons, match event icons such as goal, offside... and sport icons can be customized by inserting icon path (svg or png) as a value.

Default icons can be changed by providing branding prop to widget integration.

Svg files must have id="icon" property on <svg> element.

#Default Icons

    SIR("addWidget", ".sr-widget-1", "virtualstadium", {
        branding: {
            namespaces: {
                virtualStadium: {
                    icons: {
                        send: { // Icon ID from upper table
                            icon: "path_to_your_image_file",
                            label: "label_here" // 'alt' tag value

#Sport Icons

Sport icons can be changed by providing branding prop to widget integration.

Sport Icons are used in Bet slip based on the provided sportId.

SIR('addWidget', '.sr-widget-1', 'virtualstadium', {
    branding: {
        sports: {
            icons: {
                1: 'path_to_your_image_file', // key is a ID from upper table
                2: 'path_to_your_image_file',
                default: 'path_to_your_image_file' // fallback icon for all sports
            }
        }
    },
    ...restProps

#Event Icons

Event icons can be changed by providing branding prop to widget integration.

Event icons are used when the new event is being rendered.

SIR('addWidget', '.sr-widget-1', 'virtualstadium', {
    branding: {
        events: {
            icons: {
                goal: {
                    // Icon ID from upper table
                    icon: 'path_to_your_image_file',
                    label: 'label_here'
                },
                offside: {
                    icon: