Anpassung des Avatar-Stils in der Mushroom Entity Card
Einleitung
In Smart-Home-Anwendungen ist die visuelle Darstellung von Informationen entscheidend für die Benutzerfreundlichkeit. Die Anpassung von Kartenstilen in Home Assistant ermöglicht es, die Benutzeroberfläche individuell zu gestalten. In diesem Artikel wird erläutert, wie man das Avatar-Bild in einer Mushroom Entity Card quadratisch mit abgerundeten Ecken darstellt.
Problem
Ein Benutzer möchte das Avatar-Bild in einer Mushroom Entity Card in Home Assistant quadratisch mit abgerundeten Ecken darstellen. Trotz erfolgreicher Anpassungen im Developer-Tool gelingt es ihm nicht, diese Änderungen in die Konfiguration von Home Assistant zu übertragen.
Lösung
Die Lösung besteht darin, den CSS-Stil für die Karte korrekt zu definieren. Anstatt die Anpassungen tief in die Struktur der Karte einzufügen, sollte der --icon-border-radius direkt im ha-card-Stil gesetzt werden. Dies stellt sicher, dass die Anpassungen auch nach zukünftigen Updates von Card-Mod weiterhin funktionieren.
Hier ist der angepasste Code:
type: custom:mushroom-entity-card
entity: person.leonie
icon_type: entity-picture
card_mod:
style: |
ha-card {
background-color:
{% if is_state("person.leonie", "home") %}
#F5F5F5
{% else %}
#1B3C56
{% endif %};
--card-primary-color:
{% if is_state("person.leonie", "home") %}
black
{% else %}
white
{% endif %};
--card-secondary-color:
{% if is_state("person.leonie", "home") %}
#7A889B
{% else %}
#A6AFBD
{% endif %};
--card-primary-font-size: 15px;
--card-secondary-font-size: 15px;
--card-primary-font-weight: 500;
--card-secondary-font-weight: 500;
--icon-border-radius: 6px !important;
}
Schritte zur Umsetzung
1. Öffne die Konfigurationsdatei für deine Home Assistant-Karten.
2. Füge den oben angegebenen YAML-Code in die entsprechende Stelle ein.
3. Speichere die Änderungen und lade die Benutzeroberfläche neu, um die Anpassungen zu sehen.
Hintergrundwissen
Die Mushroom Entity Card ist eine benutzerdefinierte Karte in Home Assistant, die es ermöglicht, verschiedene Entitäten anzuzeigen. CSS-Anpassungen können über die card_mod-Integration vorgenommen werden, die es ermöglicht, das Aussehen von Karten zu verändern, ohne die zugrunde liegenden Komponenten zu modifizieren. Die Verwendung von CSS-Variablen wie --icon-border-radius ermöglicht eine einfache Anpassung des Aussehens von Icons und Bildern.
Zusätzliche Infos
| Funktion | Erklärung |
|---|---|
| `--icon-border-radius` | Definiert den Radius der Ecken des Icons, um abgerundete Ecken zu erzeugen. |
| `background-color` | Setzt die Hintergrundfarbe der Karte basierend auf dem Status der Entität. |
| `--card-primary-color` | Bestimmt die primäre Textfarbe der Karte. |
| `--card-secondary-color` | Bestimmt die sekundäre Textfarbe der Karte. |
| `--card-primary-font-size` | Legt die Schriftgröße für den primären Text fest. |
| `--card-secondary-font-size` | Legt die Schriftgröße für den sekundären Text fest. |
Hinweise & Best Practices
- Stelle sicher, dass die card_mod-Integration in deiner Home Assistant-Installation aktiviert ist, um CSS-Anpassungen vornehmen zu können.
- Teste Änderungen im Developer-Tool, bevor du sie in die Konfiguration überträgst, um sicherzustellen, dass sie wie gewünscht funktionieren.
- Halte deine Home Assistant-Installation und alle benutzerdefinierten Karten auf dem neuesten Stand, um Komplikationen bei zukünftigen Updates zu vermeiden.