Theming Customization

Theming customization allows you to tailor the appearance of the BET 3-in-1 to meet your specific needs and brand identity. Customization is achieved by applying custom CSS properties to the various HTML elements that make up the widget.

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 are listed below. Note that all custom classes must be nested within the .sr-bb.sr-wl selector class. This ensures that the custom styles only apply to that widget and not to other elements on the page.

For general widget theming (colors, fonts, dark/light mode), see Widget Theming.

#Trigger Button

The main floating button that opens and closes the BET 3-in-1 menu. When a sportId is available, a dynamic modifier class is added in the format srct-3in1-trigger--sport-{sportId}, allowing per-sport styling of the trigger button.

#Container

The wrapper that controls the position of the expanded BET 3-in-1 menu.

#Product Buttons

The pill buttons displayed when the BET 3-in-1 is expanded. Use the base class to style all product buttons at once, or target individual products using their modifier classes.

#Product Button Elements

The inner elements of each product button.

#Product Overlay

The overlay panel that displays the selected product. Includes backdrop, header, and close controls.

#Examples

#Custom Brand Colors

.sr-bb.sr-wl .srct-3in1-trigger {
    background-color: #1a73e8;
}

.sr-bb.sr-wl .srct-3in1-productbutton--virtualstadium {
    background-color: #6c5ce7;
}

.sr-bb.sr-wl .srct-3in1-productbutton--betconcierge {
    background-color: #00b894;
}

.sr-bb.sr-wl .srct-3in1-productbutton--statshub {
    background-color: #fdcb6e;
    color: #2d3436;
}

#Overlay Customization

.sr-bb.sr-wl .srct-3in1-productoverlay__content {
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.sr-bb.sr-wl .srct-3in1-productoverlay__backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.sr-bb.sr-wl .srct-3in1-productoverlay__header {
    background-color: #1a1a2e;
    border-bottom: 1px solid #333;
}

#Per-Sport Trigger Styling

.sr-bb.sr-wl .srct-3in1-trigger--sport-1 {
    background-color: #2ecc71;
}

.sr-bb.sr-wl .srct-3in1-trigger--sport-2 {
    background-color: #e67e22;
}

.sr-bb.sr-wl .srct-3in1-trigger--sport-5 {
    background-color: #9b59b6;
}