Theming customization allows you to tailor the appearance of Bet Concierge widgets to meet specific needs and preferences. In the context of the Bet Concierge widget, customization refers to the ability to modify the default styling of the widget by applying custom CSS properties to the various HTML elements that make up the widget.
The 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: All custom classes must be nested within the .sr-bb.sr-betConcierge selector class. This ensures that the custom styles only apply to that widget and not to other elements on the page.
#Container
| Class |
|---|
| srct-bc-header |
| srct-bc-header-globe |
| srct-bc-header-title |
| srct-bc-header-button |
#Chat
#Composer
| Class |
|---|
| srct-bc-composer |
| srct-bc-input-wrapper |
| srct-bc-textarea |
| srct-bc-post-button |
| srct-bc-post-button-disabled |
| srct-bc-disclaimer |
#Coverage
| Class |
|---|
| srct-bc-coverage |
| srct-bc-chart-default-background |
| srct-bc-no-coverage |
| srct-bc-partial-coverage |
| srct-bc-full-coverage |
| srct-bc-extended-coverage |
#Intro
| Class |
|---|
| srct-bc-intro |
| srct-bc-intro-messages-limit |
#Scoreboard
| Class |
|---|
| srct-bc-scoreboard |
| srct-bc-scoreboard-result-time |
#Match Clock
| Class |
|---|
| srct-bc-match-clock |
| srct-bc-match-clock-live |
#Match Date
#Conversation Starters
| Class |
|---|
| srct-bc-conversation-starters-stacked-card |
| srct-bc-conversation-starters-card-icon |
| srct-bc-conversation-starters-card-title |
#Terms
| Class |
|---|
| srct-bc-terms-icon |
| srct-bc-terms-title |
| srct-bc-terms-text |
| srct-bc-terms-more |
| srct-bc-terms-decline |
| srct-bc-terms-agree |
#Match Info
| Class |
|---|
| srct-bc-match-info |
| srct-bc-match-info-status |
#Team
| Class |
|---|
| srct-bc-team |
| srct-bc-team-name |
#Message
| Class |
|---|
| srct-bc-message-info |
| srct-bc-message-question |
| srct-bc-message-answer |
| Class |
|---|
| srct-bc-scroll-to-bottom-button |
#Loader
| Class |
|---|
| srct-bc-loader |
| srct-bc-loader-icon |
#Error
| Class |
|---|
| srct-bc-error |
| srct-bc-error-action |
#Toast
| Class |
|---|
| srct-bc-toast |
| srct-bc-toast-button |
| srct-bc-toast-success-icon |
| srct-bc-toast-success-text |
| srct-bc-toast-error-icon |
| srct-bc-toast-error-text |
#Drawer
| Class |
|---|
| srct-bc-drawer |
| srct-bc-drawer-background |
| srct-bc-drawer-icon |
| srct-bc-drawer-close-button |
#Suggested Questions
| Class |
|---|
| srct-bc-suggested-questions-header |
| srct-bc-suggested-questions-item |
| srct-bc-suggested-questions-close |
| Class |
|---|
| srct-bc-report-button |
#Report
| Class |
|---|
| srct-bc-report |
| srct-bc-report-response |
| srct-bc-report-reason |
| srct-bc-report-textarea |
| srct-bc-report-submit |
| srct-bc-report-reason-icon |
| srct-bc-report-reason-icon-selected |
| srct-bc-report-label |
#Suggested Bets
| Class |
|---|
| srct-bc-suggested-bets |
| srct-bc-suggested-bets-button |
| srct-bc-suggested-bets-header |
| srct-bc-suggested-bets-toggle-button |
| srct-bc-suggested-bets-markets |
| srct-bc-suggested-bets-market-name |
| srct-bc-suggested-bets-market-pin |
| srct-bc-suggested-bets-outcome |
| srct-bc-suggested-bets-selected-outcome |
| srct-bc-suggested-bets-outcome-name |
| srct-bc-suggested-bets-outcome-odds |
| srct-bc-suggested-bets-recommended |
#Custom Bet
| Class |
|---|
| srct-bc-custom-bet |
| srct-bc-custom-bet-header |
| srct-bc-custom-bet-odds |
| srct-bc-custom-bet-add-to-bet-slip |
| srct-bc-custom-bet-add-to-bet-slip-button |
| srct-bc-custom-bet-market |
| srct-bc-custom-bet-market-name |
| srct-bc-custom-bet-outcome-name |
#Insights
| Class |
|---|
| srct-bc-insights |
| srct-bc-insights-content |
| srct-bc-insights-icon |
| srct-bc-insights-title |
#Loading
| Class |
|---|
| srct-bc-loading-globe |