Schriftgröße und Position in Mushroom-Card

[Fidibus]

Moin,
ich versuche seit gestern mit Hilfe der KI folgende Anzeige umzusetzen:

Inzwischen habe ich folgende yaml, welche aber nicht greift.

type: custom:mushroom-template-card
entity: sensor.hotwater_temp
primary: Warmwasser
secondary: "{{ states('sensor.hotwater_temp') }} °C"
icon: mdi:thermometer
icon_color: |
  {% set temp = states('sensor.hotwater_temp') | float(0) %}
  {% if temp < 30 %}
    blue
  {% else %}
    red
  {% endif %}
content: ""
tap_action:
  action: more-info
card_mod:
  style: |
    ha-card {
      /* Dynamischer Hintergrund */
      {% set temp = states('sensor.hotwater_temp') | float(0) %}
      {% if temp < 30 %}
        background: rgba(0, 0, 255, 0.3) !important;
      {% else %}
        background: rgba(255, 0, 0, 0.3) !important;
      {% endif %}
    }
    /* Zielgenaues CSS für den sekundären Text innerhalb der info Sektion */
    .info .secondary {
      font-size: 1.1em !important;
      font-weight: bold !important;
      opacity: 0.9 !important;
    }

Kann jemand noch einen Tipp geben?

 

[Nival]

mit Hilfe der KI

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        flex-flow: row nowrap !important;
        justify-content: space-between;
        --card-secondary-font-size: 30px;
        --card-primary-font-size: 30px;
        --secondary-text-color: #000;
        }

 

[Fidibus]

Moin,
danke dir für die Antwort - ich und die KI sind unfähig, diesen Code im Gesamtkontext so zu verwenden, das keine Fehler und trotzdem ein Ergebnis erreicht wird :-/.

 

[Nival]

type: custom:mushroom-template-card
entity: input_number.123
primary: Warmwasser
secondary: "{{ states('input_number.123') }} °C"
icon: mdi:thermometer
icon_color: |
  {% set temp = states('input_number.123') | float(0) %}
  {% if temp < 30 %}
    blue
  {% else %}
    red
  {% endif %}
tap_action:
  action: more-info
card_mod:
  style:
    .: |
      ha-card {
        {% set temp = states('input_number.123') | float(0) %}
        {% if temp < 30 %}
          background: rgba(0, 0, 255, 0.3) !important;
        {% else %}
          background: rgba(255, 0, 0, 0.3) !important;
        {% endif %}
      }
    mushroom-state-info$: |
      .container {
        flex-flow: row nowrap !important;
        justify-content: space-between;
        --card-secondary-font-size: 30px;
        --card-primary-font-size: 30px;
        --secondary-text-color: #000;
      }

 

[Fidibus]

Danke, aber wieso funktioniert das bei mir nicht, dein Code, mein Sensor.

type: custom:mushroom-template-card
entity: sensor.hotwater_temp
primary: Warmwasser
secondary: "{{ states('sensor.hotwater_temp') }} °C"
icon: mdi:thermometer
icon_color: |
  {% set temp = states('sensor.hotwater_temp') | float(0) %}
  {% if temp < 40 %}
    blue
  {% else %}
    red
  {% endif %}
tap_action:
  action: more-info
card_mod:
  style:
    .: |
      ha-card {
        {% set temp = states('sensor.hotwater_temp') | float(0) %}
        {% if temp < 40 %}
          background: rgba(0, 0, 255, 0.3) !important;
        {% else %}
          background: rgba(255, 0, 0, 0.3) !important;
        {% endif %}
      }
    mushroom-state-info$: |
      .container {
        flex-flow: row nowrap !important;
        justify-content: space-between;
        --card-secondary-font-size: 30px;
        --card-primary-font-size: 30px;
        --secondary-text-color: #000;
      }

 

[Nival]

Mal mit Ctrl + F5 versucht?

 

[Fidibus]

Moin, ja. Kein Erfolg!

 

[Nival]

Da waren dann wohl mal Updates nötig...

With the latest release, the Mushroom Template Card has been redesigned to align with the official Home Assistant Tile Card.
This is a breaking change, and if you are using Card Mod or relying on old theme variables, you may need to adapt your setup.

...werden sich einige Leute sehr gefreut haben

So funktionierts in der aktuellsten Version:

card_mod:
  style:
    .: |
      ha-card {
        {% set temp = states('input_number.123') | float(0) %}
        {% if temp < 30 %}
          background: rgba(0, 0, 255, 0.3) !important;
        {% else %}
          background: rgba(255, 0, 0, 0.3) !important;
        {% endif %}
      }
      #info {
        width:100%;
      }
      #info span {
        width:auto !important;
      }
    ha-tile-info$: |
      .info {
        width:100%;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        --tile-info-primary-font-size: 30px;
        --tile-info-secondary-font-size: 30px;
        --tile-info-secondary-color: #000;
        --tile-info-secondary-font-weight: 500;
      }

 

[Holzfred]

Vielleicht hilft Dir ja das. Ich hab aus HACS die Button-Card geladen und dann mit meinem besten Freund ChatGPT das so gebastelt. Aussehen tuts dann wie im Bild und es wird bei unter 50°C blau.

type: custom:button-card
entity: water_heater.dhw1
name: Warmwasserspeicher
show_icon: false
show_name: true
show_state: true
styles:
  grid:
    - grid-template-areas: "\"n s\""
    - grid-template-columns: 1fr auto
    - grid-template-rows: 1fr
  card:
    - height: 50px
    - border-radius: 16px
    - padding: 12px 16px
    - transition: background-color 0.3s ease
    - background-color: |
        [[[
          const t = entity?.attributes?.current_temperature;
          if (t >= 51) return 'rgba(255, 0, 0, 1)';   // Rot ab 51 °C
          if (t < 51) return 'rgba(0, 150, 255, 0.9)';   // Blau unter 50 °C
          return 'var(--card-background-color)';          // neutral bei genau 50 °C
        ]]]
  name:
    - justify-self: start
    - align-self: center
    - font-size: 1.4em
    - font-weight: 600
  state:
    - justify-self: end
    - align-self: center
    - font-size: 1.6em
    - font-weight: 600
state_display: |
  [[[
    const t = entity?.attributes?.current_temperature;
    if (t === undefined || t === null) return '—';
    // Falls du keine Nachkommastelle willst: Math.round(t)
    return t.toFixed(1) + ' °C';
  ]]]

 

[Fidibus]

@Holzfred - ja, das funzt bei mir schon, es ging mir eigentlich nur um die bessere Lesbarkeit des Temperaturwertes!
Danke!

 

[Fidibus]

@Nival : Yes! Die Card hat hin und wieder auf ein durchgeführtes Update verwiesen. Ok, war kein Problem.
Nur dass er dann die Konfig nicht mehtr verstanden hat

 

[Nival]

@Fidibus aber so funktionierts jetzt auch bei Dir, ja?

Nur dass er dann die Konfig nicht mehtr verstanden hat

Ja... ich hab auch minimal unamüsiert geschaut als es nach den Updates nicht mehr lief. Aber hey, dann kriecht man halt nochmal durch das HTML und schaut, was die Elemente sich so denken.

 

[Fidibus]

Ja @Nival , ich konnte deine Vorlage auch schon modifiziert wo anders nutzen. Danke.