Overlay – FAQ

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

.driver-wrapper.close>.driver {
    background: orange;
}

.driver-wrapper.very-close>.driver {
    background: darkorange;
}

In this example drivers that are within 1 second of each other will be highlighted Orange and drivers that are within 0.5 seconds of each other will be highlighted Dark Orange.

If you only want one of those situations to apply, then only copy the rule you want to use. Any web color, Hex color or RGB color can be used as the background value.

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

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

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

• 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.

• 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();
}

• 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

• 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.

• 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";

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

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

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

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

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

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.

• 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

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

• 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

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

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

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

Overlay.HideOnDisconnect = "True";

• 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.