This is for the people over at r/HomeAssistant. 👋
This dashboard is displayed on a Fire HD 10 in the book shelf in our hallway.
- Home Assistant 2024.3 and newer because I used sections
- HACS to install cards, integrations and other custom stuff
- Time & Date to display the current time as Sub-button of the calendar separator
Noteworthy customizations I made.
I was looking for a weather card that was as compact as possible. The clock-weather-card was a good start, but with its default settings, it wasn't compact enough for me. I used lovelace-card-mod to add some custom CSS to it. It was pretty hacky until I discovered Bubble-Card's sub-buttons. With this, I was able to get rid of most of the custom CSS and simply display the current temperature as a sub-button of the calendar separator. Here is the full YAML for this card:
type: custom:clock-weather-card
entity: weather.forecast_home
temperature_sensor: sensor.aussentemperatur
humidity_sensor: sensor.aussentemperatur_2
hide_today_section: true
forecast_rows: 3
card_mod:
style: |
ha-card {
--bar-height: 1em !important;
}
I was looking for a way to notice high humidity and opened windows at a glance. This was an easy one since Bubble-Card offers styling by default.
This is the custom style I used for humidity:
.switch-button {
background-color: ${state > '64' ? 'indianred' : ''} !important;
}
This is the custom style I used for windows:
.switch-button {
background-color: ${state === 'on' ? '#e2aa60' : ''} !important;
}
Completed items are still displayed in the To-do list card. They can't be hidden by default.
I used lovelace-card-mod to add some custom CSS to it.
This is the full YAML for this card:
type: todo-list
entity: todo.zuhause
card_mod:
style: |
.completed {
display: none;
}
.header:not([role=seperator]) {
display: none;
}
.divider {
display: none;
}