Icons in der Auto Entities Karte ausblenden und Text linksbündig anordnen

Home Assistant 2. Sep. 2025

Einleitung
In Smart-Home-Anwendungen ist die Benutzeroberfläche entscheidend für die Benutzerfreundlichkeit. Oftmals möchten Nutzer die Darstellung ihrer Entitäten anpassen, um eine bessere Übersichtlichkeit zu erreichen. In diesem Artikel wird erläutert, wie Icons in einer Auto Entities Karte ausgeblendet und der Text linksbündig angeordnet werden kann.

Problem
Ein Nutzer möchte in seiner Auto Entities Karte alle aktiven Verbraucher anzeigen lassen, jedoch ohne die Icons und mit linksbündigem Text. Die Standarddarstellung der Karte entspricht nicht den individuellen Anforderungen des Nutzers.

Lösung
Um die Icons auszublenden und den Text linksbündig anzuordnen, kann der bestehende YAML-Code der Auto Entities Karte angepasst werden. Die Anpassungen erfolgen im card_mod-Bereich, wo CSS-Styles definiert werden können.

Hier ist der angepasste Code:

type: custom:auto-entities
card:
  type: entities
  card_mod:
    style: |
      ha-card {
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        margin-left: -70px;  # Verschiebung nach links für linksbündigen Text
      }
filter:
  include:
    - entity_id: "*stromi*"
      state: ">0"
      options:
        icon: none;  # Icons ausblenden
  exclude: []
grid_options:
  columns: 12
  rows: auto

In diesem Code wird das Icon durch die Option icon: none; ausgeblendet. Zudem wird der Text durch die negative Margenverschiebung linksbündig angeordnet.

Schritte zur Umsetzung
1. Öffne die Konfigurationsdatei deiner Home Assistant-Installation, in der die Auto Entities Karte definiert ist.
2. Ersetze den bestehenden YAML-Code durch den angepassten Code.
3. Speichere die Änderungen und lade die Benutzeroberfläche neu, um die Anpassungen zu sehen.

Hintergrundwissen
Die Auto Entities Karte ist eine benutzerdefinierte Karte in Home Assistant, die es ermöglicht, eine dynamische Liste von Entitäten basierend auf bestimmten Filtern anzuzeigen. Der card_mod-Bereich erlaubt es, CSS-Styles anzuwenden, um das Aussehen der Karte zu verändern.

Typische Fehler, die bei der Anpassung auftreten können, sind:
- Falsche Einrückungen im YAML-Code, die zu Syntaxfehlern führen.
- Vergessen, die Benutzeroberfläche neu zu laden, um die Änderungen sichtbar zu machen.

Zusätzliche Infos

FunktionErklärung
`icon: none;`Blendet das Icon der Entität aus.
`margin-left: -70px;`Verschiebt den Text nach links, um ihn linksbündig anzuordnen.
`background: none;`Setzt den Hintergrund der Karte auf transparent.
`box-shadow: none;`Entfernt den Schatten der Karte.
`border: none;`Entfernt den Rahmen der Karte.

Hinweise & Best Practices
- Teste die Änderungen in einer sicheren Umgebung, bevor du sie in einer produktiven Umgebung anwendest.
- Achte darauf, dass die CSS-Anpassungen nicht die Lesbarkeit der Karte beeinträchtigen.
- Halte die Home Assistant-Dokumentation bereit, um weitere Anpassungsmöglichkeiten zu erkunden.