Display Settings and Colors
The Display tab
💁 since version 1.7 The Display tab in the DinOdds settings holds site-wide defaults. They apply to every odds table, from the shortcode and the block, unless that table sets its own value.
| Setting | Options | Default |
|---|---|---|
| Style | Style 1 (scrolling columns), Style 2 (compact list) | Style 1 |
| Links layout | Top, Inline (hidden when Style 2 is selected) | Top |
| Odds type | Spread, Moneyline, Total | Spread |
| Type selector | Let visitors switch between spread, moneyline and total | On |
| Highlight colour | Used for the type selector and the loading animation. Leave empty for the default | Empty |
A live preview next to the form shows the effect of your choices. Click Save defaults to apply them. Tables that set an attribute (for example style="2") keep their own value.
Highlight colour
The highlight colour is a hex value like #8f51ff. It sets the type selector background and the highlight colour. It is applied only on pages that show an odds table.
Table Colors with CSS
Table colors are selected as neutral as possible to fit as many website styles as possible without any changes. If you need to, you can customize them with CSS.
All colors used correspond to CSS custom properties:
.df-odds {
--color-settings--bg: #4a5568; /* settings dropdown background color */
--color-settings--fg: #ffffff; /* settings dropdown text color */
--color-bookie--bg: #cbd5e0; /* bookie logo and link background color */
--color-date--bg: #cbd5e0; /* date row background color */
--color-not-found--bg: #cbd5e0; /* no matches section background color */
--color-time--bg: #e2e8f0; /* time column background color */
--color-away--bg: #f7fafc; /* away row background color */
--color-home--bg: #edf2f7; /* home row background color */
--color-arrow--bg: #cbd5e0; /* left & right arrows background color */
--color-arrow--fg: #111; /* left & right arrows icon color */
}You can overwrite any of the values by copying them into your theme's Additional CSS section (Appearance → Customize → Additional CSS). No need to copy all the properties, only the ones you want to change.
For example, to change the "date" color copy only:
.df-odds {
--color-date--bg: #cbcbcb;
}To style one table only, give it a class (the shortcode's class attribute, for example class="home") and target .df-odds--home.
Font Color
Font color of the table is inherited from your theme styles, whatever the font color of the table's parent container is, it will be inherited. To overwrite it, add the below rule:
.df-odds {
color: #111; /* change this to any color you want */
}