[Gelöst!] - Wie kann ich das Icon kleiner machen (class="symbol")?

[DocCyber]

Guten Tag Forum,

ich stelle den Status von Türsensoren als grüne bzw rote Kreisfläche (symbol) dar.
Alles toll, aber die Icons sind mir zu groß. Der Einsatz von class="small" hat genau so viel Effekt wie ein zusätzlicher Eintrag in 'fhem-tablet-ui-user_tablet.css':

Code Auswählen Erweitern

[data-type="symbol"].tiny {
    font-size: 50% !important;
}
Beides funktioniert nicht! Ich vermute, dass das auch Einfluss auf den Zeilenabstand in der Tabelle hat; der ist wesentlich zu groß.

Code-Auschnitt:

Code Auswählen Erweitern

<table width="100%">
  <tr>
<td width="70%" align=left><div class="left-space">Haustür</div></td>
<td><div
              data-type="symbol" data-device="hm_ds1" data-get="STATE"
              data-states='["closed", "open"]'
              data-icons='["fa-circle","fa-circle"]'
              data-colors='["green", "red"]' class="tiny inline">
              </div>
        </td>
  </tr>
  .....
  ....
</table>

Der kleine Screenshot im Anhang verdeutlicht das Problem.
Hat jemand eine gute Idee...??

Danke im Voraus
Klaus

[phil82]

Ich mach das bei mir mit einer CSS-Datei:

Code Auswählen Erweitern

.fp_ty_fensterkontakt { font-size: 1.9em; width: 1.9em; height: 1.9em;}

Und in dem HTML-File:

Code Auswählen Erweitern

<div data-type="symbol" data-device="hwAzFensterRechts" class="fp_wg_hwAzRollade fp_ty_fensterkontakt"
data-states='["closed", "open"]' data-icons='["", ""]'
data-background-icons='["fa-square", "fa-square"]' data-colors='["#e6e6e6", "#e6e6e6"]'
data-background-colors='["#444", "#bd4036"]'></div>

[DocCyber]

Ich mach das bei mir mit einer CSS-Datei

Habe ich ja auch versucht (vgl. mein Code), aber bei mir klappt das nicht- kein Effekt! 

[setstate]

Für mich ist class="small" größentechnisch okay. Aber dein tiny funktioniert bei mir auch.  Ist dann aber bloß noch Stecknadelkopf groß.

Ich habe nur deinen Teil in eine leere Seite eingefügt. Ist es nur ein Cache-Problem, CSS werden gerne vom Browser nicht neu vom Server geholt? Manchmal reicht es auch, die URL des CSS Files in der Adressleiste einzugeben. Dann zieht der Browser das File kpl. neu.

[DocCyber]

Ist es nur ein Cache-Problem, CSS werden gerne vom Browser nicht neu vom Server geholt?

Hallo setsate,

Zunächst vielen Dank für deine Hilfestellung.
Nein, es ist kein Cache-Problem. Änderungen werden bei mir sofort aktualisiert (Firefox). Ich habe aber trotzdem und zusätzlich noch den Cache manuell geleert, aber das Problem bleibt.

Für mich ist class="small" größentechnisch okay. Aber dein tiny funktioniert bei mir auch. 

Hier klappt es nach wie vor nicht. Um der Sache auf die Spur zu kommen, habe ich in der fhem-tablet-ui.css einige Zeilen auskommentiert:

Code Auswählen Erweitern

/*
[data-type="symbol"].big, [data-type="multistatebutton"].big,
[data-type="switch"].big, [data-type="button"].big,
[data-type="push"].big, [data-type="pagebutton"].big {
    font-size: 250% !important;
}
[data-type="symbol"].small, [data-type="multistatebutton"].small,
[data-type="switch"].small, [data-type="button"].small,
[data-type="push"].small, [data-type="pagebutton"].small {
    font-size: 150% !important;
}*/

In der fhem-tablet-ui-user_tablet.css steht

Code Auswählen Erweitern

[data-type="symbol"].tiny {
    font-size: 50% !important;
}

Schließlich habe ich eine Dummy-Tabelle gemäß unten stehendem Muster zu Testzwecken erstellt, in welcher das Icon Zeile für Zeile kleiner werden soll (class="big inline", "large ", "normal ", "small ", "tiny ")

Code Auswählen Erweitern

<table width="100%">
  <tr>
    <td width="70%" align=left><div class="left-space">[b]Big[/b]</div></td>
    <td><div data-type="symbol" data-device="hm_ds1"
                   data-get="STATE" data-states='["closed", "open"]'
                   data-icons='["fa-circle","fa-circle"]' data-colors='["green", "red"]'
                   class="big inline">
           </div>
    </td>
  </tr>
  ...
  ...
</table>


Das Ergebnis ist im Screenshot zu sehen.     

[setstate]

Zum Ermitteln des richtigen Styles kann man im Browser die Entwicklertools öffnen und im Inspector das Element auswählen. Dann gibt es das Fenster zum Anzeigen der genutzten CSS Regeln für das Element. Dort sieht man, welche Regel gezogen werden, woher und welche nicht benutzt werden. Man kann den Wert auch gleich dort ändern und sieht das Ergebnis ohne Page-Refresh. Die somit ermittelten CSS Regeln trägt man dann in sein CSS File ein.

[DocCyber]

Zum Ermitteln des richtigen Styles kann man im Browser die Entwicklertools öffnen und im Inspector das Element auswählen. Dann gibt es das Fenster zum Anzeigen der genutzten CSS Regeln für das Element. Dort sieht man, welche Regel gezogen werden, woher und welche nicht benutzt werden. Man kann den Wert auch gleich dort ändern und sieht das Ergebnis ohne Page-Refresh. Die somit ermittelten CSS Regeln trägt man dann in sein CSS File ein.

Danke für den HInweis! Ich werde der Sache nachgehen und mich wieder melden.

[DocCyber]

Zum Ermitteln des richtigen Styles kann man im Browser die Entwicklertools öffnen...

Es hat einige Zeit gedauert, bis ich gemerkt habe, was los ist: Der Browser hatte in nicht nachvollziehbarer Manier hin und wieder die falsche css-Datei geladen.
Nach einer kompletten Neuinstallation läuft nun alles so, wie man es erwartet.

Nochmals herzlichen Dank für die Hilfestellung zur Lösungsfindung!