> For the complete documentation index, see [llms.txt](https://ontime.gitbook.io/ontime-v1-old/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ontime.gitbook.io/ontime-v1-old/features/custom-styling.md).

# Custom Styling

Use a custom stylesheet to define viewer styles

From Ontime v.1.6.0 and later, you can override the app-defined styles by changing a supplied CSS override file.C:\Users\cv\AppData\Roaming\ontime\styles

**For PC users:**\
On installation, the CSS file is created in the user directory. By default, this would be : `C:/Users/<user>/AppData/Romaing/Ontime/styles/override.css`

**For Linux users:**\
\- On installation, the CSS file is created in the Home directory: `/home/<user>/.Ontime/styles/override.css`

**For Mac users:**\
\- On installation, the CSS file is created in the user directory. By default, this would be in `~/Library/Application Support/Ontime/styles/override.css`

This feature can be toggled on / off at Settings -> Viewers.

### Notes on style overriding

There are a few **CSS variables** which allow for quick customisation of the viewers, this would be the fastest way to get some branding going

```
// COMMENTS FOR CONVENIENCE, REMEMBER THAT COMMENTS ARE NOT ALLOWED IN CSS
:root {
  --background-color-override: #ececec;        // page background (default black)
  --color-override: #101010;                   // text colour (default white)
  --secondary-color-override: #404040;         // secondary text (default transparent white)
  --accent-color-override: #fa5656;            // accent colour (default pink)
  --label-color-override: #6c6c6c;             // label text (default transparent white)
  --timer-color-override: #202020;             // timer colour (default white)
  --card-background-color-override: #fff;      // viewer cards (default gray)
  --font-family-override: 'Open Sans';         // font on all texts (default Open Sans)
  --font-family-bold-override: 'Arial Black;   // font on "clock" and "minimal" (default Arial Black)
  --timer-progress-bg-override: #6c6c6c;       // progress bar background colour (default gray)
  --timer-progress-override: #fa5656;          // progress bar front colour (default pink)
}
```

Alternatively, you are able to **define your own style sheets**. This means that you can fully customise any page as you wish. This implies inspecting the page with the browser devtools to find the relevant selectors

```
// Overriding font for timers
.timer {
  font-family: "Comic Sans MS", serif !important;
}
```