CSS von Controls überschreiben

Innerhalb der CSS-Dateien besteht die Möglichkeit, das Aussehen von eingebetteten TwinCAT HMI Controls zu überschreiben. Soll beispielsweise das Aussehen eines eingebetteten Buttons innerhalb eines Controls verändert werden, ist dieses mit einer Übernahme der CSS-Styles des Buttons möglich.

Dabei ist zum einen zu beachten, dass nicht versehentlich jeder Button dieses Aussehen erhält und zum anderen, dass die CSS-Datei des allgemeinen Buttons nicht die des eingebetteten Controls überschreibt. Beides kann über sogenannte Nachfahren-Selektoren (Leerzeichen in CSS) erreicht werden:

.framework-control-js1 .tchmi-button {
    background-image: linear-gradient(135deg, #eff1f3, #aeb9c2);
    color: #4794da;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
}

.framework-control-js1 .tchmi-button.down {
    background-image: linear-gradient(135deg, #aeb9c2, #eff1f3);
    color: #000000;
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.6);
}

Alle Hauptelemente eines Controls erhalten den Controlnamen als CSS-Klassennamen (hier framework-control-js1). Wird dieser vor den Stil des zu überschreibenden Controls gehangen, so greift im Beispiel das neue Aussehen nur für Buttons unterhalb des Framework Controls.

CSS-Selektoren werden immer von rechts nach links gelesen:

• Erstes Beispiel: Hauptelement des Buttons (".tchmi-button"), wenn es unterhalb (" ") vom FrameworkControlJs1 (".framework-control-js1") liegt.
• Zweites Beispiel: Element mit der Klasse down (".down"), wenn es das Hauptelement des Buttons (".tchmi-button") ist, wenn es unterhalb (" ") vom FrameworkControlJs1 (".framework-control-js1") liegt.