Ja, ist mit HA erstellt.
Allerdings habe ich einige Zusätze aus dem HACS installiert.
Zufrieden bin ich nicht, aber momentan bastel ich lieber an Funktionen und Automationen, als am Design…
01 Dashboard-Typ: Sections-View
Die Seite nutzt den modernen Sections-View (type: sections, max_columns: 2), der seit HA 2024.x verfügbar ist. Er erlaubt ein flexibles Grid aus mehreren Abschnitten, die sich auf Mobilgeräten automatisch stapeln.
Meine Hauptseite hat drei Sections:
- Links: Uhr, Wetter, Status-Buttons
- Rechts: Raum-Karten (je ein Bereich)
- Unten (volle Breite,
column_span: 2): Meldungen & Aktionen
02 Hintergrund & Glassmorphism-Effekt
Das ist das visuelle Herzstück: Ein Texturfoto (ich habe ein kostenloses Pixabay-Bild verwendet) wird in Einstellungen → Medien → Bilder hochgeladen und als View-Hintergrund gesetzt:
`background:
image: media-source://image_upload/...
opacity: 33
size: cover
attachment: fixed # wichtig: Parallax-Effekt`
Jede einzelne Karte bekommt dann dasselbe Foto als background-image, kombiniert mit einer halbtransparenten dunklen Farbe und dem entscheidenden Trick:
`ha-card {
background-image: url('/api/image/serve/<ID>/512x512');
background-size: cover;
background-color: rgba(60, 60, 60, 0.45);
background-blend-mode: multiply; # Bild + Farbe verschmelzen
box-shadow: 0 8px 32px rgba(0,0,0,0.75),
inset 0 1px 0 rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 16px;
}`
Warum dasselbe Bild auf jeder Karte? Weil background-attachment: fixed am View nicht auf einzelne Karten vererbt wird. Man täuscht den Effekt nach: Karte und Hintergrund zeigen dasselbe Bild, der Browser rendert es nahezu identisch – der “Glasscheibe vor der Wand”-Eindruck entsteht.
03 Verwendete HACS-Erweiterungen
Alle vier Erweiterungen sind Frontend-only (keine Backend-Integrationen) und über HACS installierbar.
| Erweiterung |
Wofür |
| card_mod |
CSS-Anpassungen auf jeder beliebigen Karte – das Glassmorphism-Styling oben läuft komplett darüber |
| button-card |
Hausstatus-Karte mit dynamischer Hintergrundfarbe per JavaScript, Gäste-Toggle, Abfahrten-Button |
| mushroom-cards |
Meldungs-Karte mit dynamischem Icon und Farbe per Jinja2-Template |
| browser_mod |
Popup für den Abfahrtsmonitor – öffnet eine Overlay-Karte ohne Seitenwechsel |
04 Die einzelnen Karten erklärt
Uhr & Wetter
Beides sind Standard-HA-Karten (type: clock und type: weather-forecast), die nur durch card_mod das Glassmorphism-Styling bekommen. Kein HACS nötig.
Hausstatus / Gäste / Abfahrten
Ein horizontal-stack mit drei button-cards. Der interessante Teil ist die Hausstatus-Karte: Sie liest einen Template-Sensor und färbt sich dynamisch via JavaScript im styles:-Block:
`styles:
card:
- background-color: >
[[[
const s = states['sensor.house_status_label'].state;
if (s === 'Zuhause') return 'rgba(76,175,80,0.2)';
if (s === 'Gäste') return 'rgba(33,150,243,0.2)';
if (s === 'Abwesend') return 'rgba(255,152,0,0.2)';
if (s === 'Urlaub') return 'rgba(156,39,176,0.2)';
]]]`
Der Abfahrten-Button öffnet per browser_mod.popup ein Overlay mit Echtzeit-Abfahrtszeiten für Bus und Bahn, befüllt aus einer Custom Integration die eine ÖPNV-API abfragt. Die Tabellen sind einfache Markdown-Karten mit Jinja2-Template.
Raum-Karten
Vier native Area-Karten (type: area, display_type: picture) für die einzelnen Räume. HA zieht sich automatisch Temperatur, Feuchte, Bewegungsmelder und Fensterkontakte aus dem jeweiligen Bereich. Tippen navigiert zum Raum-spezifischen Dashboard.
`type: area
area: wohnzimmer
display_type: picture
alert_classes: [motion, moisture, opening]
sensor_classes: [temperature, humidity]
tap_action:
action: navigate
navigation_path: /dashboard-wohnen`
Meldungs-Karte
Eine mushroom-template-card, die zwischen zwei Zuständen wechselt: Ist sensor.warning_level > 0, zeigt sie eine Warnung (z.B. von CO-Melder oder Feuchtigkeitssensor) in Rot/Orange und verlinkt zur Sicherheitsseite. Sonst zeigt sie unauffällig die nächste Müllabfuhr-Leerung. Icon, Farbe und Badge-Farbe werden alle per Jinja2-Template gesetzt.
05 Template-Sensor: Hausstatus
Die Karte liest keinen Input-Select direkt, sondern einen Template-Sensor (sensor.house_status_label), der den internen englischen Wert (home, away…) ins Deutsche übersetzt. Das hält die Automatisierungslogik sauber englisch, während im Dashboard Deutsch angezeigt wird.
Wenn Fragen zu den einzelnen YAML-Blöcken sind, einfach fragen – ich kann Details gerne rausrücken.HA 2026.7.1 · card_mod · button-card · mushroom · browser_mod
