Zum Hauptinhalt springen

Custom CSS Variablen

Über sogenannte Custom CSS-Variablen, welche für jeden in einem Dashboard verwendeten Elementarbaustein einstellbar sind, lässt sich noch tiefgreifender definieren, wie die jeweiligen Elemente gestylt werden sollen. Dies erweitert die Anpassungsmöglichkeiten durch die Verwendung von Themes erheblich.

Grundprinzip​

In einem Dashboard können Custom CSS-Variablen definiert werden, die auf verschiedenen Ebenen angewendet werden können:

  • Dashboard-Ebene: Globale Variablen, die für das gesamte Dashboard gelten.
  • Seiten-Ebene: Variablen, die nur für eine bestimmte Seite gelten.
  • Panel-Ebene: Variablen, die nur für ein bestimmtes Panel gelten.
  • Template-Elemente: Variablen, die nur für ein spezifisches Element gelten.

Die Custom Variables werden im Dashboard-Designer zugewiesen und können anschließend in Themes verwendet werden, um das Styling der Elemente zentral zu steuern.

Beispiel Anwendungsfall: Custom Variablen für Button Theming​

Normalerweise erhalten alle Buttons über die Themes den gleichen CSS Style. Es mag aber Fälle geben, in denen man auf seinem Dashboard unterschiedliche Kategorien von Buttons mit unterschiedlichen Styles, wie einer anderen Hintergrundfarbe, darstellen möchte. In unserem Beispiel sollen wichtige Buttons als "Primary" mit einer kräftigen Farbe und unwichtigere Buttons als "Secondary" mit einer helleren Farbe gekennzeichnet werden.

Hier kann man eigene Custom Variablen zur Unterscheidung nutzen und diese ins Theme integrieren. Wie das geht, wird in den folgenden Schritten gezeigt:

Vorgehensweise​

  1. Erstellen eines Dashboards
    Beginnen Sie mit dem Erstellen eines neuen Dashboards, siehe Mini-Tutorium: Einfaches Dashboard bauen.

  2. Hinzufügen von Template-Elementen oder Erstellen neuer Elemente
    Fügen Sie Ihrem Dashboard bestehende Template-Elemente hinzu oder erstellen Sie neue, siehe Vorlage anlegen.

    Dashboard mit Template-Buttons

  3. Zuweisen der Custom CSS Styles
    Im Dashboard-Designer können Sie Custom CSS-Styles definieren und Variablen zuweisen, diese Variablen können in Ihren CSS-Styles referenziert werden und bieten somit eine flexible Möglichkeit, das Styling zu steuern. Diese können auf der Ebene des Dashboards, der Seite, des Panels oder der einzelnen Template-Elemente erfolgen.

    Die Syntax zur Definition einer Custom Variable lautet:

    --variablen-name: wert;

    Beispiel für die Definition einer Custom Variable:

    --button-primary-color: #e74c3c;

  4. Verwendung der Custom Variables in den CSS-Styles der Buttons: Man referenziert in den CSS-Styles der Buttons die Custom Variables mithilfe der Funktion var(), ohne ihnen an dieser Stelle einen Wert zuzuweisen. Die eigentliche Definition der Custom Variables erfolgt später im Reiter "Dashboard und Themes" (siehe Punkt 5).

    --button-background: var(--button-primary-color)
    --button-hover: var(--button-hover-color)
    --text-text-foreground: var(--button-text-color)

    custom Variable zuweisen

    Dieser Vorgang soll für den button-background bei den „Secondary“- und „Tertiary“-Buttons wiederholt werden.

    • Secondary Button: var(--button-secondary-color)
    • Tertiary Button: var(--button-tertiary-color)
      Hinweis: Man sollte das Dashboard regelmäßig speichern, während man Änderungen vornimmt. Das Speichern des Dashboards, insbesondere bevor man zum Reiter „Dashboards und Themes“ wechselt, stellt sicher, dass das Styling über Themes die aktuellste Version des Dashboards verwendet.

  5. Erstellen oder Aktualisieren eines Themes mit den neuen Variablen
    Wechseln Sie zu Dashboard und Themes, um ein neues Theme zu erstellen oder ein bestehendes zu aktualisieren. Hier können Sie die Werte der Custom Variables zentral definieren.

    Beispiel:

    Im Theme definieren Sie die eigentlichen Farbwerte:

    --button-primary-color: black
    --button-secondary-color: #00CED1
    --button-tertiary-color: #AFEEEE
    --button-hover-color: #38E5E8
    --button-tertiary-text-color: black

    Dadurch wird die Hintergrundfarbe aller Elemente, die diese Variable verwenden, angepasst.

    Theme erstellen

    CSS-Stil hinzufügen
    Hinweis: Einige Variablen im obigen Bild wurden zuvor nicht erläutert, um die Komplexität des Tutorials zu reduzieren. Unten ist eine kurze Übersicht der zusätzlichen Variablen und ihrer Funktionen:

    • --control-text-foreground: Dies ist eine der eingebauten Custom-Variablen, die die Farbe der Textelemente im Dashboard anpasst.
    • --button-hover-color: Dies ist eine weitere eingebaute Custom-Variable, die die Hintergrundfarbe von Buttons festlegt, wenn der Mauszeiger über den Button im Dashboard fährt.
    • --button-tertiary-text-color: Dies ist eine speziell für dieses Tutorial definierte Custom-Variable, um die Lesbarkeit des Textes auf dem Tertiär-Button zu gewährleisten. Die zuvor genannte Variable --control-text-foreground setzt die Farbe aller Textelemente im Dashboard auf Weiß, jedoch wird diese Custom-Variable nur auf das Textelement des Tertiär-Buttons angewendet, sodass der Text einen besseren Kontrast zum Button hat und leichter zu lesen ist.

    Live Preview