Ich hab' ein Problem mit einem Link. Ich möchte 2 Zeile darstellen
- obere Zeile: 1 oder mehrere Icons
- untere Zeile: Text aus einem reading
Hier im Beispiel ist es ein Icon (soll anzeigen ob die Lampe an ist) und ein Temperaturwert. Leider hab' ich noch keine Möglichkeit gefunden, wie das funktioniert, deshalb verwende ich aktuell 2 Links:
<div class="top-space-1x big bold round"
data-type="link"
data-width="154"
data-height="128"
data-color="Ivory"
data-background-color=rgba(65,105,225,0.5)>
<div class="inline"
style="font-size:100%"
data-type="symbol"
data-device="FGS212_ID15"
data-get-on="on"
data-icon="fa-lightbulb-o"
data-on-color="Yellow"
data-off-color="Ivory"
data-background-icon=""
data-background-color="transparent">
</div>
</div>
<div class="top-space-3x bigger bold round"
data-type="link"
data-width="154"
data-height="128"
data-color="Ivory"
data-background-color=rgba(65,105,225,0.5)>
<div
style="font-family: Arial;text-align:center"
data-type="label"
data-device="Aeotec_Multisensor_6_ID16"
data-get="temperature"
data-part="1"
data-unit="%B0C%0A"
data-limits="[-999,1,20]"
data-colors='["LightCyan","Ivory","DarkOrange"]'>
</div>
</div>
Falls es eine andere Möglichkeit gäbe, den abgerundeten blau-transparenten Hintergrund zu erzeugen, könnte ich auch auf die Links verzichten..
Wenn ich Dich recht verstanden habe, dann möchtest Du, dass beide Elemente in einem blauen Kästchen dargestellt werden.
Dazu musst Du auch beide in ein umschließendes DIV packen, das selbst kein Data-type hat.
Sinngemäß sieht das dann so aus:
<div class="top-space-1x big bold round" data-width="154" data-height="128" data-color="Ivory" data-background-color=rgba(65,105,225,0.5)>
<div ... data-type="symbol" ... ></div>
<div ... data-type="label" ... ></div>
</div>
Wenn ich data-type="link" weg lasse fehlt das blaue Kästchen :(
Dann füg mal link als klasse mit hinzu.
Nichts desto trotz, muss alles ins gleiche DIV. Das ist hier der Knackpunkt.
"link" als Klasse? Gibt es das?
Ich würde dem klammernden Container eine Klasse verpassen, die die Hintergrundfarbe definiert und die sonstigen Bunt und Klitzereffekte.
Beispiel aus den StandardFarben: class="bg-blue"
Ich hab' die 2. Zeile jetzt außerhalb des Links. Innerhalb des Links gab es nur Icon oder Text und die Variante mit bg-blue gefällt mir auch nicht (geht weder transparent noch round...).
Da es sich eh' nur um die Temperatur handelt, ist das für mich ok...
bg-blue war nur als Beispiel gedacht. Du kannst ja beliebige Klassen kreieren und nutzen.