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;
}