Making the ideal kitchen dashboard isn’t too difficult, with a few modifications to Home Assistant. I wanted a really good family calendar, big clock, and to keep the dashboard as clutter free as possible.
Here are the community created additions for my dashboard. All of them require HACS and if you haven’t installed it, I highly recommend it! Here are the instructions on how to get it.
Bubble Card – Pop up to show and hide more controls for the dashboard
Atomic Calendar Revive – Very customizable calendar
Digital Clock – Simple digital clock
Card Mod – Change the style of a specific card on the dashboard
Card Mod allows CSS to change the style of a card on the dashboard. You can change it to any style you like.
I’ll share my Card Mod code with you. Use it as a starting point, or just use it as is if you like it!
Once you have Card Mod installed, click on the pencil icon to edit your dashboard in the top right, select the card to edit, and the click on SHOW CODE EDITOR. Paste in the code at the bottom and then save it.
Have fun building a Home Assistant dashboard!
Table of Contents
Atomic Calendar Revive
card_mod:
style: |
ha-card {
font-size: 18px !important;
}
.single-event-container {
padding-bottom: 30px !important;
padding-top: 10px !important;
}
.daywrap {
padding-top: 40px !important;
}
.event-right-top {
font-size: 24px !important;
font-weight: bold;
letter-spacing: 1.5px;
line-height: 1.2;
padding-bottom: 10px;
}
.event-date-day {
font-size: 28px;
color: #00FFFF !important;
max-width: 60px;
line-height: 1.2;
}
.hours {
color: #808080 !important;
}
Digital Clock
card_mod:
style: |
ha-card {
font-size: 36px !important;
}
.second-line {
font-size: 22px !important;
}
card_mod:
style: |
ha-card {
font-size: 32px !important;
background-color: green;
color: black !important;;
}
.primary {
color: black !important;
font-size: 32px !important;
}
card_mod:
style: |
ha-card {
font-size: 18px !important;
background-color: red;
color: black !important;;
}
.header {
--row-height: 0px;
}
.name {
line-height: 30px !important;
color: black !important;
font-size: 32px !important;
}
.measurement {
color: black !important;
}
.info {
margin-top: 0px !important;
padding-top: 10px !important;
}
.value {
font-size: 56px !important;
font-weight: bold;
padding: 10px;
}
Sensor for outdoor temperature
card_mod:
style: |
.header {
--row-height: 0px;
}
.name {
line-height: 30px !important;
}
.info {
margin-top: 0px !important;
padding-top: 10px !important;
}
.value {
font-size: 56px !important;
font-weight: bold;
padding: 10px;
color: #F0E68C;
}