Sonstiges Beckhoff TE2000 Hintergrundfarbe für disabled controls

[sp1]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hallo Zusammen,

ich versuche die Hinterdrundfarbe von Buttons im Zustand isEnabled=false innerhalb der TE2000 (Beckhoff) zu verändern. So Dinge wie :disabled oder .disabled funktionieren bei mir leider nicht.

Bei enabled Buttons geht das in css recht einfach:

/* Standard Button */
.TcHmi_Controls_Beckhoff_TcHmiButton, .tchmi-button {
     background-color: #123456;
}

/* Standard Button gedrückt */
.TcHmi_Controls_Beckhoff_TcHmiButton.down, .tchmi-button.down {
    background-color: #654321;
}

/* Standard Button disabled */
/* ??? */

Besten Dank & Grüße

 

[zuse]

Alle deaktivierten controls erhalten die css Klasse:
TcHmi_Controls_System_TcHmiControl-disabled
Alle Klassen kannst du einfach im Element Tab der devTools des Browsers direkt sehen.

class="tchmi-box TcHmi_Controls_System_TcHmiControl tchmi-control TcHmi_Controls_Beckhoff_TcHmiButton tchmi-button TcHmi_Controls_System_TcHmiControl-disabled tchmi-control-disabled"

Also kannst du den CSS Code nutzen

.TcHmi_Controls_Beckhoff_TcHmiButton.TcHmi_Controls_System_TcHmiControl-disabled {
    background-color: #654321;
    background-image: unset; /* remove a gradient*/
}

 

[sp1]

Zuviel Werbung?
-> Hier kostenlos registrieren

Super, vielen Dank!Gute Idee, einfach im Browser devTool nachschauen.
Eine Liste oder ein html-Template der controls von Beckhoff vermisse ich ein wenig. Zumindest habe ich bei infosys nichts gefunden.

 

[zuse]

Eine Liste oder ein html-Template der controls von Beckhoff vermisse ich ein wenig. Zumindest habe ich bei infosys nichts gefunden.

Meinst du eine Liste der Klassen? Oder eine Beschreibung des internen DOMs?

 

[mrknackebein]

Wenn man die oben genannten Beckhoff Klassen benutzt, dann wird der Style in CSS auf alle Buttons angewendet, oder? Mir ist aufgefallen das man mit dem CSS Attribut :after gezielt eigene Klassen für deaktivierte Controls erstellen kann. Warum :disabled nicht funktioniert ist mir allerdings nicht klar

 

[zuse]

Zuviel Werbung?
-> Hier kostenlos registrieren

Wenn man die oben genannten Beckhoff Klassen benutzt, dann wird der Style in CSS auf alle Buttons angewendet, oder?

.TcHmi_Controls_Beckhoff_TcHmiButton.TcHmi_Controls_System_TcHmiControl-disabled
trifft alle deaktivierten Buttons.

Mir ist aufgefallen das man mit dem CSS Attribut :after gezielt eigene Klassen für deaktivierte Controls erstellen kann.

::after - CSS | MDN

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

developer.mozilla.org

Damit erstellst du ein Pseudoelement. Das ist "virtuelle" Elemente NACH den Hauptobjekten (welche du per CSS Selektor davor ausgewählt hast).
So sind auch die halbtransparenten Overlays über deaktivierten (isEnabled:false) Controls erstellt.
Guckt euch das in den Devtools genauer an.

Warum :disabled nicht funktioniert ist mir allerdings nicht klar

:disabled - CSS | MDN

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

developer.mozilla.org

> The :disabled CSS pseudo-class represents any disabled element.
Beckhoff hat ja eigene Controls erstellt. Von der tchmi-Bedeutung "disabled" weiss der Browser nichts. Daher trifft der CSS Selektor :disabled nicht.