FTUI Farbiger "Switch" mit class="color" funktioniert nicht

[majorshark]

Hallo Forum.

Ich habe den Vorschlag 3 aus dem Beitrag http://forum.fhem.de/index.php/topic,34233.msg336980.html#msg336980 von setstat übernommen weil auch mir das Homestatus Konstrukt zu groß war.

Darin werden die Switch Schaltflächen mit einer Farbe über 'class' definiert. Das funktioniert bei mir leider nicht. Laut Chrome debug wird die Farbe immer durch ein

Code Auswählen Erweitern

element.style {
    color: rgb(170, 105, 0);
}

überschrieben und die Farbe der Klasse nicht angewendet. Dieses element.style kommt auch aus keiner .css. Ich stehe hier ein wenig auf dem Schlauch. Würde gern das einfärben der Switch Schaltflächen und möglicherweise der ganzen anderen Elemente über die Klasse vornehmen wollen.
Hat einer einen Tip für mich.

[roman1528]

Moin.

Du musste die Farbe schon dem aktuellen Schaltzustand zuordnen.

Code Auswählen Erweitern


<div data-type="switch"
        data-device="homestatus_name"
        data-get-on="home.*"
        data-on-color="orange"
        data-icon="fa-home">
</div>


So oder so ähnlich...

Grüße^^

[majorshark]

Das hatte ich schon getestet. Dabei wird aber nicht die Farbe aus dem CSS übernommen sondern die Webfarbe aus der internen Tabelle des Browsers.

[roman1528]

Das hatte ich schon getestet. Dabei wird aber nicht die Farbe aus dem CSS übernommen sondern die Webfarbe aus der internen Tabelle des Browsers.

Na dann eben so:

Code Auswählen Erweitern


<div data-type="switch"
        data-device="homestatus_name"
        data-get-on="home.*"
        data-on-color="#aa6900"
        data-icon="fa-home">
</div>


Du hast natürlich recht. Bei HTML-Farbnamen kommt eine andere Farbe als eine in CSS definierte. (Hat nichts mit Browsern zu tun, mag zwar unterschiede geben aber die Farbnamentabelle kommt von W3C)

Hier mal ein nützlicher Link für HTML und CSS. Hilft mir auch immer noch weiter:

http://de.selfhtml.org

Grüße^^

[majorshark]

Hm. Und wieso funktioniert das in diesem Beispiel von setstate.

Code Auswählen Erweitern

<div>
        <div data-type="switch" data-device="dummy1"
          data-get-on="Wert2" data-get-off="!on"
          data-set-off="" class="blue"
          data-icon="fa-bed" data-background-icon="fa-square" ></div>
        <div data-type="label" class="inline w1x">Night</div>
     </div>

[setstate]

Du hast den Code aus Beispiel 1:1 übernommen, oder schon etwas geändert?

[roman1528]

Ich denke er hat da nur class="blue" gesetzt um nen blauen, aktiven Button für den Screenshot darstellen zu können.

Vielleicht hätte er den Code nicht posten sollen xD
Ist halt ein Beispiel wie es funktionieren kann... Was den Switch angeht. An die restlichen Regeln muss man sich dann schon halten...

Grüße^^

[majorshark]

Copy & Paste. Natürlich das Device geändert.

Code Auswählen Erweitern

    <div>
        <div data-type="switch" data-device="ZuhauseStatus"
          data-get-on="Home" data-get-off="!on"
          data-set-off="" class="green top-space"
          data-icon="fa-home" data-background-icon="fa-square" ></div>
        <div data-type="label">Home</div>
     </div>

[setstate]

Mmmm, geht bei mir. Das .green hat ein "wichtig" dabei und sollte überwiegen.

Liegt das am Chrome (habe ich hier nicht drauf)?

[majorshark]

Das !important hatte ich auch schon gesetzt.
Funktioniert bei mir nicht. In FF, Chrome und IE11.