HA clock card resize & tap action

Share your Projects! Dashboards & Frontend
1

I use “simple clock card” (from “fufar”) quite a lot, since there wasn’t any decent clock card available, and i also want seconds to be shown.

But recently original “clock card” appeared in HA (in 2025.4 i think), and at the same time developer of above custom card published that he might archive his card.

Since original clock card is quite basic and it doesn’t have tap action i decided to “take a plunge” and try to adapt it for my needs.

My requests were:

  • resizable (original is just small, medium and large, which is still way to small for me);
  • tap action;
  • coloring.

So, for resizing and coloring i used card-mod, and for tap action i found example of user “Frosty” (thanks!). The fancy solution for enabling tap action on non-tapping cards is to place two cards one above the other. So while clock card shows time, (transparent) button card only detects touch. I used this approach on my picture elements card, btw…

You need Thomas Loven’s “lovelace layout card” for tap action and card mod for everything else.

So, my configuration is below (please note that explanation is written between the code, so for actual working code remove all text beginning with # !)

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: clock
    view_layout:
      grid-column-start: 1
      grid-row-start: 1
    clock_size: large
    time_format: "24"
    show_seconds: true
    card_mod:
      style: |
        .time-parts {                       
            font-size: 400px !important;       # size of clock (you can also use like "35rem")
            font-weight: 400 !important;       # "bold" amount of clock
            color: white;                      # clock font color
        }
        .time-parts .time-part.hour {      
           font-size: 400px !important;          # font size of hours
           color: yellow;                        # hours font color
        }
        .time-parts .time-part.minute {   
          font-size: 350px !important;         # font size of minutes
          color: lime;                         # minutes font color
        }  
        .time-parts .time-part.second{      
          font-size: 250px !important;         # font size of seconds
          color: lime;                         # seconds font color
          opacity: 1 !important;               # seconds are shown dimmed by default (0.4), if you don't want them to add this line!
          margin-top: 35px;                    # here you can lower position of seconds, since by default they stick to top
        }
        ha-card {
          background: green;                   # general card background if you want to change it
        }
  - type: button
    show_name: false
    show_icon: false
    tap_action:
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.light_toggle
    view_layout:
      grid-column-start: 1
      grid-row-start: 1
    card_mod:
      style: |
        ha-card {
          background: none;
        }

Shown above are all possibilities, you can omit ones you don’t need (like separately modify only hours or minutes). Personally i only modify “whole clock” and seconds part.

Note that i’m not a professional, so things might be overcomplicated. If they are, comments or corrections are very welcome!

6 Likes