On mine it is just based on the width of the card. If the card too narrow for the date to fit on the right, it moves it down. I am not sure how to do line breaks in JS
2 Likes
haha thanks. I figured it out too it was the width of the card! Thank you 
@VMCosco I used your code for one of my tablet dashboards at the request of the wife. Very nice. Thank you for posting.
Hi! Is it possible to change font family in your clock card?
/Dir
Do you happen to have the steps you took to import this js/card? Thanks!
First, c opy the code from my file. Use File Editor right in HA. Navigate to the folder you want to put the file in (for me it is /config/www/community/clock-card/, I created the “clock-card” folder), add a new file and name it clock-card.js. Paste in my code and save.
Got it working thanks! Wanted to add a little bit of info for those looking to add this. You need to add some info into your lovelace resource BUT I couldn’t find it. 
No fear … here’s the steps
- Make sure you have advanced mode turned on.
- Go to your profile page (the circle in the lower left with your user name in it) and click that.
- Look for “Advanced Mode” and switch the toggle on. (You have to be an admin to do this.)
- Then go to configuration->lovelace dashboards->resources (near top)
From there I added: /hacsfiles/clock-card/clock-card.js
Note the path … I used /config/www/community/clock-card but noticed the others using /hacsfiles so I went with that. YMMV. Hope this helps and thanks @VMCosco for a great card!!
1 Like
My implementation of the customization (using @Darbos version of the code with days etc.) does not update immediately so I have to refresh on iphone and change browser width on PC. What can be the issue here?
Showing before and after changing browser size (where the card magically appears…):
Edit: updating to 0.117 seems to have resolved the issue.
Do you know, or anyone else, know what I need to do to change the size of AM/PM to the same size of the numbers indicating the time and what I need to do to change the color of the day and date to the same color of the time?
I made a few updates on my fork at https://github.com/ScottESanDiego/scotte-clock-card so as to just use the basic Javascript Date/Time functions, and added a readme on how to import my particular card. Maybe that helps?
1 Like
Hi ScottE ! I would like to try out your card, but according to your guide it should be installed via HACS, but I cannot find it there. Do i need to do something specific for it to show up?
Oh, sorry. You can add https://raw.githubusercontent.com/ScottESanDiego/scotte-clock-card/main/hacs.json via HACS->“Custom Repositories”->“Custom Repository URL”
1 Like
Hi, I see you use DST time, this is showing on my front end my local time + 1 hour. Is it possible to use local time instead of UTC ?
thanks
Sorry, I’ve no idea how the part of the code that get’s the time works.
My idea is that it get’s the local time and DST is something you have to set locally?
Sorry, it was my fault, I realised that JS function ‘getDate()’ just pick up my PC datetime, which was partially wrong. Sorry for the inconvenience. Have a nice day
No inconvenience I’ve helped you find an answer to your question, that’s one of the purposes of this community.
1 Like
Hi.
Love this - it was exactly what I was looking for.
I have but one issue. - The theme of the tile appears to be taken from the overall theme of the view. I have a view with a separate theme for my menu bar (buttons where I set the theme individually) - but I can’t seem to set the theme separately for the clock card.
Is there a simple way to do this that i’m missing?