Race screen designer

What is the race screen designer?

Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created in SmartRace. CSS (Cascading Style Sheets) is a design description language used for designing websites. It is also used in SmartRace.

The Race Screen Designer provides you with a graphical interface that you can use to develop your own CSS for SmartRace. You can then insert your CSS into SmartRace and use it.

How to use the race screen designer

First, open the race screen designer by clicking the button below. You should definitely use a PC or laptop for this. You cannot use the designer effectively on devices without a keyboard and mouse.

Open Race Screen Designer

The following screen will now open in your browser:

1. First, you should adjust the sample screen displayed so that it matches what you have set in SmartRace in the “Time Table” widget. To do this, you can use the switches at the top left of the “Time Table Settings” box.
2. Then, using your browser’s developer tools (usually accessed via F12, Ctrl + Shift + J (Windows/Linux) or Cmd + Option + I (macOS)), you can examine the time table and find out which elements can be styled using which CSS selectors. You can find a few tips on how to write suitable CSS under “CSS tricks” at the top right of the designer.
3. Every time you change the CSS in the small editor on the left, the preview on the right is updated.
4. You can interrupt your work at any time and continue later. The designer always automatically loads the latest version (as long as you access it again from the same device). Once you have reached a certain stage, you can also use the “Share” button at the bottom left to generate an ID that you can use to access your design again at any time.
5. When you are satisfied, you can copy your CSS to the clipboard using the “Copy CSS” button and then paste it into SmartRace on your race screen. To do this, press the button at the bottom left to manage your race screens, then “Manage race screens” and then the edit button on the corresponding race screen. In the edit screen, paste your CSS into the “Custom CSS” field. Done!

If something is not working as desired, please contact support.