ℹ️ This article will be updated as we release more improvements over the coming months.
👩🏻💻 If you need any help with customisation or developing your design, contact your Account Manager.
1. Go to Settings > Widgets
Go to Settings > Widgets and open the Custom CSS tab.
2. Select a widget and an element
Choose the widget you want to target, then the element. The first element is selected automatically, so the editor opens pre-filled with its classes and the preview shows its variations straight away. Add your CSS rules in the editor and check the preview to see how they look.
You may notice that some widgets don't appear in the list, or that the classes you expect aren't shown. This is normal. The widget and element lists are there to make customisation easier, but you're not limited to the entry that matches your widget.
You can add CSS rules under any widget or element. The CSS you add applies to every widget on your site, wherever you add it.
⚠️ Avoid adding !important after every CSS rule
Why?
Automatic injection:
!importantis added automatically to every CSS rule you write.Potential conflict: if you also add
!important, the statement is duplicated. This can break the intended styling and lead to unexpected behaviour.
3. Check your changes
Your changes are saved automatically. To undo them, select Reset element to restore the selected element, or Reset all to restore every element.
4. Done!
bsport widgets will now render with your custom CSS automatically.
⚠️ If the widget looks different on your site from the preview, turn on Keep default styling in step 1 · Website of the Configure tab.
