ℹ️ Ultimate-Funktion. Das CSS-Styling steht ab QuickHMI 14.9.1 mit einer Ultimate-Lizenz zur Verfügung.

Die folgenden Beispiele zeigen typische Styling-Aufgaben. Legen Sie die Regeln jeweils im CSS-Manager in einer CSS-Datei ab. Die verwendeten Selektoren sind unter Elemente ansprechen erklärt.

Einen Button umgestalten

Aus dem Standard-Button

wird mit wenigen Regeln ein eigenes Design. Die inneren Teile (.background, .shadow, text) haben wir zuvor über die Entwicklertools des Browsers ermittelt:

/* Runde Ecken: Flaeche und Schatten */
.qh-typ-qhmibutton .background,
.qh-typ-qhmibutton .shadow {
  rx: 20px;
  ry: 20px;
}

/* Flaechenfarbe */
.qh-typ-qhmibutton .background {
  fill: #143a5a;
}

/* Textfarbe */
.qh-typ-qhmibutton text {
  fill: #ffffff;
}

Nur die Buttons einer Seite

Mit einem zusammengesetzten Selektor grenzen Sie die Wirkung auf eine bestimmte Seite ein:

.qh-pag-page.qh-typ-qhmibutton .background {
  fill: #143a5a;
}

Ein einzelnes Element

Über die CssId sprechen Sie genau ein Element an:

#Page-QHMIButton {
  opacity: 0.5;
}

Eine ganze Kategorie

Über die Kategorie-Klasse gestalten Sie alle Steuerelemente einer Kategorie einheitlich:

.qh-cat-buttons-and-inputs {
  opacity: 0.4;
}

Für das Detail-Styling (Farben, Ecken, Text) ermitteln Sie die passenden inneren Teile und Eigenschaften eines Steuerelements über die Entwicklertools des Browsers (F12, „Element untersuchen“).