> For the complete documentation index, see [llms.txt](https://ontime.gitbook.io/v2/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/v2/features/custom-styling.md).

# Custom Styling

Use a custom stylesheet to define viewer styles

You can override the app-defined styles by changing a supplied CSS override file. The file is located in a user directory, which changes depending on your Operating System

**For PC users:**\
`AppData/Roaming/Ontime/styles/override.css`

**For Mac users:**\
`Library/Application Support/Ontime/styles/override.css`

**For Linux users:**\
`Home/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: #f3f4f8;        // page background (default black)
  --color-override: #5051f9;                   // text colour (default white)
  --accent-color-override: #23235f;            // accent colour (default pink)
  --timer-color-override: #5051f9;             // timer colour (default white)
  --outdent-background-color-override: white;  // block background (default gray)
}
```

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

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