Rennbildschirm-Designer

Was ist der Rennbildschirm-Designer?

Seit SmartRace 7.0 hast Du die Möglichkeit, bei Rennbildschirmen, die Du in SmartRace erstellt hast, CSS-Code hinzuzufügen. CSS (Cascading Style Sheets) ist eine Design-Beschreibungssprache, die für die Gestaltung von Websites genutzt wird. In SmartRace wird sie ebenfalls verwendet.

Der Rennbildschirm-Designer stellt Dir eine grafische Oberfläche zur Verfügung, mit dessen Hilfe Du eigenes CSS für SmartRace entwickeln kannst. Dein CSS kannst Du anschließend in SmartRace einfügen und verwenden.

So verwendest Du den Rennbildschirm-Designer

Rufe den Rennbildschirm-Designer zunächst mit dem Button unten auf. Dazu solltest Du unbedingt einen PC oder einen Laptop verwenden. Auf Geräten ohne Tastatur und Maus kannst Du den Designer nicht sinnvoll nutzen.

Rennbildschirm-Designer aufrufen

In Deinem Browser öffnet sich nun folgender Bildschirm:

1. Zuerst solltest Du den angezeigten Beispielbildschirm so einstellen, dass er dem entspricht, was Du in SmartRace im Widget „Zeitentabelle“ eingestellt hast. Dazu kannst Du die Schalter oben links im Kasten „Einstellungen Zeitentabelle“ verwenden.
2. Anschließend kannst Du mithilfe der Entwicklertools Deines Browsers (Aufruf in der Regel über F12, Strg + Umschalttaste + J (Windows/Linux) oder Cmd + Option + I (macOS) die Zeitentabelle untersuchen und herausfinden, welche Elemente mithilfe welcher CSS-Selektoren gestaltet werden können. Ein paar Tipps dazu, wie Du passendes CSS schreiben kannst, findest Du unter „CSS-Tricks“ oben rechts im Designer.
3. Jedes mal, wenn Du das CSS in dem kleinen Editor auf der linken Seite veränderst, aktualisiert sich die Vorschau auf der rechten Seite.
4. Du kannst Deine Arbeit jederzeit unterbrechen und später fortsetzen. Der Designer lädt immer automatisch den neusten Stand (solange Du ihn wieder vom gleichen Gerät aus aufrufst). Wenn Du einen Stand erreicht hast, kannst Du auch über den Knopf „Share“ unten links eine ID erzeugen, unter der Du Dein Design jederzeit wieder aufrufen kannst.
5. Wenn Du zufrieden bist, kannst Du Dein CSS über den Knopf „CSS kopieren“ in die Zwischenablage kopieren und dann in SmartRace bei Deinem Rennbildschirm einfügen. Drücke dazu unten links den Knopf zum Verwalten Deiner Rennbildschirme, dann „Rennbildschirme verwalten“ und dann den Bearbeiten-Knopf am entsprechenden Rennbildschirm. Im Bearbeitungsbildschirm fügst Du Dein CSS dann in das Feld „Benutzerdefiniertes CSS“ ein. Fertig!

Sollte etwas nicht wie gewünscht funktionieren, wende Dich gerne an den Support.