Custom-Button-Card Status in Custom Field ändern

andifidi · 11. März 2026 um 22:38

Ich hatte die Idee in einem CustumButton den Status einer zusätzlichen Entität anzeigen zu lassen

(Device Tracker Sonos Lautsprecher), nur gefällt mir der Text ‚home‘ und ‚away‘ nicht. Diesen möchte ich mit ‚online‘ oder ‚offline‘ ersetzen. Aber irgendwie funktioniert der Syntax nicht. Es gibt zwar keine Fehlermeldung aber es wird nichts angezeigt.

Hier der gesamte YamlCode, der betroffene Abschnitt wäre dann ‚custom field‘

type: custom:button-card
name: Wohn
icon: mdi:speaker-wireless
entity: switch.steckdose_sonos_wz
color: auto
size: 20%
show_state: false
show_label: true
aspect_ratio: 1.7/0.9
tap_action:
  action: toggle
styles:
  card:
    - border-radius: 12px
  label:
    - color: gray
    - font-size: 11px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
  state:
    - font-size: 11px
    - padding: 0px 10px
    - justify-self: start
    - text-transform: capitalize
    - font-weight: normal
    - padding-left: 10px
  grid:
    - grid-template-areas: "\"i\" \"n\" \"s\" \"l\""
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  img_cell:
    - align-self: center
    - text-align: start
    - margin-left: 0px
  name:
    - justify-self: center
    - padding: 2px 0px 10px 0px;
    - padding-left: 0 px
    - font-weight: normal
    - font-family: Helvetica
    - font-size: 11px
  custom_fields:
    Sets:
      - position: absolute
      - padding: 30px 0px 0px 34px;
      - color: "#37823a"
      - font-weight: normal
      - font-family: Helvetica
      - font-size: 11px
custom_fields:
  Sets: |

    [[[if (states["device_tracker.sonos_wohnzimmerl"].state === 'home') return
        'Online'; if (states["device_tracker.sonos_wohnzimmerl"].state === 'away') return
        'Offline';]]]
state:
  - value: "on"
    styles:
      icon:
        - color: "#37823a"
      name:
        - color: "#37823a"
      state:
        - color: "#37823a"
  - value: "off"
    styles:
      icon:
        - color: "#ce717c"
      name:
        - color: "#ce717c"
      state:
        - color: "#ce717c"

Gruß, AndiFidi

Schlumperdix · 12. März 2026 um 04:40

andifidi:

ustom_fields:
  Sets: |

    [[[if (states["device_tracker.sonos_wohnzimmerl"].state === 'home') return
        'Online'; if (states["device_tracker.sonos_wohnzimmerl"].state === 'away') return
        'Offline';]]]

Mal blöd gefragt… wo kommt das Snippet denn her? Das sieht nen bischen durcheinander aus… Ich würde da auch keine unterschiedlichen Anführungszeichen verwenden. ‘, “ und ` macht in JavaScript auch Unterschiede…
Ich würde da auch ein else angeben, da device Tracker auch mehr Zustände als nur home und away haben. Eventuell wirft das sonst Fehler, wenn nicht home und nicht away der aktuelle Status ist.

Versuchs mal so:

custom_fields:
  Sets: |
    [[[
      if (states['device_tracker.sonos_wohnzimmerl'].state === 'home') {
        return 'Online';
      } else if (states['device_tracker.sonos_wohnzimmerl'].state === 'not_home') {
        return 'Offline';
      } else {
        return 'Unbekannt';
      }
    ]]]

in den Styles hast du auch Fehler… am Ende der Zeilen steht bei der Button Card kein Semikolon. Das kann Fehler verursachen bzw. in YAML ignorieren verursachen.

Das Semikolon wird nur direkt in CSS geschrieben. Kommt bei dir immer bei padding… btw

    - padding: 2px 0px 10px 0px;
    - padding-left: 0 px

Das ist im Prinzip auch falsch. Padding ist schon für alle Richtungen definiert. du definierst aber nochmal padding-left. Das px gehört ohne Leerzeichen an die Zahl… das funklioniert sonst auch nicht korrekt…

andifidi · 12. März 2026 um 06:30

Hi @Schlumperdix Das war ein gutes Stück Nachhilfe für mich. Vielen Dank, angezeigt wird es aber ich muss am Design arbeiten. Das ist das, was ich glaube ich noch nicht ganz verstanden habe.

Der Code ist nun folgendermaßen:

type: custom:button-card
name: Wohn
icon: mdi:speaker-wireless
entity: switch.steckdose_sonos_wz
color: auto
size: 20%
show_state: false
show_label: true
aspect_ratio: 1.7/1.0
tap_action:
  action: toggle
styles:
  card:
    - border-radius: 12px
  label:
    - color: gray
    - font-size: 11px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
  name:
    - justify-self: center
    - padding-bottom: 14px;
    - font-weight: normal
    - font-family: Helvetica
    - font-size: 11px
  custom_fields:
    Sets:
      - position: absolute
      - padding-left: 40px;
      - padding-top: 25px;
      - color: gray
      - font-weight: normal
      - font-family: Helvetica
      - font-size: 11px
custom_fields:
  Sets: |
    [[[
      if (states['device_tracker.sonos_wohnzimmerl'].state === 'home') {
        return 'Online';
      } else if (states['device_tracker.sonos_wohnzimmerl'].state === 'not_home') {
        return 'Offline';
      } else {
        return 'Unbekannt';
      }
    ]]]
state:
  - value: "on"
    styles:
      icon:
        - color: "#37823a"
      name:
        - color: "#37823a"
      state:
        - color: "#37823a"
  - value: "off"
    styles:
      icon:
        - color: "#ce717c"
      name:
        - color: "#ce717c"
      state:
        - color: "#ce717c"

Das Ergebnis sieht dann so aus:

Und eigentlich möchte ich den Text ja untereinander und zentriert haben, wie mache ich das?

PS: Der Code für die Customfields stammt in teilen vom englischsprachigen Forum.

Schlumperdix · 12. März 2026 um 16:48

Hi…

Also ich glaube ich würde da eher mit nem Grid arbeiten…

type: custom:button-card
name: Wohn
icon: mdi:speaker-wireless
entity: switch.steckdose_sonos_wz
aspect_ratio: 1.7/1.0
color: auto
size: 20%
show_state: false
show_label: false

tap_action:
  action: toggle

styles:
  card:
    - border-radius: 12px
    - padding: 10% 0
  grid:
    - grid-template-areas: '"i" "n" "Sets"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  icon:
    - color: "#ce717c"
  name:
    - font-family: Helvetica
    - font-size: 11px
    - color: "#ce717c"
  custom_fields:
    Sets:
      - margin: 10px 0 0 0
      - font-family: Helvetica
      - font-size: 11px
      - color: gray

custom_fields:
  Sets: |
    [[[
      if (states['device_tracker.sonos_wohnzimmerl'].state === 'home') {
        return 'Online';
      } else if (states['device_tracker.sonos_wohnzimmerl'].state === 'not_home') {
        return 'Offline';
      } else {
        return 'Unbekannt';
      }
    ]]]

state:
  - value: "on"
    styles:
      icon:
        - color: "#37823a"
      name:
        - color: "#37823a"
      state:
        - color: "#37823a"
  - value: "off"
    styles:
      icon:
        - color: "#ce717c"
      name:
        - color: "#ce717c"
      state:
        - color: "#ce717c"

hinter Die Styles kommt kein Semikolon. Das gehört nur in CSS Dateien hinter die Styles.
JavaScript wird mit nem Semikolon beendet. Das habe ich mal korrigiert

Zur Erklärung des Grid:

    - grid-template-areas: '"i" "n" "Sets"'

das beschreibt die Areas. i steht für das Icon, n steht für Name. Sets ist dein selbst definiertes Feld

- grid-template-columns: 1fr

das bedeutet eigentlich nur, das die gesamte Breite genommen wird und es nur eine Spalte gibt. Damit steht i n und Sets untereinander (also 3 Zeilen in einer Spalte)

- grid-template-rows: 1fr min-content min-content

das bestimmt die Höhe der Zeilen. In dem Fall:
i bekommt 1fr (der übrigen Teil), min-content jewels für name und dein Sets. Die bekommen den Minum Anteil an Höhe die Sie benötigen um vollständig angezeigt zu werden. Alles was überbleibt bekommt dann das Icon, also den Großzügigeren Teil. Das deshalb, weil du die Größe ja dynamisch auf 20% gesetzt hast…

- justify-self: center

wird nicht mehr benötigt. Die Ausrichtung erfolgt standardmäßig horizontal zentriert

- margin: 10px 0 0 0

Das gibt die Abstand zwichen Name und Sets. So wird das gelesen:

margin: oben rechts unten links

label war bei dir auf true gesetzt. Wird aber nicht verwendet und ist nicht definiert. Habe ich auf false gesetzt.

Das nur damit du das auch maintainen kannst.

Guck mal ob das jetzt so passt…

andifidi · 12. März 2026 um 18:26

Hi @Schlumperdix

Jetzt funktioniert es auch wie ich es mir gedacht habe:

Deine „Anleitung“ werde ich mir ausdrucken und bei der nächsten Überarbeitung der custumbuttons in jedem Fall abgleichen. Vielen Dank für die sehr gute Erklärung

Grüße, AndiFidi

Schlumperdix · 13. März 2026 um 03:41

Freut mich das es funktioniert.

Thema		Antworten	Aufrufe
Status Text ändern für einen device_tracker Dashboard/Cards/Frontend templating , yaml	1	257	29. März 2023
Button Card mit drittem Inhalt Dashboard/Cards/Frontend	6	247	24. November 2024
Custom Button Card wird nur auf Desktop PC richtig angezeigt, auf mobilen Geräten nicht Dashboard/Cards/Frontend templating , yaml , ai	5	89	26. Oktober 2025
Custom fields position Dashboard/Cards/Frontend templating , yaml	2	83	24. Oktober 2024
Custom button card: Wert für State ändern? Dashboard/Cards/Frontend templating , yaml	8	1276	31. März 2024

Custom-Button-Card Status in Custom Field ändern

Verwandte Themen