Abstand zwischen Icon und Commands Texten

[Spook112]

Hi,
ich habe gerade erst angefangen mit Flooroplan aber bin schon ganz zufrieden mit meinen Ergebnissen.
Aktuell habe ich Lichtschalter, Fensterkontakte und Rolladensteuerung integriert.
Alles mit den "Standardicons", wobei ich die Größe der Icons und deren Farbe je nach Zustand verändere über einen Eintrag im CSS
Nun zu meiner Frage:
Wie schaffe ich es den Abstand zwischen dem Icon selbst und den darunter angeordneten Command-Texten zu variieren bzw. zu verändern (dauerhaft).
Wenn das auch noch unterschiedlich, in Abhängigkeit zum Schaltzustand sein könnte, wäre das ideal.

Danke für jeden Vorschlag.
Gruß
Michael

[UliM]

Moin,
jedes device wird im fp als kleine Tabelle dargestellt. Das fällt normalerweise nicht auf, da die Zellenränder unsichtbar sind.
Deinen Wunsch müsste über css für die Tabellen-Zeilenhöhe der command-Zeile gehen. Die tags hab ich nicht im Kopf , sollten sich aber leicht im erzeugten html der floorplan-Seite finden lassen.
Gruß Uli

[Spook112]

Danke für den Tip,
das hat mich zumindest mal dahingehend weiter gebracht, dass ich es jetzt geschafft habe die Shutter Icons mittig zu den darunter stehenden Device Commands auszurichten.
Dazu habe ich im Stylesheet die Klasse TRX_LIGHT mit dem entsprechenden Attribut versehen :

Code Auswählen Erweitern

element {
}
.TRX_LIGHT {
    text-align: center;
}

Allerdings finde ich die Attribute für den Abstand zwischen dem Icon und den Commands nicht.
Das sind ja in derTabelle eigene Zellen aber padding hat da irgendwie keinen Effekt.
Hier mal der HTML Source Code Ausschnitt für eines der Icons, um eine Jalousie steuern zu können.

Code Auswählen Erweitern

<div fp_style="5" fp_text=" " fp_text2="WZAJalousie" fp_name="Grundriss_EG" class="fp_device_div" style="position:absolute; top:462px; left:841px;" id="div-WZAJalousie">
<form method="post" action="/fhem/floorplan/Grundriss_EG/WZAJalousie" autocomplete="off">
<table class="TRX_LIGHT fp_Grundriss_EG" id="table-WZAJalousie" align="center">
<tr class="devicestate fp_Grundriss_EG" id="WZAJalousie">
<td informId="WZAJalousie" colspan="3"><div id="WZAJalousie"  class="col2"><svg class=" fts_shutter_10 red" alt="up" title="up" version="1.0" xmlns="http://www.w3.org/2000/svg"  width="468pt" height="334pt" viewBox="0 0 468 334"  preserveAspectRatio="xMidYMid meet"> <metadata> Created by potrace 1.8, written by Peter Selinger 2001-2007 </metadata> <g transform="translate(0,334) scale(0.158108,-0.158108)" fill="red" stroke="none"> <path d="M65 2103 c-51 -13 -55 -27 -55 -179 0 -156 4 -169 61 -181 38 -7 41 -43 5 -43 -28 0 -66 -42 -66 -72 0 -25 44 -68 70 -68 20 0 20 -1 20 -724 l0 -723 23 -34 c49 -74 -55 -69 1357 -69 1412 0 1308 -5 1357 69 l23 34 0 723 0 724 24 0 c13 0 35 9 50 21 51 40 21 119 -45 119 -41 0 -36 31 8 42 55 14 63 37 63 180 0 120 -1 128 -24 155 l-24 28 -1414 1 c-777 1 -1422 0 -1433 -3z m1355 -388 c0 -13 -73 -15 -595 -15 -522 0 -595 2 -595 15 0 13 73 15 595 15 522 0 595 -2 595 -15z m1310 0 c0 -13 -72 -15 -590 -15 -518 0 -590 2 -590 15 0 13 72 15 590 15 518 0 590 -2 590 -15z m-1310 -425 l0 -270 -24 0 c-28 0 -56 -33 -56 -65 0 -32 28 -65 56 -65 l24 0 0 -375 0 -375 -592 2 -593 3 -3 708 -2 707 595 0 595 0 0 -270z m1308 -437 l-3 -708 -587 -3 -588 -2 0 375 0 375 24 0 c28 0 56 33 56 65 0 32 -28 65 -56 65 l-24 0 0 270 0 270 590 0 590 0 -2 -707z"/> </g> </svg></div>
</td></tr>
  <tr class="devicecommands" id="WZAJalousie-devicecommands">
<td><div class="col3"><a href="/fhem/floorplan/Grundriss_EG?cmd.WZAJalousie=set WZAJalousie up">up</a></div></td>
<td><div class="col3"><a href="/fhem/floorplan/Grundriss_EG?cmd.WZAJalousie=set WZAJalousie down">down</a></div></td>
<td><div class="col3"><a href="/fhem/floorplan/Grundriss_EG?cmd.WZAJalousie=set WZAJalousie stop">stop</a></div></td>
</tr>
</table></form>
</div>

Im Anhang ein Screenshot auf dem das mal bildlich zu sehen ist - es geht um das rote Icon rechts ...

Vielleicht hat ja noch jemand eine Idee was man tun könnte, um den Abstand zwischen Icon und den darunter stehenden Device Commands zu reduzieren.

Danke im voraus und Gruß
Michael

[tomcat.x]

Falls jemand das gleiche Problem hat, es ist "line-height". Also zum Beispiel über eine Prozent Angabe einfach
  devStateStyle: style="line-height: 80%;"
setzen, um den Abstand auf 80% zu verringern. "0.8" würde das gleiche bewirken.

Mir hat das nicht geholfen. Ich wollte den Abstand zwischen Überschrift (Name) und Icon zu verringern. Bin aber auch fündig geworden: "margin-top: -10px"