Schriftgröße ändern bei HA Kachelkarten (Card_mod3)

Einleitung
Die Anpassung von Schriftgrößen in Kachelkarten (Cards) innerhalb von Home Assistant (HA) ist für viele Benutzer von Bedeutung, um die Lesbarkeit und das Design ihrer Benutzeroberfläche zu optimieren. Insbesondere bei der Verwendung von card_mod, einem beliebten Custom-Card-Modul, können Benutzer die Darstellung ihrer Kacheln individuell gestalten.

Problem
Ein Benutzer möchte die Schriftgröße in einer Kachelkarte ändern, hat jedoch Schwierigkeiten, die richtigen CSS-Klassen zu identifizieren und anzupassen. Während er bereits die Größe der Kachel selbst ändern konnte, bleibt die Schriftgröße unverändert, was zu einer inkonsistenten Darstellung führt.

Lösung
Um die Schriftgröße in einer Kachelkarte zu ändern, ist es notwendig, die entsprechenden CSS-Klassen anzusprechen. Der Benutzer hat bereits einen Ansatz mit card_mod versucht, jedoch die falschen Klassen verwendet. Die korrekten Klassen für die Anpassung der Schriftgröße sind .name für den Namen und .value für den Wert. Hier ist der angepasste Code:

type: entity
entity: binary_sensor.kontakt_wohnzimmer_fenster
state_color: true
icon: mdi:window-closed-variant
name: Fenster
card_mod:
  style: |
    .name {
       font-size: 10px !important;
    }
    .value {
       font-size: 10px !important;
    }
    .icon {
       --mdc-icon-size: 10px;
    }

Mit diesem Code kannst du die Schriftgröße für den Namen und den Wert der Kachel anpassen. Das !important-Tag stellt sicher, dass diese Stile Vorrang vor anderen CSS-Regeln haben.

Schritte zur Umsetzung
1. Öffne die Konfigurationsdatei deiner Kachelkarte in Home Assistant.
2. Ersetze den bestehenden card_mod-Block durch den oben angegebenen Code.
3. Passe die Werte für font-size und --mdc-icon-size nach deinen Wünschen an.
4. Speichere die Änderungen und lade die Benutzeroberfläche neu, um die Anpassungen zu sehen.

Hintergrundwissen
card_mod ist ein leistungsstarkes Tool in Home Assistant, das es Benutzern ermöglicht, das Aussehen von Karten durch CSS-Anpassungen zu verändern. CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Layout und das Design von Webseiten zu beschreiben. Um die richtigen Klassen zu finden, ist es hilfreich, die Entwicklertools deines Browsers zu verwenden, um die Struktur der Kachel zu untersuchen.

Typische Fehler sind:
- Falsche CSS-Klassen ansprechen.
- Vergessen, !important zu verwenden, was dazu führen kann, dass die Änderungen nicht angewendet werden.
- Nicht alle Änderungen werden sofort sichtbar, wenn die Benutzeroberfläche nicht aktualisiert wird.

Zusätzliche Infos

Hinweise & Best Practices
- Nutze die Entwicklertools deines Browsers, um die Struktur der Kachel zu analysieren und die richtigen Klassen zu finden.
- Teste verschiedene Schriftgrößen, um die beste Lesbarkeit zu erreichen.
- Halte deine Anpassungen dokumentiert, um zukünftige Änderungen zu erleichtern.
- Achte darauf, dass die Änderungen auf verschiedenen Geräten und Bildschirmgrößen gut aussehen.