---
title: "Theming Customization"
canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/bet3in1/customization"
markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/bet3in1/customization.md"
last_updated: "2026-04-15T07:36:22Z"
---

# 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](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/theming-widgets.md).

***

## 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.

| Class                                | Customization options                                      |
| :----------------------------------- | :--------------------------------------------------------- |
| `srct-3in1-trigger`                  | `background-color`, `border-radius`, `box-shadow`, `color` |
| `srct-3in1-trigger--sport-{sportId}` | `background-color`, `border-radius`, `box-shadow`, `color` |

## Container

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

| Class                 | Customization options     |
| :-------------------- | :------------------------ |
| `srct-3in1-container` | `left`, `right`, `bottom` |

## 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.

| Class                                     | Customization options                                      |
| :---------------------------------------- | :--------------------------------------------------------- |
| `srct-3in1-productbutton`                 | `background-color`, `color`, `border-radius`, `box-shadow` |
| `srct-3in1-productbutton--virtualstadium` | `background-color`, `color`, `border-radius`, `box-shadow` |
| `srct-3in1-productbutton--betconcierge`   | `background-color`, `color`, `border-radius`, `box-shadow` |
| `srct-3in1-productbutton--statshub`       | `background-color`, `color`, `border-radius`, `box-shadow` |

## Product Button Elements

The inner elements of each product button.

| Class                                  | Customization options               |
| :------------------------------------- | :---------------------------------- |
| `srct-3in1-productbutton__icon`        | `color`                             |
| `srct-3in1-productbutton__title`       | `font-size`, `color`, `font-weight` |
| `srct-3in1-productbutton__description` | `font-size`, `color`, `font-weight` |

## Product Overlay

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

| Class                                | Customization options                         |
| :----------------------------------- | :-------------------------------------------- |
| `srct-3in1-productoverlay__backdrop` | `background-color`, `left`, `right`, `bottom` |
| `srct-3in1-productoverlay__header`   | `background-color`, `border-bottom`           |
| `srct-3in1-productoverlay__title`    | `font-size`, `color`, `font-weight`           |
| `srct-3in1-productoverlay__close`    | `color`, `background-color`, `stroke`         |
| `srct-3in1-productoverlay__content`  | `border-radius`, `box-shadow`                 |

***

## Examples

### Custom Brand Colors

```css
.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

```css
.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

```css
.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;
}
```