# 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](https://docs.affkraft.com/dinodds/plugin-shortcodes) and the [block](https://docs.affkraft.com/dinodds/blocks), 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:

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

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

```css
.df-odds {
  color: #111; /* change this to any color you want */
}
```