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!
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.
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)
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.
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
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.
“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.
Hi guys, bumped on this while searching for a bigger clock card.
I’m struggling with card_mod, so can anyone tell me what I’m doing wrong with the pipes, dots, colon…
Styling the clock card based on this thread. Works great. However, on mobile app if I swipe down to refresh, the clock is unstyled and the only way I can figure out how to get it back is to re-save the dashboard. Anyway to have the style kept on refresh?
Tetsing shows that some times the clock may need prepend. This is now automatic in v4.2.0-beta.4.
Double check that you are not running card_mod twice. See the latest Performance improvements recommendations and if using extra_module_url make sure it matches your Dashboard resource URL.
Jumping in to this as I’m trying to ‘adjust’ something in the built-in Clock card, but analog and not digital mode, so not covered above. However, some CSS experts here and I am not one of those.
Quite simply, I want to set the colour of the seconds hand.
By default it’s red and that’s fine, but the theme I’m using sets it to white, so I figure using card_mod would ensure it is always the colour I want. But…
For the life of me I cannot get the right setting for card_mod. I’ve found various examples that purport to do this, but they don’t and the Graphite theme I’m using just overwrites the default and makes it white and I cannot fathom how it’s doing that.
Anyway, card_mod should be the answer - if someone could point me in the right direction of setting the colour of the seconds hand. Please.
