Namen der Entity in Header-Card inkl. Icon in Rot darstellen

Dashboard/Cards/Frontend
, ,
1

Liebes Forum,

ich möchte nicht nur das Temperatur-Icon in der Header-Card Rot einfärben, wenn die Temperatur im Serverschrank größer als 30 Grad ist, sondern auch den Namen und den State der Entity (hier: “Temp · 32,5°C”).

image
image535×128 10.3 KB

Leider scheitere ich daran; auch sämtliche Vorschäge von ChatGPT funktionieren nicht.
Könnt Ihr mir bitte helfen? Hier ist mein aktueller Code:

type: heading
icon: phu:desktop-computer
heading: Serverraum
heading_style: title
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.sonoff_temperaturfuehler_serverschrank_temperature
    name: Temp
    state_content:
      - name
      - state
  - type: entity
    show_state: true
    show_icon: true
    entity: switch.shellysteckdoseluefterserverschrank
    name: Lüfter
    state_content:
      - name
      - state
    tap_action:
      action: toggle
card_mod:
  style:
    .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: >
      ha-heading-badge {
      {% if 
        states('sensor.sonoff_temperaturfuehler_serverschrank_temperature') |
        float >= 30 %}
        --icon-color: red;
      {% else %}
        --icon-color: grey;
      {% endif %} }

Herzlichen Dank vorab für Eure Unterstüzung.

2

für’s icon …

card_mod:
  style:
    hui-heading-badge:nth-child(1):
      hui-entity-heading-badge$: |
        ha-state-icon {
          {% set x = states('sensor.sonoff_temperaturfuehler_serverschrank_temperature') | float(0) %}
          {% if x >= 30 %}
             color: red !important;
          {% else %}
             color: blue !important;
          {% endif %}
        }

und für’s state display halt noch

        state-display {
          {% set x = states('sensor.sonoff_temperaturfuehler_serverschrank_temperature') | float(0) %}
          {% if x >= 22 %}
             color: red !important;
          {% else %}
             color: blue !important;
          {% endif %}

image
image447×311 18.5 KB

da sind die 2, das ha-state-icon und auf der selben ebene das state-display

3

Yeah!!! Herzlichen Dank. Das ist die Lösung :handshake: