Editing CSS Styles

In iRacing Live Timing open the Configuration Panel by pressing F3 or click the burger menu icon at the top right of the screen. Use the Load Project option to load your project file, connect to your room and check that your overlay is displaying correctly.

In the Overlay section of the Configuration Panel click in the Style overrides field and click on the 3 dots on the right hand side to open the Style overrides window.

The Style overrides window now displays a selection of exposed code with descriptions to allow you to customise the look and style of your overlay. The code is all colour coded:

Green contained in /* */- A description of what the adjacent code means, has no effect on the code itself.
Red – Designates a section of code relating to a component of the overlay.
Green and light blue – The CSS property. What it is you are adjusting.
Blue – The CSS value. How you are adjusting the CSS property.

Let’s look at some examples of basic CSS edits you can make on the next page!

Tech Support & Community Discord

If you haven’t already followed the steps in the Live Streamer User Manual or the Live HUD User Manual then make sure you go through it before you come back to read up on how to change the appearance of your overlay! If you have any other questions make sure you join us in our Discord support server!

Size and Position

For our example we will re-position and then resize the Battle Box Component to allow space for the streamer to place a web cam in the bottom right hand corner of the overlay.

The first pair of images shows the default layout of the Battle Box Component in the bottom right hand corner of the overlay with the exposed default Style Overrides code that controls how the Component will be displayed.

We can see that we have a CSS property called Bottom with a value of 40px. Increasing this value will increase the number of pixels between the bottom of the overlay and the Component.

As you can see in the second pair of images, I chose a value of 300px and the position of the Battle Box is reflected in the overlay.

Next I have decided the Battle Box is a bit bigger than I would like so I will resize it. To do this I will look at the Transform property and specifically the TranslateZ value. By default this is set to 0px, if I enter a positive value the size of the Component will increase and a negative value will reduce the size.

After choosing a value of -350px I am happy with the size now but the Battle Box is no longer sitting flush against the right edge of the overlay. This is because the top left corner of the Component will remain in the same position during resizing pulling the right hand side away from the edge.

So after further experimenting I have settled on a Right value of -120px to bring it back to the edge of the screen.

Colours

We have a few lines of code that will quickly allow colour changes for the majority of components from a single change of value:

.overlay {
    --driver-background-color: rgba(0, 0, 0, 0.4); /* Background of driver names*/
    --driver-background-color-darker: rgba(0, 0, 0, 0.32); /* Alternating darker background driver names*/
    --driver-selected-color: #00FF00; /* Selected driver icon*/
    --driver-offtrack-color: #FF0000; /* Offtrack driver icon*/
    --driver-position-background-color: #707070; /* Driver position icon*/
    --driver-position-text-color: white; /* Text of driver position icon*/
    --text-color: white; /* Text of driver names*/
}

Colour values can be entered in several different ways:

Name – White, green, aqua etc.
Hex Code – Consists of “#” symbol and a red, green and blue value.
RGB Code – Consists of a red, green, blue and opacity value.

Read more about web colors here: Web Colors

Experiment

This is still just the very tip of the iceberg of what you can do with Style Overrides.

Click the question mark in the top right of the component you want to work on in your Remote Control Tab or find it here https://www.sdk-gaming.co.uk/overlay-component-list/ to jump straight to the web page for that component. On this page you will find example CSS code you can copy to make basic adjustments. You can find the full list of CSS Styles available here, these control every single element of how the overlay looks. You can copy and paste any sections of this code into your style overrides and experiment with how they affect your overlay.

We look forward to seeing what you come up with!!

14 Day Free Trial

£ 0

14 Days

New Customers Only
iRacing Live Timing
iRacing Live HUD
iRacing Live Streamer
Discord Customer Support

Try now!

Choose Your Rolling SubscriptionMost Popular

£ ?

£8.33 per Month Ex-Vat
or £83.33 per Year Ex-Vat

iRacing Live Timing
iRacing Live HUD
iRacing Live Streamer
Discord Customer Support

30 Day Access

£ 8.33

Per Month Ex-Vat

iRacing Live Timing
iRacing Live HUD
iRacing Live Streamer
Discord Customer Support

1 Year Access

£ 83.33

Per Year Ex-Vat

iRacing Live Timing
iRacing Live HUD
iRacing Live Streamer
Discord Customer Support