Skip to main content

Overlay – FAQ

Overlay Help

How can I make the Timing Tower grouped headers transparent with a class colour glow effect?

Add the following style rules to your Settings / Overlay / Style Overrides:

.overlay>.standings.grouped-header-class-color>.header-wrapper {
    background: none;
    border-top: none;
    border-bottom: 2px solid var(--class-color);
    border-left: 2px solid var(--class-color);
    border-right: none;
    background: none;
}

.overlay>.standings>.header-wrapper>.header {
    font-family: BentonSans-Medium;
    text-shadow: 1px 1px 2px var(--class-color), -1px 1px 2px var(--class-color), -1px -1px 2px var(--class-color), 1px -1px 2px var(--class-color);
}

How can I highlight one or more drivers in the battle box?

Add the following style rule to your Settings / Overlay / Style Overrides:

.overlay>.battle .driver.d123456>.container {
    color: gold;
}

123456 being the iRacing ID of the driver you want to highlight. Several of these rules can be added if needed

How do I change the selected driver position text colour to make it more readable?

  • To change selected driver position text color add the following style rules to your Settings / Overlay / Style Overrides:
.position-displays-selected-driver .position-wrapper>.position {
    color: black !important; 
}

An outline can also be added:

.position-displays-selected-driver .position-wrapper>.position {
    color: white !important; 
    text-shadow: var(--super-fat-text-shadow);
}

How can I customise my Overlay?

  • Variables are used to control what is displayed within your components on your overlay. The full list of available variables can be found at Variables List. Open the settings panel (F3) and paste your amended variables into Initial Variable Values.
  • CSS Style Overrides are used to change how your components look (size, shape, position, color, font, images, animations etc…) in the overlay. Check out Editing CSS Styles for instructions on getting started using your own code.

How can I change the logos displayed in my overlay?

  • Open the settings panel by pressing F3 and go to Overlay / Style Overrides.
  • Add or overwrite the following blocks of text and copy your logo URLs inside the ( ) brackets.
/* Logos */
.overlay {
--header-logo: url();
--left-footer-logo: url();
--left-footer-logo-filter: none;
--right-footer-logo: url();
--right-footer-logo-filter: none;
}
/* Top-right logo */
.overlay > .logo > .logo-image {
background-image: url();
}

How can I resize the complete overlay?

  • To resize the complete overlay the easiest is to draw the overlay on a larger drawing surface then to resize it to fit the actual drawing surface. The following CSS rule is used to divide the size by 1.35 on a 1920 x 1080 display:
.overlay {
    width: 2592px;
    height: 1458px;
    transform: perspective(1000px) translateZ(-350px);
    transform-origin: left top;
}

Where:

2592 / 1920 = 1.35
1458 / 1080 = 1.35
(1000 + 350) / 1000 = 1.35

How can I adjust the size of the timing tower?

  • Go to Settings (F3) / Overlay / Style Overrides and add or replace the following style rule:
.overlay>.standings {
transform: perspective(1000px) translateZ(-350px);
transform-origin: top left;
}
  • In this particular case the scale factor is: 1000 / (1000 + 350) = 74% The idea is to set your eye at 1000px from the screen and to move standings 350px back The scaling origin is set to top left to keep standings aligned when scaled.

How can I display imperial units in my overlay?

  • There are 3 variables that control the global localisation:
Overlay.Localisation.TemperatureUnit        C/F (C)
Overlay.Localisation.SpeedUnit              KPH/MPH (KPH)
Overlay.Localisation.DistanceUnit           m/ft (m)
Overlay.Localisation.VolumeUnit             l/USgal (l)
  • Open your Settings (F3) / Overlay / Initial variable values editor and add the following at the end:
Overlay.Localisation.TemperatureUnit = "F";
Overlay.Localisation.SpeedUnit = "MPH";
Overlay.Localisation.DistanceUnit = "ft";
Overlay.Localisation.VolumeUnit = "USgal";

How can I change the colours of the Driver Position Boxes?

  • Paste the below code into Settings (F3) / Overlay / Style Overrides and adjust the colours either by entering the HEX code of the colour you want or typing the colour name. Find more here:
 .overlay {
--driver-position-background-color: #707070;
--driver-position-text-color: white;
--driver-selected-color: #00FF00;
--driver-offtrack-color: #FF0000;
}

How do I move the NASCAR Ticker up to remove the top bar?

Add the following style rules to your Settings / Overlay / Style Overrides:

.overlay>.nascar-ticker-2020 { grid-template-rows: 0 0 54px 48px 33px; }

How do I add the red/green fade to effect on position changes in the Timing Tower

Add the following style rules to your Settings / Overlay / Style Overrides:

.overlay>.standings>.driver-wrapper.position-gained>.driver>.container::before { opacity: 1; transition: opacity 0.1s; } .overlay>.standings>.driver-wrapper.position-lost>.driver>.container::after { opacity: 1; transition: opacity 0.1s; } .overlay>.standings>.driver-wrapper>.driver>.container::before { position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background: linear-gradient(to left, green, transparent); transition: opacity 0.1s ease 2s; } .overlay>.standings>.driver-wrapper>.driver>.container::after { position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background: linear-gradient(to left, darkred, transparent); transition: opacity 0.1s ease 2s; } .overlay>.standings>.driver-wrapper>.driver>.container>.name-wrapper, .overlay>.standings>.driver-wrapper>.driver>.container>.data-wrapper, .overlay>.standings>.driver-wrapper>.driver>.container>.last-lap-time-wrapper, .overlay>.standings>.driver-wrapper>.driver>.container>.flag-wrapper-7x5, .overlay>.standings>.driver-wrapper>.driver>.container>.pit-wrapper { position: relative; z-index: 2; }

How to display a square or rounded shaped driver position box

We have created a simple theme that sets all your Driver Position boxes through the overlay to white and square shaped. To apply this theme to your overlay simply add this to your Initial Variable Values:

Overlay.Theme = "/themes/white-box.css";

As an alternative this one applies a Rounded Square theme:

Overlay.Theme = "/themes/white-rounded.css";

Find out more about our available themes here

Why is the Battle box in Rel. Lap mode not displaying exactly the same as the iRacing F3 black box?

Our Battle box inner working is very different from the iRacing F3 black box:

  • For cars ahead it displays how long ago these cars were at the exact same position as you are now.
  • For cars behind you it displays how long ago you were at the exact position as they are now.

iRacing calculates relative times based on an average lap they record for each track.

Therefore if you or your opponents are not driving at the same speed as the speed in the average lap recorded by iRacing the relative time displayed in the F3 box is wrong. In a race the speed difference between drivers and reference is small, therefore the error is low, but during pacing or slow outlap the iRacing F3 black box is very wrong.

How can I change the order of weather items?

  • For example to move sky to row 2 add this to your Settings / Overlay / Style overrides:
.overlay>.weather>.sky {
    grid-row-start: 2;
}
.overlay>.weather>.date 
.overlay>.weather>.time
.overlay>.weather>.wind-velocity
.overlay>.weather>.wind-direction
.overlay>.weather>.air-temperature
.overlay>.weather>.air-pressure
.overlay>.weather>.humidity
.overlay>.weather>.sky
.overlay>.weather>.surface-temperature

How can I hide elements of the Weather component?

  • Add the following rules to your Settings / Overlay / Style overrides:

.overlay>.weather>.date {
display: none;
}
.overlay>.weather>.time{
display: none;
}
.overlay>.weather>.wind-velocity{
display: none;
}
.overlay>.weather>.wind-direction{
display: none;
}
.overlay>.weather>.air-temperature{
display: none;
}
.overlay>.weather>.air-pressure{
display: none;
}
.overlay>.weather>.humidity{
display: none;
}
.overlay>.weather>.sky{
display: none;
}
.overlay>.weather>.surface-temperature{
display: none;
}

How can I display the weather panel horizontally?

  • Add the following rules to your Settings / Overlay / Style overrides:

.overlay>.weather {
    grid-template-columns: repeat(27, auto);
}

The base weather component is a grid with 3 columns (icon, value, unit) and 9 rows. With this rule we make it 1 row and 27 columns

How can I remove the start lights from the overlay?

  • To remove the start lights from the overlay the following style rule must be added to your Settings (F3) / Overlay / Style overrides:
.overlay>.start-lights {
display: none;
}

How can I change the colour of the start lights to green?

  • Open the Settings menu (F3) and in Overlay / Style Overrides add or replace the following style rule:
.overlay>.start-lights>.start-lights-wrapper>.start-light>.start-light-on {
background-image: -webkit-radial-gradient(20px 20px, circle cover, lawngreen, limegreen);
}

How can I hide the overlay when iRacing disconnects?

  • This behaviour can be changed by adding the following line in your Settings (F3) / Overlay / Initial Variable Values editor:
Overlay.HideOnDisconnect = "True";

Why are other drivers not showing in the correct position in the Overlay?

  • For iRacing Live Timing to generate the display for your overlay with the correct positions we need to ensure that the exact position of every car is correctly reported from iRacing. In the iRacing client navigate to: Options -> Graphics. Ensure the Max Cars option is set to 63.
  • Navigate to your iRacing My Account page from the members site and ensure DSL, Cable, Fiber, 1Mbit/sec or faster is selected. If this is not set then iRacing can throttle the bandwidth by reducing the number of cars data is sent to us.
Was this article helpful?

Related Articles

Leave a Reply

Need Support?

Join our Community Discord Server
Join Discord