Skip to content

Advanced Options ‐ CSS Class

SKB-CGN edited this page Feb 16, 2024 · 2 revisions

English

Explanation of the CSS Classes

General:
This specified class is always assigned to the element, no matter what state the element has

Source above threshold (positive):
The specified class is assigned to the element only if the value is above the threshold and is positive

Source below threshold (positive):
The specified class is assigned to the element only if the value is below the threshold and is positive

Source above threshold (negative):
The specified class is assigned to the element only if the value is above the threshold and is negative

Source below threshold (negative):
The specified class is assigned to the element only if the value is below the threshold and is negative

Example with normal CSS properties

Create a new class inside the CSS Panel and assign the class to the CSS field described before.

.element_red {
    fill: #c20b33 !important;
}

Example with icon change CSS properties

Create a new class inside the CSS Panel and assign the class to the CSS field described before.

.element_other_icon path {
    /* 
    Icons from https://icon-sets.iconify.design/
    Find the icon, click on it, click on SVG a little further down, copy the text from "d" there and paste it in the example
    */
    d: path('M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16M15 7H9V10H15V7M15 11.5H9V14.5H15V11.5Z');
}

Deutsch

Erklärung der CSS-Klassen

Allgemein:
Dies angegebene Klasse wird dem Element immer zugewiesen, egal, welchen Zustand das Element hat

Quelle über Schwelle (positiv):
Die angegebene Klasse, wird dem Element nur zugewiesen, wenn der Wert über der Schwelle liegt und positiv ist

Quelle unter dem Schwellenwert (positiv):
Die angegebene Klasse, wird dem Element nur zugewiesen, wenn der Wert unter der Schwelle liegt und positiv ist

Quelle über Schwelle (negativ):
Die angegebene Klasse, wird dem Element nur zugewiesen, wenn der Wert über der Schwelle liegt und negativ ist

Quelle unter dem Schwellenwert (negativ):
Die angegebene Klasse, wird dem Element nur zugewiesen, wenn der Wert unter der Schwelle liegt und negativ ist

Beispiel mit normalen CSS-Eigenschaften

Erstellen Sie im CSS-Panel eine neue Klasse und weisen Sie die Klasse dem zuvor beschriebenen CSS-Feld zu.

.element_red {
     fill: #c20b33 !important;
}

Beispiel mit CSS-Eigenschaften zum Ändern von Symbolen

Erstellen Sie im CSS-Panel eine neue Klasse und weisen Sie die Klasse dem zuvor beschriebenen CSS-Feld zu.

.element_other_icon path {
     /*
     Symbole von https://icon-sets.iconify.design/
     Suchen Sie das Symbol, klicken Sie darauf, klicken Sie etwas weiter unten auf SVG, kopieren Sie den Text von „d“ dort und fügen Sie ihn in das Beispiel ein
     */
     d: path('M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.3 3C18 4,6 17,4 4 16,67 4M15 16H9V19H15V16M15 7H9V10H15V7M15 11,5H9V14,5H15V11 .5Z');
}