CSS-Theme

Neben dem Control-Theme und dem Klassen-Themen besteht die Möglichkeit, beliebig viele Cascading Style Sheet-Dateien zu einem Theme hinzuzufügen. Dabei wird zwischen einer normalen CSS-Datei und einer CSS Control-Theme Datei unterschieden.

CSS-Dateien können auch auf Projekteben unabhängig von einem Theme hinzugefügt werden. In diesen Dateien werden allgemeingültige Eigenschaften wie z. B. das Inkludieren der Schriftarten definiert.

Cascading Style Sheets-Datei

Eine Cascading Style Sheets-Datei ermöglicht die Definition von beliebigen CSS-Eigenschaften für alle Elemente, die in dem Projekt enthalten sind (Standard-Controls, Framework-Controls, etc.). Zudem können gezielte CSS-Klassen von einem Control überschrieben werden. Innerhalb einer CSS-Datei stehen alle CSS-Selektoren und CSS-Eigenschaften zur Verfügung.

Wird in dem Theme-Editor ein Klassen-Theme definiert, kann dieses im CSS-Code über die Klassenbezeichnung mit dem Prefix „tchmi-class-“ angesprochen werden. Beispiel:

tchmi-class-myclassthemeclass

CSS Control Theme-Datei

Mit einer CSS Control Theme-Datei haben Sie die Möglichkeit, gezielt CSS-Eigenschaften des Base-Themes zu ersetzen. Dieses wird ermöglicht, indem alle CSS-Eigenschaften des Controls in die CSS Control Theme-Datei des Projektes importiert werden.

Dazu müssen Sie im nächsten Fenster das Control auswählen, für welches Sie eine CSS Control Theme-Datei erstellen möchten.

In dem Dialog können Sie mehrere Controls auswählen, für die ein CSS Control Theme generiert werden soll. Zudem müssen Sie auswählen, von welchem Theme das CSS Control Theme abgeleitet werden soll. Wählen Sie das Base-Theme aus, erhalten Sie alle Eigenschaften die in dem Base-Theme des Controls definiert sind.

Einige Controls enthalten weitere TwinCAT HMI Controls, wie z. B. das Event Grid. Das wird in dem Dialog durch einen Hinweis (umgedrehtes Ausrufezeichen) hinter dem Control gekennzeichnet. Möchten Sie alle Eigenschaften überschreiben, müssen Sie auch die CSS-Dateien der Kind-Controls inkludieren. Genauere Informationen, welche Abhängigkeiten unter den einzelnen Controls bestehen finden Sie in der Dokumentation des jeweiligen Controls.

Folgendes Beispiel zeigt eine CSS Control Theme-Datei für das Control „TcHmiButton“:

/** Styles for the theme: Base */

/* Style for the main element */
.tchmi-button {
   /* color gradient for default view */
   background-image: linear-gradient(135deg, #eff1f3, #aeb9c2);
   /* default color for button text */
   color: #4794da;
   /* default box shadow */
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
}

/* class down will be set/unset in the control on mouse/touch down */
.tchmi-button.down {
   /* another color gradient */
   background-image: linear-gradient(135deg, #aeb9c2, #eff1f3);
   color: #000000;
   box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.6);
}