Label Background-Icon

[Amenophis86]

Ich finde leider nicht die Antwort auf meine Frage mittels der SuFu, daher stelle ich sie mal in die Runde.

Ich lese aus einem DOIF ein Reading aus, welches wie folgt aussieht:

Code Auswählen Erweitern


timer_3_c6 17.02.2016 07:30:00


das ganze lasse ich mir als label verkürzt anzeigen, da ich nur hh:mm möchte:

Code Auswählen Erweitern

<div data-type="label" data-device="WZ.Rollladen.Schalten" data-get="timer_3_c6" data-substitution="toString().substr(11,5)"></div>

Jetzt hätte ich gerne, dass icon fa-square, als Hintergrundbild. Aber irgendwie bekomme ich es nicht hin. Im Wiki habe ich gesehen, dass es data-background-icon nicht für Label gibt. Gibt es eine andere Möglichkeit dies zu realisieren?

[setstate]

Das geht nicht.
Man könnte aber mit Style border, border-radius usw. etwas ähnliches hinbiegen

[Amenophis86]

Habe ich mir auch schon überlegt, dass ich es quasi mit Style selbst bauen muss. Aber danke für die Info

[takaze]

wenn du das einzelne symbol und das label untereinander setzt kannst du vielleicht das label mit top-narrow in das symbol schieben

is bissl quick'n'dirty aber is mir schon öfter versehentlich passiert 

Grüße

[Amenophis86]

ja, habe ich versucht, aber klappt nicht ganz. Da müsste man dann wohl mit position: absolut und relativ arbeiten.

[setstate]

Ich habe jetzt mal ein paar CSS Klassen hinzugefügt, um ein Label im Icon-Stil anzuzeigen.

Einmal rund, reckteckig, mit vollem Hintergrund oder nur mit Rand.

Man kann jetzt auch den Hintergrund per data-limit ändern lassen (class="bg-limit"). Also rot bei aus und grün bei an.

Code Auswählen Erweitern


<div class="cell">
    <div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div>
    <div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div>
    <div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div>
    <div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div>
</div>


[Amenophis86]

Cool, danke

[kvo1]

danke, vielleicht bekomme ich ja damit mein offenes Problem

http://forum.fhem.de/index.php/topic,48941.msg405960.html#msg405960

irgendwie anderes gelöst!

kvo1