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!

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;
    }

Warning banner for a Button Card

card_mod:
  style: |
    ha-card {
      font-size: 32px !important;
      background-color: green;
      color: black !important;;
    }
    .primary {
      color: black !important;
      font-size: 32px !important;
    }

Warning banner for a sensor

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;
    }