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

[hain]

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.

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 %}
      }

[bigmirror]

Den Namen kannst du folgendermaßen “stylen”:

  style: |
    .header .name {
    color: green;
    font-size: 30px;
    }

[hain]

Super klasse, danke, ist ja simpel.

[FrankS]

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

[totow]

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

[bigmirror]

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.

[hain]

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:

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.

[Fesa2702]

Kann mir jemand einen Tipp geben was da falsch ist ?

Egal was ich mache. Die Schrift wird nicht größer.

> `card_mod:`
> `style: |`
> `ha-card {`
> `height: 120px !important;`
> `background: linear-gradient(#fd0303, #ce8800);`
> `border-radius: 12px;`
> `border: 1px solid #878686;`
> `box-shadow: 2px 2px 2px #636364;`
> `}`
> `.name {`
> `font-size: 100px !important;`
> `}`
> `}`

Danke im Voraus

by HarryP: Code-/Logzeilen formatiert (bitte immer in </> einbinden)

s.a.: (Neues Update & Features - Hier in der Community 🫶)

[hain]

Wahrscheinlich ist es der Klassenname.
Guck mal ob es so klappt:

type: entity
entity: sensor.temperature
card_mod:
  style: |
    ha-card {
      height: 120px !important;
      background: linear-gradient(#fd0303, #ce8800);
      border-radius: 12px;
      border: 1px solid #878686;
      box-shadow: 2px 2px 2px #636364;
    }
    .card-header .name {
      font-size: 40px !important;
    }

100px ist aber auch irre riesig, vielleicht siehst du keinen Effekt, weil der Container die Größe limitiert.

[Fesa2702]

Danke für die schnelle Hilfe. Leider funktioniert das auch nicht.

Die 100px waren nur Test ob sich überhaupt was ändert. Hatte davor auch kleiner Werte genommen.

Könnte es noch an der Knopf Karte liegen. Also dafür vielleicht eine andere Karte nehmen?

Ziel ist eigentlich nur ein Button zur Navigation um das jeweilige Dashboard für die Familienmitglieder zu erreichen. Und ein wenig schön soll es halt auch ausehen.

[hain]

Leider habe ich momentan keine Zeit es mir genauer anzusehen.

Aber ein kurzer Hinweis, vielleicht hilft der dir.
Ich habe solche Dinge mit der Button Card by @RomRider. Die Karte ist sehr flexibel und Du findest sie über HACS (button-card / Lovelace button-card for home assistant)

Viele Grüße

[Fesa2702]

Danke.

Habs mal damit probiert. Schrift wird größer.

Aber jetzt ist das Problem mit dem Backround.

Gibt es da auch die Möglichkeit von Farbverläufen ?

Und wenn ich für den Boxen Schatten eine Farbe definiere wird diese nich übenommen.

Auch der Radius funzt nicht. wenn definiert dann wird er verzerrt dargestellt.

Aus der Dokumentation in HACS werde ich auch nicht schlauer.

Für Leien wie mich halt so leicht verständlich.

[Fesa2702]

Ok wieder ein Schritt weiter.

Jetzt noch Radius, Randfarbe und Schatten. Dann wäre es so wie gewünscht.

[Bacardi]

Du schaffst das schon, einfach weiter probieren.
Neben den Style Befehlen in der Karte selbst, kannst Du auch mit card_mod modifizieren.

    card_mod:
      style: |
        ha-card {
          --card-mod-icon-color: White;
          --ha-card-background: #F6242D;
          box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
          border: 0px solid white;
          font-size: medium;
          font-weight: normal;
          color: white;
        }

[Fesa2702]

@Bacardi

solid white

Geil

jetzt passt es so wie ich es mir vorgestellt habe.

Vielen Dank für die Hilfe.

type: custom:button-card
tap_action:
  action: navigate
  navigation_path: /energy
section_mode: true
grid_options:
  rows: 2
  columns: 6
name: Energie
show_icon: false
styles:
  card:
    - font-size: 50px
card_mod:
  style: |
    ha-card {
      height: 120px !important;
      background: linear-gradient(#53545A, #0a0a0a, #0a0a0a, #696969);
      border-radius: 12px;
      border: 1px solid #878686;
      box-shadow: 2px 2px 2px #0a0a0a;