HA clock card resize & tap action

Protoncek · May 28, 2025, 8:45am

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!

jeffcrum · July 24, 2025, 8:47pm

Thanks for this. The HA clock card is horribly uncustomizable.

The size of large is not even close to being usable on a seven inch tablet.

I do want to point out that AM/PM can be changed using:

    .time-part.am-pm {                       
        font-size: .75em !important;       # size of clock (you can also use like "35rem")
        font-weight: 400 !important;       # "bold" amount of clock
        color: white;                      # clock font color
    }

It does not change based on time-parts. That font-size seems to be in proportion to the time-parts font-size. And, the color does not change. I searched the inspect on the AM/PM and could not find the reasons for that.

jeffcrum · September 4, 2025, 8:17pm

So, the 2025.9.0 update broke these for me.

I did some digging through the inspect of the page in the browser and am not sure why this broke. But don’t feel like fixing it every time they update the clock card

Don’t get me wrong. I love that they update early and often. But not sure adding an analog clock (which I love by the way) should break these styles we were updating. I just think the three sizes offered is so short-sighted.

So, I created a time sensor (easy to change to add zero padding, seconds, etc)

    time:
      value_template: "{{ as_datetime(now()).strftime('%-I:%M %p') }}"

And now use the custom button-card for the clock in this situation. I hope to find a need for the analog clock!

      - type: custom:button-card
        entity: sensor.time
        tap_action:
          action: none
        show_icon: false
        show_name: false
        show_state: true
        styles:
          card:
            - padding: 0
          state:
            - font-size: 100px

This card will also do your tap action and coloring.

Protoncek · September 5, 2025, 5:34am

HA2025.9 broke card mod modifications for clock card (written above), as it seems, since clock is tiny (again) here. Anyone else experienced this?

LiQuid_cOOled · September 5, 2025, 5:58am

Try using this method to force card_mod’s access to the shadow DOM

type: clock
card_mod:
  style: 
    hui-clock-card-digital$: |
     .time-part{
       font-size: 2.5rem;
       color: red;
       }

You can still isolate the elements

type: clock
card_mod:
  style: 
    hui-clock-card-digital$: |
     .time-part.hour {
       font-size: 4rem;
       color: blue;
        }
     .time-part.minute {
       font-size: 5rem;
       color:yellow;
        }
     .time-part.am-pm {   
       color: lime;
       --ha-font-size-xs: 30px;
        }

Protoncek · September 5, 2025, 7:22am

Great, thanks! This works. What i’d like to know though is how to mix your code with “ha-card” ? I’m pretty much noob in card-mod. The difference is that ha-card needs “style: |” but your code has “style:”
now numbers are big again, but card background is not…
my code (ha-card part now doesn’t work):

EDIT: i solved “color” (moved to time-part), now i only need whole card background change.

card_mod:
  style: 
    hui-clock-card-digital$: |
     .time-part{
        font-size: 24rem;
        font-weight: 400 !important;
        }
     .time-part.second{
        font-size: 200px !important;
        opacity: 1 !important;
        margin-top: 80px;
        font-weight: 550 !important;
        }
     ha-card {
       background:
          {%- set sensor = states('input_boolean.pavle_telefon_ozadje') %}
          {%- if sensor == 'off' %}green;
          {%- else %}
          black;
          {%- endif %};
        color: 
          {%- set sensor = states('input_boolean.pavle_telefon_ozadje') %}
          {%- if sensor == 'off' %}
            black;
          {%- else %}
            {{states('input_text.barva_ozadja_pavle_oled')}};
          {%- endif %};

        }

LiQuid_cOOled · September 5, 2025, 7:35am

Add a pipe that lines up with hui-clock-card-digital$: |

type: clock
card_mod:
  style: 
    hui-clock-card-digital$: |
      .time-part.hour{
        xxxxxxx;
            }
    .: | 
      ha-card {
       background: xxxxx;
          }

Protoncek · September 5, 2025, 7:46am

THANKS! Much appreciated!
Like i mentioned, these things (pipes, dots, …) were never my strong side. I can find some stuff and test in developer mode (F12), but sometimes it works, sometimes it doesn’t…

I use this for my alarm clock, i have it beside my bed and it was pretty frustrated this night when i couldn’t see on my tiny little clock

LiQuid_cOOled · September 5, 2025, 7:50am

Frontend CSS coding is my strongpoint so don’t hesitate reaching out for assistance. I have learned from your posts too

Protoncek · September 5, 2025, 7:57am

Very much appreciated!
Although clock card is nice, it’s pretty much useless “as is”. For a start, even “large” is way too small, and you can’t shape it to your needs… so card mod is a must here. Although i tend to avoid css use in my cards for this very reason that they can stop working with some HA updates, there are cases where css styling is the only way.

LiQuid_cOOled · September 5, 2025, 8:04am

Check out this

It’s old school, but I love it!

The mods are built in…

Protoncek · September 5, 2025, 8:12am

“old scholl for old guys” (i’m going towards sixties…).
Great card, reminds me to clock we’ve used to have back then… thanks! I’ll definitively use it.

LiQuid_cOOled · September 5, 2025, 8:15am

Then we are on a similar timeline. Sounds like I am only slightly behind you!