Hey Leute,
ich versuche grade die default color aller symbol Objekte in meiner TBUI zu ändern und bin am verzweifeln.
Also ich möchte die Farbe die angezeigt wird wenn kein data-get-on zutrifft ändern. Das Standardmäßige Grau ist mir zu dunkel.
Versucht habe ich folgendes:
[data-type="symbol"]:not([data-colors]):not([data-on-color]) .active i#fg {
color: #ffffff !important;
}
[data-type="symbol"]:not([data-colors]):not([data-on-color]) .active i#bg {
color: #ffffff!important;
}
leider ohne Erfolg. Kann mir jemand einen Tipp geben?
Speziell geht es unter anderen um diese Zeile Code dich ich mir von roman1528 geborgt habe ;):
<div data-type="symbol" data-device="FritzBoxCallList" data-get="1-internal" data-get-on='["123456","654321"]' data-icons='["oa-scene_livingroom","oa-scene_office"]' data-on-colors='["",""]'></div>
von hier: https://forum.fhem.de/index.php?topic=43758.0
Grüße,
Tim
Ok, als Workaround hab ich jetzt schon mal das hier hinbekommen:
<div data-type="symbol" data-device="FritzBoxCallList" data-get="1-internal" data-get-on='["0123456","0654321"]' data-icons='["oa-scene_livingroom","oa-scene_office"]' data-colors='["#ffffff","#ffffff"]' data-on-color="rgba(255, 255, 255, 0)" data-off-color="rgba(255, 255, 255, 0)"></div>
Das funktioniert schon mal ganz gut. :)
Dennoch würde ich die default Farbe gerne noch ändern, damit ich nicht immer für jedes Symbol explizit eine Farbe angeben muss.
Man kann sich Themes einbinden.
Dazu in der index.html im HEADER ein vorhandenes Theme angeben
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />
Oder man erstellt sich aus den Vorlagen ein eigenes Theme => Es können auch nur Teile daraus in eigene CSS Files kopiert werden
/* Background Off */
[data-type="switch"]:not([data-background-colors]):not([data-off-background-color]):not([data-background-color]) :not(.active) i#bg,
[data-type="dimmer"]:not([data-background-colors]):not([data-off-background-color]):not([data-background-color]) :not(.active) i#bg,
[data-type="button"]:not([data-background-colors]):not([data-off-background-color]):not([data-background-color]) :not(.active) i#bg {
color: rgba(153, 153, 153, 0.6) !important;
}
Wie man aber sieht, dürfen dann keine data-*color im HTML angegeben werden.
Tipp: Es gibt ein Testfile: test/test_theme.html im Projectfolder im GitHub, womit man die Themes von FHEM aus umschalten kann
Aktuell gibt es diese Themes im CSS Ordner:
css/fhem-darkgreen-ui.css
css/fhem-darkblue-ui.css
css/fhem-mobil-ui.css
css/fhem-green-ui.css
css/fhem-blue-ui.css
Hi setstate,
danke für deine Antwort. Die Test-css-Dateien habe ich mir auch schon angesehen. Leider können damit scheinbar auch nicht die Symbole eingefärbt werden.
Es gibt wohl tatsächlich keine andere Möglichkeit als die Farbe von jedem Symbol einzeln festzulegen. Na ja, dann tippe ich mal fleißig drauf los! ;)
Doch, für Symbol geht die On Off Farbe auch per css zu definieren. Nach Vordergrund und Hintergrund getrennt.
Und wie??? Ich tappe hier komplett im dunkeln. :-\
[data-type="symbol"]:not([data-colors]):not([data-on-color]) .active i#fg {
data-on-color: rgba(255, 0, 0, 1); data-off-color: rgba(255, 0, 0, 1);
}
[data-type="symbol"]:not([data-colors]):not([data-on-color]) .active i#bg {
data-on-color: rgba(255, 0, 0, 1); data-off-color: rgba(255, 0, 0, 1);
}
<div data-type="symbol" data-icon="fa-home"></div>
Ich denke mal das funktioniert nicht, weil data-on-color ja keine style Eigenschaft ist, oder? Wie kann ich also via css auf data-on-color schreiben?
on-color
[data-type="symbol"]:not([data-colors]):not([data-on-color]) .active i#fg {
color: #00aadc !important;
}
off-color
[data-type="symbol"]:not([data-colors]):not([data-off-color]) i#fg {
color: #ffffff !important;
}
Oh man! Von allen möglichen Kombinationen ist das glaube ich so ziemlich das einzige gewesen was ich nicht probiert habe! :o
D.h. tbui setzt intern die klasse active wenn das data-on erfüllt ist, richtig? Hätte ich mir auch denken können. ::)
Danke euch zwei! :)