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
                        },
                        close: {
                            icon: "path_to_your_image_file",
                            label: "label_here"
                        },
                    },
                }
            },
        },
        ...restProps,
    });

ID	Icon
send
betshare
suspended
close
close_in_circle
warning
error
report
quote
copy_bet
show_more
arrow_right
arrow_down
spinner
menu
live_feed
lmt_compact
close_negative
toggle
virtual_stadium_button
betslip_empty
chat_empty
navigate

#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
});

Sport	ID	Icon
Soccer	1
Basketball	2
Baseball	3
Ice Hockey	4
Tennis	5
Handball	6
Floorball	7
Golf	9
Boxing	10
Rugby	12
Aussie Rules	13
Bandy	15
Football	16
Snooker	19
Table Tennis	20
Cricket	21
Darts	22
Volleyball	23
Field Hockey	24
Pool	25
Waterpolo	26
Curling	28
Futsal	29
Badminton	31
Bowls	32
Chess	33
Beach Volley	34
Squash	37
Rink Hockey	38
Lacrosse	39
Formula 1	40
Beach Soccer	60
Pesapallo	61
Esport	107
Counter Strike	109
League Of Legends	110
Dota 2	111
Starcraft	112
Hearthstone	113
MMA	117
Call Of Duty	118
Smite	119
Overwatch	121
Rainbow Six	125
Rocket League	128
King Of Glory	134
Gaelic Football	135
Gaelic Hurling	136
Esport Soccer	137
Kabaddi	138
Esport Basketball	153
Basketball 3x3	155
Beach Handball	157
Arena Of Valor	158
Valorant	194
Esport Ice Hockey	195

#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: 'path_to_your_image_file',
                    label: 'label_here'
                }
            }
        }
    },
    ...restProps
});

Event	ID	Icon
Goal	goal
Yellow Card	yellowCard
Red Card	redCard
Corner	corner
Free Kick	freeKick
Throw In	throwIn
Offside	offside
Penalty Kick	penaltyKick
Penalty Shootout	penaltyShootout
Shot on Target	shotOnTarget
1 Point Scored	onePtScored
2 Points Scored	twoPtScored
3 Points Scored	threePtScored
Player Ejected	playerEjected
Timeout	timeout
Game Won	gameWon
Set Point Won	setPointWon
Break Point Won	breakPointWon
Soccer - default	defaultSoccer
Basketball - default	defaultBasketball
Tennis - default	defaultTennis
Default	default