CSS-Manager

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

Der CSS-Manager ist die zentrale Ansicht, in der Sie alle CSS-Regeln Ihres Projekts verwalten. Sie öffnen ihn im Editor über den Eintrag CSS-Manager im Projekt-Explorer.

CSS-Manager im QuickHMI-Editor mit CSS-Dateien und Editor-Bereich

Die Regeln werden in benannten CSS-Dateien abgelegt. Jede CSS-Datei wird im Web-Viewer als eigenes Stylesheet eingebunden und gilt damit projektweit für alle Seiten. Welche Elemente eine Regel tatsächlich trifft, bestimmen Sie über die Selektoren (siehe Elemente ansprechen).

CSS-Datei anlegen

  • Legen Sie über die Schaltfläche Hinzufügen eine neue CSS-Datei an. Sie erhält zunächst einen automatischen Namen (zum Beispiel CSS_1).
  • Vergeben Sie einen aussagekräftigen Namen. Der Name muss eindeutig sein und darf nicht leer sein.
  • Optional ordnen Sie die Datei einer Kategorie zu. Dateien mit gleicher Kategorie werden im Baum gruppiert dargestellt. Die Kategorie dient nur der Übersicht und hat keine Auswirkung auf die Darstellung.

Regeln bearbeiten

Im Editorbereich schreiben Sie die CSS-Regeln der ausgewählten Datei. Der Editor unterstützt Sie dabei mit:

  • Syntaxhervorhebung für CSS,
  • einer Suche im aktuellen CSS-Text,
  • Rückgängig und Wiederholen der Änderungen.

CSS-Dateien verwalten

  • Umbenennen: über das Namensfeld der ausgewählten CSS-Datei.
  • Löschen: Wählen Sie eine oder mehrere Dateien im Baum aus und entfernen Sie sie über das Kontextmenü oder die Taste Entf. Vor dem Löschen erscheint eine Sicherheitsabfrage.

Wirkung im Web-Viewer

Die im CSS-Manager hinterlegten Regeln wirken auf die Darstellung im Web-Viewer. Wie Sie einzelne Elemente, ganze Seiten oder Elementtypen gezielt ansprechen, lesen Sie unter Elemente ansprechen. Konkrete Anwendungsfälle finden Sie unter Praxisbeispiele.