The Logo Component will display your logos on the overlay.
Components are imported directly from within iRacing Live Timing. In iRacing Live Timing press F4 to open the Remote Control Tab and then F2 to enter Edit Mode. Click the Import Library button and select from the list the component you want to import. The component will then be imported to your Remote Control Tab in the first available empty space (often below existing components).
For a full list of all available Overlay Components please check out the Overlay Component List
Display Data
- 1 – Show/Hide – Display or hide the primary logo (displays in top right by default).
- 2 – Show/Hide – Display or hide the second logo (displays in top left by default).
- 3 – Show/Hide – Display or hide the third logo (displays in top right by default).
- 4 – Show/Hide – Display or hide the fourth logo (displays in top left by default).
CSS Style Overrides
To change logo image and size, edit the following rules in Style Overrides:
.overlay>.logo>.logo-image {
background-image: url(https://www.sdk-gaming.co.uk/wp-content/uploads/2017/08/SDK-Gaming-logo-White-Small.png);
}
.overlay>.logo2>.logo-image {
background-image: url(https://www.apexracingtv.com/wp-content/uploads/vrs-logo-white.png);
}
.overlay>.logo3>.logo-image {
background-image: url(images/SDK-Gaming-logo.png);
}
.overlay>.logo4>.logo-image {
background-image: url(images/SDK-Gaming-logo.png);
}
To replace the default SDK Gaming logo simply replace the contents of url( ) with the address for a direct link to your image. To adjust the size of your logo change the width and height values. The logo size is computed to fit the width/height box while keeping the same aspect ratio.
To change the logo position edit the left/right and top values in the code below:
.overlay>.logo {
right: 10px;
top: 10px;
width: 600px;
height: 500px;
}
.overlay>.logo2 {
left: 10px;
top: 10px;
width: 600px;
height: 500px;
}
.overlay>.logo3 {
right: 10px;
top: 100px;
width: 600px;
height: 500px;
}
.overlay>.logo4 {
left: 10px;
top: 100px;
width: 600px;
height: 500px;
}
You can also rotate multiple logos in the same location. The following example is to rotate two logos within the Logo1 location:
.overlay>.logo>.logo-image {
width: 528px;
height: 300px;
background-image: url(https://www.sdk-gaming.co.uk/wp-content/uploads/2017/08/SDK-Gaming-logo-White-Small.png);
animation: logo-1-2 120s linear infinite;
}
.overlay>.logo>.logo-image-2 {
width: 528px;
height: 300px;
background-image: url(https://www.apexracingtv.com/wp-content/uploads/vrs-logo-white.png);
animation: logo-2-2 120s linear infinite;
}
The following example is to rotate 4 logos within the Logo3 location:
.overlay>.logo3>.logo-image {
width: 528px;
height: 300px;
background-image: url(https://www.sdk-gaming.co.uk/wp-content/uploads/2017/08/SDK-Gaming-logo-White-Small.png);
animation: logo-1-4 120s linear infinite;
}
.overlay>.logo3>.logo-image-2 {
width: 528px;
height: 300px;
background-image: url(https://www.apexracingtv.com/wp-content/uploads/vrs-logo-white.png);
animation: logo-2-4 120s linear infinite;
}
.overlay>.logo3>.logo-image-3 {
width: 528px;
height: 300px;
background-image: url(https://www.apexracingtv.com/wp-content/uploads/Full-Logo-High-Res-Dark-Background.png);
animation: logo-3-4 120s linear infinite;
}
.overlay>.logo3>.logo-image-4 {
width: 528px;
height: 300px;
background-image: url(https://www.apexracingtv.com/wp-content/uploads/2019/09/Full-Logo-High-Res-TV-Test.png);
animation: logo-4-4 120s linear infinite;
}
In the above example, here are the values to adjust as you want:
logo-image-2 – The name of this logo.
logo-1-2 – The first digit represents the position of this logo within the animation, the first logo in this example. The second digit represents the total number of logos in the animation, 2 in this example.
120s – The total animation time in seconds.
For more than 4 logos rotating please reach out in Discord for assistance.