Neuer Style: flex. Flexibel für alle Geräte

[TomLee]

Hallo sigma415,

wenn ich sagen würde ich verstehe nur ein Bruchteil wie alles funzt/zusammenhängt, dann ist das eigentlich schon zuviel.

Hab mir den Style mal angeschaut. Kann nachvollziehen das die on/off-Icons keine Farbe (default hier blau) haben.
Warum das bei Gisbert anders ist (on gelb) versteh ich nicht.

Wenn Du folgendes irgendwo in der flexstyle.css-Datei unter opt/fhem/www/pgm2 ergänzt:

Code Auswählen Erweitern

svg.on,svg.FS20_on { fill:orange!important; }
Dann sollte default das on-Icon gelb sein.

Gruß Thomas
 

[sigma415]

@Gisbert @TomLee, danke für Eure Unterstützung.
Ich habe jetzt auch noch etwas rumexperimentiert und dabei rausgefunden, dass der flex style bei mir das "on" oder auch das "FS20.on"-Icon einfach nicht von sich aus in orangener Farbe darstellen will.
Erst wenn ich bei meinen (zig ...) Devices im Attribut devStateIcon explizit die Farbdefinition für "on" zufüge, also

Code Auswählen Erweitern

on:on@orangeoder auch

Code Auswählen Erweitern

on:FS20.on@orangewird das on-state Icon wieder wie im normalen WEB-UI in Orange dargestellt (OK, es ist @orange, nicht @yellow).
Das ist jetzt zumindest eine (nicht sehr komfortable) Lösung; verstehen tue ich's aber trotzdem nicht.

Aber vielleicht liegt's auch nur daran, dass meine FHEM-Installation so langsam schon Jahrzehnte auf dem Buckel hat...

[sigma415]

Hallo sigma415,

wenn ich sagen würde ich verstehe nur ein Bruchteil wie alles funzt/zusammenhängt, dann ist das eigentlich schon zuviel.

Hab mir den Style mal angeschaut. Kann nachvollziehen das die on/off-Icons keine Farbe (default hier blau) haben.
Warum das bei Gisbert anders ist (on gelb) versteh ich nicht.

Wenn Du folgendes irgendwo in der flexstyle.css-Datei unter opt/fhem/www/pgm2 ergänzt:

Code Auswählen Erweitern

svg.on,svg.FS20_on { fill:orange!important; }
Dann sollte default das on-Icon gelb sein.

Gruß Thomas
 

Oops, sorry. Ich habe deinen Post erst zu spät (richtig ...) gelesen. Das wäre natürlich die gewünschte globale Lösung.
Ich werd's morgen ausprobieren.
Vielen Dank.

[sigma415]

@TomLee
Vielen Dank, das war die Lösung und hat mir stundenlanges Editieren durch viele meiner Devices erspart.
Ich habe jetzt folgende Zeile in die flexstyle.css eingetragen:

Code Auswählen Erweitern

svg.on, svg.FS20.on { fill:orange!important; }Bei FHEM kann man jahrelang jeden Tag viel Neues lernen

Kannst Du mir vielleicht noch erklären, was diese Zeile im Klartext bedeutet ?
Mit css kenne ich mich jetzt leider gar nicht aus 
Vielen Dank.

[schwatter]

Flex bietet wie f18 unter "Style settings" die Option Zusätzlicher CSS Code. Da einfach reinkopieren und speichern.

Gruß schwatter

[rudolfkoenig]

Code Auswählen Erweitern

svg.on, svg.FS20.on { fill:orange!important; }Kannst Du mir vielleicht noch erklären, was diese Zeile im Klartext bedeutet ?

Diese Regel gilt fuer Elemente mit dem Tag svg und Klasse on bzw. die beiden Klassen FS20 und on.
Falls mehrere Regel zutreffen, dann wird diejenige mit mehr Angaben verwendet, deswegen ist svg.FS20.on nicht unbedingt ueberfluessig hinter svg.on.

Die Regel besagt, dass die SVG das Element mit der Farbe orange fuellen soll. SVG Elemente haben oft ein Aussenlinie (Attribut stroke) und eine gefuellte Flaeche (fill)
!important sagt, dass diese Regel Andere moeglichst ueberschreiben soll.
Das funktioniert begrenzt, jenachdem wie und wo die Anderen spezifiziert wurden.

Siehe auch rechte Maustaste auf ein Element, und dann Untersuchen bzw. Inspect, meist ganz unten im Menue.
Im "Styles" Unterfenster kann man die angewendeten (und ueberschriebenen) Regel sehen und auch modifizieren.