Frequently Asked Questions

Overlay Help

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

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

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

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 to add a nice red/green fade to transparent 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 shaped driver position box

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

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

Live HUD Help

I have setup iRacing Live HUD but the overlay isn’t displaying?

To use iRacing Live HUD, iRacing must be running in Windowed or Borderless Window. It is currently not compatible with VR. Please ask in our Discord server for more help!

Live Timing Help

When should I use Class name overrides?

Class name overrides are used only in very specific situations:

  • You need more/less/different classes than what iRacing provides.
  • You need to run different class sets at once (for example DP/GTE/GT3 and at the same time as ROOKIE/REGULAR/VETERAN).
  • You need to exclude cars from the standings: when using 1 racing car as the pace car you don’t want it to appear in the standings (set pace car class to None in all Class sets).
  • When using an official race for a league and you want only league drivers to appear in the standings (use class set 2 or 3 and set Class name 2 or 3 for all drivers to display).

Why are other drivers not showing in the correct position in Live Timing and/or the Overlay?

  • For iRacing Live Timing to correctly complete real time position calculations 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 Accountpage 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.

App doesn't start

When I start iRacing Live Timing I get an error message about not being in the “SDK Gaming Roster”?

Your iRacing Live Timing, Live HUD & Live Streamer app license is tied to your iRacing account. When you placed your order you entered your iRacing Customer ID. If you entered this incorrectly or are connected to iRacing with a different iRacing account then the software will not authenticate.

If you are trying to view a replay from a different iRacing member then our software will not authenticate unless they also have a license. We provide a workaround for this; first ensure iRacing Live Timing is running, open an iRacing test session and ensure iRacing Live Timing successfully connects. Then keep iRacing Live Timing open, close your test session and open your replay file.

If you need further assistance please ask in our Discord Support Server.

Why does iRacing Live Timing crash on startup?

The iRacing Live Timing app is only available for Windows 8 and Windows 10 users due to the DirectX Subsystems that are required.