Schriftfarbe und Größe für name: einer entety card ändern (font-size / font-color)

Dashboard/Cards/Frontend
1

Hallo,

ich habe z. B. eine Entitätskarte eines Thermometers, bei der ich schon einige farblich Änderungen am Ausgabewert und den Icon gemacht habe. Die Änderungen sind abhängig von der Temperatur. Soweit so gut.

image

Nun würde ich gerne noch den Namen, in diesem Fall das Wort “Wirtschaftsraum”, verändern können, z. B. die Schriftfarbe und Größe.
Würde mich freuen, wenn da jemand eine Idee zu hat.

Momentan sieht der Code für die Kate wie folgt aus:

entity: sensor.thermometer_wirtschaftsraum_temperature
name: Wirtschaftsraum
state_color: true
type: entity
card_mod:
  style: |
    ha-card {
      margin-top: 0px !important;
      margin-bottom: 0px !important;          
      height: 40px !important;
      padding: 0px;
      height: 90% !important;
      color: #821429;
      {% if states('sensor.wirtschaftsraum_temperature')|int(0) >= 20 %}
      color: green;
      {%- elif states('sensor.wirtschaftsraum_temperature')|int(0) >= 6 %}
      color: #FF7F55;
      {% elif states('sensor.wirtschaftsraum_temperature')|int(0) <= 5 %}
      color: red;
      background-color: blue;
      {% endif %}
    }
    :host {
      color: #821429;
      {% if states('sensor.wirtschaftsraum_temperature')|int(0) >= 20 %}
      --card-mod-icon-color: green;
      {%- elif states('sensor.wirtschaftsraum_temperature')|int(0) >= 6 %}
      --card-mod-icon-color: #FF7F55;
      {% elif states('sensor.wirtschaftsraum_temperature')|int(0) <= 5 %}
      --card-mod-icon-color: red;
      {% endif %}
      }
2

Den Namen kannst du folgendermaßen “stylen”:

  style: |
    .header .name {
    color: green;
    font-size: 30px;
    }
1 „Gefällt mir“
3

Super klasse, danke, ist ja simpel.

4

Hallo @bigmirror
hast Du eine Quelle wo man dies card_mod / style:-Thema nachlesen kann?
Es interessiert mich, es klingt nach mehr Möglichkeiten als hier im Beitrag verwendet.

Danke und Gruß
Frank

5

Moin,
ich habe relativ viele Mushroom Cards und da hilft mir der Thread in der englischen Community viel.
Sind auch meist Bilder bei das man sehen kann was man womit ändern kann.

LG

6

Ich habe prinzipiell überhaupt keine Ahnung von card_mod, nur ein wenig vom mitlesen hier im Forum.
Für die Lösung oben habe ich selbst etwas gegoogelt und hier einen Thread gefunden, in dem einiges verlinkt und beschrieben ist. Ähnlich zu dem von totow.

7

Ich habe mich die letzten Tage etwas damit beschäftigt und wenn man ein wenig mit card_mod rumgespielt hat und im Browser die Entwicklerwerkzeuge (F12) aufruft, dann kommt man irre weit. Da kann man sich genau die Karte oder auch die einzelnen Elemente herausfischen die man anpassen will, kann sie da auch schon in den Entwicklerwerkzeugen manipulieren und so ausprobieren wie das Ergebnis im eigenen Dashboard aussieht.

Wenn dann in den Entwicklerwerkzeuge z. B. Folgendes zu sehen ist:
image
Dann könnte man z. B. mal mit der font-size rumspielen und gleich sehen was passiert. Man kann aber auch Regeln dazunehmen.
Wenn man dann die font-size in seine Dashboard kleiner haben will, dann würde man in seiner Karte verändern will Folgendes eingeben:

card_mod:
  style: |
     .name {
         font-size: 10px !important;
         }

Das !important dient dazu, dass die Regel auch wirklich angewendet wird.

1 „Gefällt mir“