Sauber umsetzen

Bevor du das YAML übernimmst

Nimm den Code als Vorlage, nicht als blind kopierbaren Endzustand. Die entscheidenden Stellen solltest du vor dem Speichern an dein eigenes Setup anpassen.

Voraussetzungen
  • Laufendes Home Assistant
  • Browser Mod und Kiosk-Mode
  • Eigene Entity-IDs und Dashboard-Pfade
Hilft dir bei

Dashboard-Projekt · Fortgeschritten · Eigene Werte anpassen

Bei YAML immer anpassen
  • Entity-IDs und Bereiche
  • Pfadnamen, Browser-IDs oder Helfer
  • Installierte Custom Cards und Integrationen

Diese aktualisierte Sidebar-Konfiguration ist die globale Navigation für das Dashboard /dashboard-haus. Sie enthält Datum, digitale Uhr mit Sekunden, die wichtigsten Menüpunkte und mehrere Bottom Cards für direkte Status- und Schnellaktionen.

Was neu ist

  • Breite angepasst: Tablet von 25 auf 30, Desktop von 18 auf 21.
  • Abendlicht ergänzt: light.licht_abend sitzt jetzt als eigene Mushroom Entity Card in den Bottom Cards.
  • Türstatus erweitert: lock.aqara_smart_lock_u200 und lock.haustur_offner nutzen Glow-Farben für abgeschlossen, offen und Aktion.
  • Wetter und Vollbild: weather.weather_at_8215 und input_boolean.fullscreen bleiben direkt in der Sidebar erreichbar.
  • Kiosk-Mode gekoppelt: Header und Sidebar werden über input_boolean.fullscreen ein- und ausgeblendet.

Kompletter aktueller Sidebar-Code

YAML-Hilfe

Vor dem Einsetzen kurz prüfen

  • Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
  • Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
  • Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.
YAML
sidebar:
  width:
    mobile: 0
    tablet: 30
    desktop: 21
  title: null
  date: true
  digitalClock: true
  digitalClockWithSeconds: true
  dateFormat: dddd DD.MM.YYYY
  sidebarMenu:
    - name: Start
      icon: mdi:home
      action: navigate
      navigation_path: /dashboard-haus/haus
      active: true
    - name: Radio
      icon: mdi:radio
      action: navigate
      navigation_path: /dashboard-haus/radio
      active: true
    - name: Licht
      icon: mdi:lightbulb-multiple
      action: navigate
      navigation_path: /dashboard-haus/licht
      active: true
    - name: Kamera
      icon: mdi:cctv
      action: navigate
      navigation_path: /dashboard-haus/kamera
      active: true
    - name: Fenster + Türen
      icon: mdi:door-closed
      action: navigate
      navigation_path: /dashboard-haus/fenster-turen
      active: true
    - name: Batterie
      icon: mdi:battery-high
      action: navigate
      navigation_path: /dashboard-haus/batterie
      active: true
  bottomCard:
    type: custom:vertical-stack-in-card
    cardOptions:
      cards:
        - type: custom:mushroom-entity-card
          entity: light.licht_abend
          name: Abendlicht
          icon: mdi:lightbulb
          icon_color: white
          fill_container: true
          primary_info: state
          secondary_info: name
          layout: horizontal
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                  {% set state_entity = 'light.licht_abend' %}
                  {% if is_state(state_entity, 'off') %}
                    --shape-color: rgb(100, 100, 100) !important;
                    --icon-color: white !important;
                    --shape-animation: none;
                    opacity: 0.6;
                    --glow-1: none; --glow-2: none; --glow-3: none; --glow-anim: none;
                  {% elif is_state(state_entity, 'on') %}
                    --shape-color: rgb(255, 193, 8) !important;
                    --icon-color: white !important;
                    --shape-animation: light-glow 1.6s ease-in-out infinite;
                    opacity: 1;
                    --glow-1: 0 0 25px 8px rgba(255, 193, 8, 1);
                    --glow-2: 0 0 55px 18px rgba(255, 193, 8, 0.7);
                    --glow-3: 0 0 95px 35px rgba(255, 193, 8, 0.45);
                    --glow-anim: none;
                  {% else %}
                    --shape-animation: none;
                    --glow-1: none; --glow-2: none; --glow-3: none; --glow-anim: none;
                    opacity: 0.6;
                  {% endif %}
                  transform-origin: 50% 50%;
                  position: relative;
                }
                .shape::before, .shape::after {
                  content: '';
                  position: absolute;
                  inset: -8px;
                  border-radius: inherit;
                  pointer-events: none;
                }
                .shape::before {
                  box-shadow: var(--glow-1), var(--glow-2), var(--glow-3);
                  animation: var(--glow-anim);
                }
                .shape::after {
                  inset: -18px;
                  box-shadow: var(--glow-1);
                  opacity: 0.9;
                  animation: var(--glow-anim);
                }
                @keyframes light-glow {
                  0% { transform: scale(0.98); }
                  50% { transform: scale(1.02); }
                  100% { transform: scale(0.98); }
                }
              mushroom-state-info$: |
                .container {
                  --card-primary-font-size: 18px;
                  --card-primary-font-weight: 300;
                  --card-secondary-font-size: 15px;
                  --card-secondary-font-weight: 500;
                  margin-top: -45px;
                  margin-left: 5px;
                  text-align: right;
                }
                .secondary {
                  font-size: var(--card-primary-font-size) !important;
                  font-weight: var(--card-primary-font-weight) !important;
                  color: white !important;
                  position: absolute;
                  bottom: 5px;
                  right: 10px;
                }
                .primary {
                  font-size: var(--card-secondary-font-size) !important;
                  font-weight: var(--card-secondary-font-weight) !important;
                  {% if is_state('light.licht_abend', 'off') %}
                    color: rgb(150, 150, 150) !important;
                  {% elif is_state('light.licht_abend', 'on') %}
                    color: rgb(255, 193, 8) !important;
                  {% else %}
                    color: rgb(150, 150, 150) !important;
                  {% endif %}
                  text-align: right;
                  position: absolute;
                  top: 5px;
                  right: 10px;
                }
              .: |
                mushroom-shape-icon {
                  --icon-size: 40px;
                  display: flex;
                  margin: -45px -10px -11px -9px !important;
                  padding-right: 80px;
                }
                ha-card {
                  clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
                  border: none;
                  margin-bottom: 10px;
                  min-height: 90px !important;
                  max-height: 90px !important;
                  height: 90px !important;
                  padding: 10px 0 !important;
                }
        - type: custom:mushroom-entity-card
          entity: lock.aqara_smart_lock_u200
          name: Haustür
          icon_color: white
          fill_container: true
          primary_info: state
          secondary_info: name
          layout: horizontal
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                  {% set state_entity = 'lock.aqara_smart_lock_u200' %}
                  {% if is_state(state_entity, 'locked') %}
                    --shape-color: rgb(0, 161, 136) !important;
                    --icon-color: white !important;
                    opacity: 1;
                    --glow-1: 0 0 25px 8px rgba(0, 161, 136, 1);
                    --glow-2: 0 0 55px 18px rgba(0, 161, 136, 0.7);
                    --glow-3: 0 0 95px 35px rgba(0, 161, 136, 0.45);
                    --glow-anim: none;
                  {% elif is_state(state_entity, 'unlocked') %}
                    --shape-color: rgb(102, 0, 0) !important;
                    --icon-color: white !important;
                    opacity: 1;
                    --glow-1: 0 0 25px 8px rgba(102, 0, 0, 1);
                    --glow-2: 0 0 55px 18px rgba(102, 0, 0, 0.7);
                    --glow-3: 0 0 95px 35px rgba(102, 0, 0, 0.45);
                    --glow-anim: lock-ultraglow 2.2s ease-in-out infinite;
                  {% elif is_state(state_entity, 'unlocking') or is_state(state_entity, 'locking') %}
                    --shape-color: rgb(255, 165, 0) !important;
                    --icon-color: white !important;
                    opacity: 1;
                    --glow-1: 0 0 25px 8px rgba(255, 165, 0, 1);
                    --glow-2: 0 0 55px 18px rgba(255, 165, 0, 0.7);
                    --glow-3: 0 0 95px 35px rgba(255, 165, 0, 0.45);
                    --glow-anim: lock-ultraglow 2.2s ease-in-out infinite;
                  {% else %}
                    --glow-1: none; --glow-2: none; --glow-3: none; --glow-anim: none;
                    opacity: 0.6;
                  {% endif %}
                  transform-origin: 50% 50%;
                  position: relative;
                }
                .shape::before, .shape::after {
                  content: '';
                  position: absolute;
                  inset: -8px;
                  border-radius: inherit;
                  pointer-events: none;
                }
                .shape::before {
                  box-shadow: var(--glow-1), var(--glow-2), var(--glow-3);
                  animation: var(--glow-anim);
                }
                .shape::after {
                  inset: -18px;
                  box-shadow: var(--glow-1);
                  opacity: 0.9;
                  animation: var(--glow-anim);
                }
                @keyframes lock-ultraglow {
                  0% { opacity: 0.9; filter: brightness(1); }
                  50% { opacity: 1; filter: brightness(1.4); }
                  100% { opacity: 0.9; filter: brightness(1); }
                }
                @keyframes lock-action {
                  0% { transform: rotate(-25deg) scale(0.96); }
                  50% { transform: rotate(25deg) scale(1.04); }
                  100% { transform: rotate(-25deg) scale(0.96); }
                }
                @keyframes lock-open {
                  0% { transform: rotate(10deg); }
                  50% { transform: rotate(18deg); }
                  100% { transform: rotate(10deg); }
                }
              mushroom-state-info$: |
                .container {
                  --card-primary-font-size: 18px;
                  --card-primary-font-weight: 300;
                  --card-secondary-font-size: 15px;
                  --card-secondary-font-weight: 500;
                  margin-top: -45px;
                  margin-left: 5px;
                  text-align: right;
                }
                .secondary {
                  font-size: var(--card-primary-font-size) !important;
                  font-weight: var(--card-primary-font-weight) !important;
                  color: white !important;
                  position: absolute;
                  bottom: 5px;
                  right: 10px;
                }
                .primary {
                  font-size: var(--card-secondary-font-size) !important;
                  font-weight: var(--card-secondary-font-weight) !important;
                  {% if is_state('lock.aqara_smart_lock_u200', 'locked') %}
                    color: rgb(0, 161, 136) !important;
                  {% elif is_state('lock.aqara_smart_lock_u200', 'unlocked') %}
                    color: rgb(176, 16, 16) !important;
                  {% else %}
                    color: rgb(255, 165, 0) !important;
                  {% endif %}
                  text-align: right;
                  position: absolute;
                  top: 5px;
                  right: 10px;
                }
              .: |
                mushroom-shape-icon {
                  --icon-size: 40px;
                  display: flex;
                  margin: -45px -10px -11px -9px !important;
                  padding-right: 80px;
                }
                ha-card {
                  clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
                  border: none;
                  margin-bottom: 12px;
                  min-height: 90px !important;
                  max-height: 90px !important;
                  height: 90px !important;
                  padding: 10px 0 !important;
                }
        - type: custom:mushroom-entity-card
          entity: lock.haustur_offner
          name: Tür öffnen
          icon_color: white
          fill_container: true
          primary_info: name
          secondary_info: none
          layout: horizontal
          tap_action:
            action: toggle
          hold_action:
            action: none
          double_tap_action:
            action: none
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                  {% set state_entity = 'lock.haustur_offner' %}
                  {% if is_state(state_entity, 'locked') %}
                    --shape-color: rgb(0, 161, 136) !important;
                    --icon-color: white !important;
                    opacity: 1;
                    --glow-1: 0 0 25px 8px rgba(0, 161, 136, 1);
                    --glow-2: 0 0 55px 18px rgba(0, 161, 136, 0.7);
                    --glow-3: 0 0 95px 35px rgba(0, 161, 136, 0.45);
                    --glow-anim: none;
                  {% elif is_state(state_entity, 'unlocked') %}
                    --shape-color: rgb(102, 0, 0) !important;
                    --icon-color: white !important;
                    opacity: 1;
                    --glow-1: 0 0 25px 8px rgba(102, 0, 0, 1);
                    --glow-2: 0 0 55px 18px rgba(102, 0, 0, 0.7);
                    --glow-3: 0 0 95px 35px rgba(102, 0, 0, 0.45);
                    --glow-anim: lock-ultraglow 2.2s ease-in-out infinite;
                  {% elif is_state(state_entity, 'unlocking') or is_state(state_entity, 'locking') %}
                    --shape-color: rgb(255, 165, 0) !important;
                    --icon-color: white !important;
                    opacity: 1;
                    --glow-1: 0 0 25px 8px rgba(255, 165, 0, 1);
                    --glow-2: 0 0 55px 18px rgba(255, 165, 0, 0.7);
                    --glow-3: 0 0 95px 35px rgba(255, 165, 0, 0.45);
                    --glow-anim: lock-ultraglow 2.2s ease-in-out infinite;
                  {% else %}
                    --glow-1: none; --glow-2: none; --glow-3: none; --glow-anim: none;
                    opacity: 0.6;
                  {% endif %}
                  transform-origin: 50% 50%;
                  position: relative;
                }
                .shape::before, .shape::after {
                  content: '';
                  position: absolute;
                  inset: -8px;
                  border-radius: inherit;
                  pointer-events: none;
                }
                .shape::before {
                  box-shadow: var(--glow-1), var(--glow-2), var(--glow-3);
                  animation: var(--glow-anim);
                }
                .shape::after {
                  inset: -18px;
                  box-shadow: var(--glow-1);
                  opacity: 0.9;
                  animation: var(--glow-anim);
                }
                @keyframes lock-ultraglow {
                  0% { opacity: 0.9; filter: brightness(1); }
                  50% { opacity: 1; filter: brightness(1.4); }
                  100% { opacity: 0.9; filter: brightness(1); }
                }
                @keyframes lock-action {
                  0% { transform: rotate(-25deg) scale(0.96); }
                  50% { transform: rotate(25deg) scale(1.04); }
                  100% { transform: rotate(-25deg) scale(0.96); }
                }
                @keyframes lock-open {
                  0% { transform: rotate(10deg); }
                  50% { transform: rotate(18deg); }
                  100% { transform: rotate(10deg); }
                }
              mushroom-state-info$: |
                .container {
                  --card-primary-font-size: 18px;
                  --card-primary-font-weight: 300;
                  --card-secondary-font-size: 15px;
                  --card-secondary-font-weight: 500;
                  margin-top: 50px;
                  margin-left: 5px;
                  text-align: right;
                }
                .primary {
                  font-size: var(--card-primary-font-size) !important;
                  font-weight: var(--card-primary-font-weight) !important;
                  color: white !important;
                  position: absolute;
                  bottom: 5px;
                  right: 10px;
                }
                .secondary {
                  font-size: var(--card-secondary-font-size) !important;
                  font-weight: var(--card-secondary-font-weight) !important;
                  {% if is_state('lock.haustur_offner', 'locked') %}
                    color: rgb(0, 161, 136) !important;
                  {% elif is_state('lock.haustur_offner', 'unlocked') %}
                    color: rgb(102, 0, 0) !important;
                  {% else %}
                    color: rgb(255, 165, 0) !important;
                  {% endif %}
                  top: 5px;
                  right: 10px;
                }
              .: |
                mushroom-shape-icon {
                  --icon-size: 40px;
                  display: flex;
                  margin: -45px -10px -11px -9px !important;
                  padding-right: 80px;
                }
                ha-card {
                  clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
                  border: none;
                  margin-bottom: 10px;
                  min-height: 90px !important;
                  max-height: 90px !important;
                  height: 90px !important;
                  padding: 10px 0 !important;
                }
        - type: custom:clock-weather-card
          entity: weather.weather_at_8215
          hide_clock: true
          hide_date: true
          hide_forecast_section: true
          card_mod:
            style: |
              ha-card {
                border: none;
                box-shadow: none;
                border-radius: 0;
                background: transparent;
              }
        - type: custom:button-card
          entity: input_boolean.fullscreen
          show_state: false
          show_icon: true
          show_name: false
          icon: mdi:arrow-expand
          layout: icon_name
          size: 15%
          tap_action:
            action: toggle
          card_mod:
            style: |
              ha-card {
                border: none;
                box-shadow: none;
                border-radius: 0;
                background: transparent;
              }
    cardStyle: |
      :host { width: 100%; }
      ha-card { border: none; background: transparent; }
    card_mod:
      style: |
        ha-card {
          border: none;
          box-shadow: none;
          border-radius: 0;
          background: transparent;
          --stack-card-gap: 8px;
          width: 100% !important;
          max-width: none !important;
        }
  style: >
    :host {
      --sidebar-background: #242424;
      --sidebar-text-color: #fff;
      --face-color: #fff;
      --face-border-color: #fff;
      --clock-hands-color: #000;
      --clock-seconds-hand-color: #ff4b3e;
      --clock-middle-background: #fff;
      --clock-middle-border: #000;
      --state-input_boolean-on-color: #00a188;
      --state-input_boolean-active-color: #00a188;
      --state-active-color: #00a188;
      --sidebar-selected-text-color: white;
    }

    .date {
      margin-bottom: 0;
      color: #00a188;
      opacity: 1;
      font-size: 25px;
      font-weight: 200;
      text-align: center;
      letter-spacing: -0.05vw;
    }

    h1.digitalClock.with-seconds {
      margin-top: 0;
      margin-bottom: 5px;
      font-size: 60px;
      text-align: center;
      line-height: 40px;
      font-weight: 400;
      color: white;
      cursor: default;
    }

    .sidebarMenu { font-size: 25px; line-height: 24px; font-weight: 400; }
    .sidebarMenu li.active::before { background-color: #00a188 !important; }
    .sidebarMenu li.active ha-icon { color: white !important; } :host
    ::slotted(.card-content) { padding: var(--ha-space-4); margin-bottom: 50px;
    }
kiosk_mode:
  hide_sidebar: "{{ is_state(\"input_boolean.fullscreen\", \"on\") }}"
  hide_header: "{{ is_state(\"input_boolean.fullscreen\", \"on\") }}"
  non_admin_settings:
    kiosk: true
  mobile_settings:
    hide_header: false
    hide_sidebar: false
    custom_width: 768

Aufbau erklärt

Die Sidebar selbst definiert zuerst die Breite pro Gerätetyp. Danach folgen Datum, Uhr und Menüeinträge. Jeder Menüpunkt navigiert zu einer View im gleichen Dashboard: Start, Radio, Licht, Kamera, Fenster + Türen und Batterie.

  • sidebarMenu bestimmt die sichtbaren Navigationspunkte.
  • bottomCard enthält die Statuskarten am unteren Rand.
  • card_mod stylt Mushroom Cards, Glow-Effekte, Abstände und Hintergrund.
  • kiosk_mode reagiert auf den Fullscreen Helper.

Anpassen

Passe zuerst die Entity IDs an dein eigenes Home Assistant an. Besonders wichtig sind Licht, Schloss, Wetter und Fullscreen-Helper.

Code
light.licht_abend                  # Abendlicht unten in der Sidebar
lock.aqara_smart_lock_u200        # Smart Lock Status
lock.haustur_offner               # Türöffner / Schlossaktion
weather.weather_at_8215           # Wetter-Entity
input_boolean.fullscreen          # Fullscreen- und Kiosk-Schalter