Customizing the clock card

Share your Projects!
1

As of 2026.8, it’s finally possible to add a date to the Clock Card. This allowed me to ditch my own fork of MM2 clock, but there are still a few missing pieces for parity:

  • Adjusting font size, weight and color.
  • Date displayed above time instead of below
  • Small seconds view

The following uses Card Mod that achieves this. I hope this might save others a bit of time if you want to do the same thing.

End Result
End Result235×137 2.81 KB

Code 
type: clock
clock_style: digital
clock_size: large
show_seconds: true
no_background: false
date_format:
  - weekday-long
  - separator-new-line
  - day-2-digit
  - separator-dash
  - month-short
  - separator-dash
  - year-numeric
grid_options:
  columns: 9
  rows: 3
time_format: '24'
face_style: markers
card_mod:
  style:
    hui-clock-card-digital $: |
      :host {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 10px !important; 
      }
      .clock-container, .clock-container * {
        font-weight: 300 !important;
        font-size: 55px !important;
      }
      .date-container, .date-container * {
        color: #828282 !important;
        font-size: 25px !important;
        font-weight: 300 !important;
      }
      .time-part.second {
        font-size: 25px !important;
        align-self: flex-start !important;
        line-height: 1 !important;
      }