Hallo liebe Bastler, ich steh vor einer für mich schwierigen Herausforderung.
Ich brauh mal hilfe zu einem Sidebar Dashboard.
1 ) Ich hätte gerne die Sidebar so angepasst mit dem Theme: “Caule Light Green”
also Das Automatisch alles aus dem Theme in der Sidebar angepasst wird.
- Wetter Anzeige und die Uhr / Datum
Kann da jemand helfen?
Hab den Code in eine Text-Datei gepackt.
Sidebar-Code.txt (4,0 KB)
views:
- title: Home
sidebar:
date: true
digitalClock: true
digitalClockWithSeconds: true
sidebarMenu:
- action: navigate
active: true
name: Startseite
icon: null
navigation_path:
- action: navigate
active: true
name: Erdgeschoss
navigation_path:
- action: navigate
active: true
name: Obergeschoss
icon: null
navigation_path:
- action: navigate
active: true
name: Dachboden
icon: null
navigation_path:
- action: navigate
active: true
name: Keller
icon: null
navigation_path:
- action: navigate
active: true
name: Garten
icon: null
navigation_path:
- action: navigate
active: true
name: Kamera
icon: null
navigation_path:
- action: navigate
active: true
name: Einstellung
icon: null
navigation_path:
template: |
<li>
{% if "Vandaag" in states('sensor.hausmuell') %}
<li>Hausmüll ist heute</li>
{% endif %}
{% if "Vandaag" in states('sensor.gelbetonne') %}
<li>Gelbetonne ist heute</li>
{% endif %}
{% if "Vandaag" in states('sensor.altpapier') %}
<li>Altpapier ist heute</li>
{% endif %}
{% if "Vandaag" in states('sensor.biotonne') %}
<li>Biotonne ist heute</li>
{% endif %}
</li>
bottomCard:
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
border: none;
background: transparent;
}
cardOptions:
cards:
- type: weather-forecast
entity: weather.forecast_homeassistant
forecast_type: daily
card_mod:
style: |
ha-card {
background: transparent;
}
cardStyle: |
:host {
width: 100%;
}
ha-card {
border: none;
background: transparent;
}
width:
desktop: 20
mobile: 0
tablet: 25
theme: Caule Light Green
style: |
:host {
--sidebar-background: #242e42 !important;
--face-color: #333;
--face-border-color: #EEE;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #242e42 !important;
--clock-middle-border: #EEE;
}
ha-icon {
--mdc-icon-size: 18px;
}
#customSidebar {
z-index: 9999 !important;
}
.sidebarMenu li {
color: var(--sidebar-text-color, #8BC34A); # Light Green text color for sidebar items
position: relative;
padding: 10px 20px;
border-radius: 12px;
font-size: 18px !important;
line-height: 14px !important;
font-weight: 300;
white-space: normal;
display: block;
cursor: pointer;
margin-bottom: -3px;
}
.sidebarMenu li.active {
background-color: var(--primary-color) !important;
border-radius: 0px !important;
color: var(--primary-text-color) !important;
font-weight: bold !important;
}
.sidebarMenu li.active ha-icon {
color: var(--primary-text-color) !important;
}
.digitalClock {
font-size: 35px !important;
line-height: 60px !important;
font-weight: 450 !important;
cursor: default;
text-align: center;
margin-bottom: 1px;
}
.date {
padding-bottom: 0px;
font-size: 20px;
font-weight: 350;
text-align: center;
}
.template li {
color: var(--sidebar-text-color, #8BC34A); # Light Green text for the template list items
font-size: 1.1vw !important;
font-weight: 200 !important;
opacity: 0.6;
letter-spacing: -0.05vw !important;
text-align: center;
margin-bottom: 10px !important;
}
Lieben Dank.
by HarryP: Code-/Logzeilen formatiert (bitte immer in </> einbinden)