Frequently Asked Questions

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

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

• Paste this 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:

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

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

.position-wrapper { clip-path: polygon(0px 0px, 36px 0px, 36px 27px, 0px 27px); } .color-stripe { transform: skewX(0deg) translateX(-7px); } .odd .driver-background { clip-path: polygon(0px 0px, 47px 0px, 47px 27px, 0px 27px); } .color-stripe2-wrapper { transform: skewX(0deg); } .color-stripe3-wrapper { transform: skewX(0deg); }

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