¶ Custom CSS
Custom CSS can be used to change the styling of anything you like in the Manager, but it does require a bit of html/css knowledge to use.
For example to add an icon in place of your Server Name you could use something along these lines:
.navbar-brand {
background-image: url(https://example.com/images/icon.png) !important;
background-size: contain;
background-repeat: no-repeat;
margin-right: -86px;
color: transparent !important;
}
That will set the navbar brand to the image at the URL, hide the server name text and move the navbar along so there isn't a gap, resulting in this:
You can do this to change most things, usually the best approach is to right click then "inspect" whatever you want to change on the page, for example the background of the chat container on the live timings page, you'd see this html in the inspect window:
<div class="card card-body mt-2" id="chat-container">
<div class="card-text chat-message-template"><span id="chat-message-sender" class="chat-message-sender"></span>Game chat!</div>
</div>
You can target the chat-container with custom css to change how it looks. Say you wanted to make the background orange you would add this to the Custom CSS input (IDs are targeted with the hash symbol, classes are targeted with the full stop symbol):
#chat-container {
background: orange;
}
I won't go in to more detail on html/css here, but it should be quite easy to learn enough to get started by searching online!
¶ Examples
Below you can find some examples of Custom CSS. Feel free to use any that you like the look of!
¶ Colors
¶ Papaya 
#EE9A17
.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
background-color: #EE9A17 !important;
border-color: #c47d0e !important;
}
.navbar.bg-primary, .border-primary {
border-color: #c47d0e !important;
}
.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
color: #EE9A17 !important;
}
.dropdown-item:active {
background-color: #EE9A17 !important;
}
#event-title:hover {
color: #c47d0e !important;
}
¶ Papaya Addon - Give this one a try if you're an F1 fan!
Thanks to community member Jack for this one! Designed to be used alongside the Papaya theme above.
.dropdown-item:hover {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 259.76823 142.2' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css' id='style2'%3E.st0%7Bfill:%23ff8000%3B%7D%3C/style%3E%3Cpath class='st0' d='M 218.3 0 C 190.4 0 151.1 8.3 108.6 23.9 70.6 37.7 34.1 55.7 0 77.4 22.2 68.3 66.1 58 102.3 58 c 48.8 0 83.6 18.7 32.2 84.2 C 285.8 43.2 281.7 0.1 218.3 0' id='path6' style='fill:%23ffffff' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 20px;
background-position: left 50%;
}
¶ Rosso Corsa 
#D40000
.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
background-color: #D40000 !important;
border-color: #a10000 !important;
}
.navbar.bg-primary, .border-primary {
border-color: #a10000 !important;
}
.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
color: #D40000 !important;
}
.dropdown-item:active {
background-color: #D40000 !important;
}
#event-title:hover {
color: #a10000 !important;
}
¶ Limeade 
#489107
.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
background-color: #489107 !important;
border-color: #306005 !important;
}
.navbar.bg-primary, .border-primary {
border-color: #306005 !important;
}
.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
color: #489107 !important;
}
.dropdown-item:active {
background-color: #489107 !important;
}
#event-title:hover {
color: #306005 !important;
}
¶ Electric Violet 
#6045FF
.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
background-color: #6045FF !important;
border-color: #3412ff !important;
}
.navbar.bg-primary, .border-primary {
border-color: #3412ff !important;
}
.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
color: #6045FF !important;
}
.dropdown-item:active {
background-color: #6045FF !important;
}
#event-title:hover {
color: #3412ff !important;
}
¶ Make your own!
You can easily make your own colored CSS with the following snippet of SCSS, and then compile it using an online SCSS to CSS compiler such as sass.js.org:
$base-color: #EE9A17; /* enter your color here! */
$border-color: darken($base-color, 10%);
.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
background-color: $base-color !important;
border-color: $border-color !important;
}
.navbar.bg-primary, .border-primary {
border-color: $border-color !important;
}
.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
color: $base-color !important;
}
.dropdown-item:active {
background-color: $base-color !important;
}
#event-title:hover {
color: $border-color !important;
}