Overlay Themes

Our default Overlay is based on the real life 2017 F1 Overlay design and allows a huge amount of user customisation. You can find the starting point for this customisation here: Editing CSS Styles and join our Discord server for help with more ambitious customising.

In addition to this we are now pleased to release pre-made custom themes to our customers! Each custom theme can be simply applied to your overlay by adding just a single line of code. Check out what we have available on the next pages.

Tech Support & Community Discord

For more help with adding these custom themes or making your own adjustments please make sure you join us in our Discord support server!

NASCAR 2020 Theme

Our latest redesign isn’t strictly a “Theme” but 3 new NASCAR 2020 components that you can either use direct from this project file: https://www.sdk-gaming.co.uk/wp-content/uploads/NASCAR.zip or integrate these individual components into your existing project file.

Each component exactly replicates the NASCAR 2020 broadcast overlay. Find more information about each component and download links for them here:

NASCAR Ticker 2020

NASCAR Tower 2020

NASCAR Driver Details 2020

FIA World Rallycross Theme

This theme replicates the overlay theme used by the FIA World Rallycross broadcast!

To apply this theme to your overlay simply add this to your Initial Variable Values:

Overlay.Theme = "themes/irx.css";

We recommend removing any code in your Style Overrides to ensure there are no conflicts when loading this theme.

If you wish to make any style adjustments to this theme you can find the full CSS code to inspect here: https://livetiming.sdk-gaming.co.uk/themes/irx.css and copy any code you wish to edit to your Style Overrides.

Formula 3.5 Theme

This theme was originally created for the Apex Racing TV broadcast of the iRacing Formula 3.5 Championship. It replicates the overlay theme used by the real life championship in 2015.

To apply this theme to your overlay simply add this to Initial Variable Values:

Overlay.Theme = "themes/fr35.css";

We recommend removing all existing code in your Style Overrides to ensure there are no conflicts.

For this theme, extensive user customisation is not recommended, however you can easily change the colour of the Driver Position Boxes by adding the below code to your Style Overrides and replacing the red and darkred values with colours of your choice:

.overlay {
--driver-position-background-color: red;
--driver-position-border-color: darkred;
}

To use your own logos within the overlay still then also add the following to Style Overrides entering your own url’s:

/* 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();
top: 10px;
right: 10px;
width: 350px;
}

 

Although we don’t recommend further customisation to this theme you can find the full CSS code to inspect here: https://livetiming.sdk-gaming.co.uk/themes/fr35.css

Square Theme

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

We recommend keeping the code in your current Style Overrides as this theme only affects the Driver Position Boxes.

If you wish to make any style adjustments to this theme you can find the full CSS code to inspect here: https://livetiming.sdk-gaming.co.uk//themes/white-box.css and copy any code you wish to edit to your Style Overrides.

Rounded Square Theme

This is a simple theme that sets all your Driver Position boxes through the overlay to white and square shaped with rounded top and bottom rows.

To apply this theme to your overlay simply add this to your Initial Variable Values:

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

We recommend keeping the code in your current Style Overrides as this theme only affects the Driver Position Boxes.

If you wish to make any style adjustments to this theme you can find the full CSS code to inspect here: https://livetiming.sdk-gaming.co.uk//themes/white-rounded.css and copy any code you wish to edit to your Style Overrides.

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

Sign up now!

30 Day Access

£ 8.33

Per Month Ex-Vat

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

Sign up now!

1 Year Access

£ 83.33

Per Year Ex-Vat

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

Sign up now!

© 2019 SDK Gaming. All Rights Reserved