HELP Digital clock with HACS | Home Assistant | Page 1

wanton stone Mar 7, 2025, 12:25 AM

#

i have set it up but want it to be transparent

keen sentinel Mar 7, 2025, 12:33 AM

#

install card-mod on hacs if you dont already have it then add the following section to the yaml for the digital clock card:

  style: |
    ha-card {
      background-color: transparent !important;
      border-width: 0px !important;
    }

keen sentinel Mar 7, 2025, 12:33 AM

#

wanton stone i have set it up but want it to be transparent

should then look like this

wanton stone Mar 7, 2025, 12:39 AM

#

thanks so much

wanton stone Mar 7, 2025, 12:49 AM

#

keen sentinel should then look like this

did not appear transparent on dashboard

keen sentinel Mar 7, 2025, 12:53 AM

#

have you done full refresh (ctrl+f5) since installing card-mod?

wanton stone Mar 7, 2025, 12:56 AM

#

yes

#

#

like that

keen sentinel Mar 7, 2025, 12:59 AM

#

can you post the yaml for the whole vertical stack

#

everything should work but perhaps someone else in the stack is doing something strange

shrewd cairnBOT Mar 7, 2025, 1:04 AM

#

pong

#

Version

0.26.0

Source

Source Repository

Messages

Data for the /message command

wanton stone Mar 7, 2025, 1:04 AM

#

type: custom:digital-clock
card_mod:
style: |
ha-card {
background-color: transparent !important;
border-width: 0px !important;
}

keen sentinel Mar 7, 2025, 1:05 AM

#

thats just the yaml for the clock card. you seem to have the clock card inside of a vertical stack

wanton stone Mar 7, 2025, 1:06 AM

#

yes

keen sentinel Mar 7, 2025, 1:07 AM

#

at the bottom you can open the vertical stack code editor and see the full stack code editor

wanton stone Mar 7, 2025, 1:07 AM

#

type: vertical-stack
cards:

type: markdown
content: |
Hello, {{ user }}
Welcome Home 🥳😁🏡
text_only: true
type: custom:digital-clock
card_mod:
style: |
ha-card {
background-color: transparent !important;
border-width: 0px !important;
}

#

sorry for not understanding i think that is it 🙏

keen sentinel Mar 7, 2025, 1:07 AM

#

use triple ` around your code paste
like this

wanton stone Mar 7, 2025, 1:08 AM

#

“””
type: vertical-stack
cards:

type: markdown
content: |
Hello, {{ user }}
Welcome Home 🥳😁🏡
text_only: true
type: custom:digital-clock
card_mod:
style: |
ha-card {
background-color: transparent !important;
border-width: 0px !important;
}
“””

keen sentinel Mar 7, 2025, 1:08 AM

#

the key to left of 1

#

not quotes

#

discord messes with the formatting otherwise

wanton stone Mar 7, 2025, 1:10 AM

#

“””
type: vertical-stack
cards:

type: markdown
content: |
Hello, {{ user }}
Welcome Home 🥳😁🏡
text_only: true
type: custom:digital-clock
card_mod:
style: |
ha-card {
background-color: transparent !important;
border-width: 0px !important;
}
“””

keen sentinel Mar 7, 2025, 1:10 AM

#

this symbol - `

wanton stone Mar 7, 2025, 1:11 AM

#

cards:
  - type: markdown
    content: |
      # Hello, {{ user }}
      Welcome Home :partying_face::grin::house_with_garden:
    text_only: true
  - type: custom:digital-clock
    card_mod:
      style: |
        ha-card {
          background-color: transparent !important;
          border-width: 0px !important;
         }```

keen sentinel Mar 7, 2025, 1:12 AM

#

copy my example and paste it if you have to

wanton stone Mar 7, 2025, 1:12 AM

#

got it

keen sentinel Mar 7, 2025, 1:14 AM

#

do you have something thing installed to make it show the emoji's? thats not default behavior

wanton stone Mar 7, 2025, 1:15 AM

#

keen sentinel do you have something thing installed to make it show the emoji's? thats not def...

no emojis show fine

#

keen sentinel Mar 7, 2025, 1:19 AM

#

#

this is the stock behavior

#

do you have any other custom stuff installed from hacs?

wanton stone Mar 7, 2025, 1:21 AM

#

no but i need the clock to be transparent the message is already

keen sentinel Mar 7, 2025, 1:21 AM

#

yeah i understand where your trying to get to and the code you have should work. i am trying to work out why it doesnt

#

what version of home assistant are you on?
and can you try it on another browser to see if the formatting is isolated to the browser?

wanton stone Mar 7, 2025, 1:31 AM

#

wanton stone Mar 7, 2025, 1:31 AM

#

keen sentinel what version of home assistant are you on? and can you try it on another browser...

Sure thing

#

Did Not work

keen sentinel Mar 7, 2025, 1:40 AM

#

the only thing that i can think of is that card-mod is not working correctly. you could try uninstalling and reinstalling it

#

or you have some other custom theme or something interfering with how the cards are being drawn

cedar ridge Mar 7, 2025, 1:53 AM

#

The custom: digital-clock card may not follow the same syntax found in stock cards. Stock cards, for the most part, use the same syntax. Devs for custom cards can do whatever they want. Another option to try is just background:. I'll try to inspect the card later this evening and get better info.

keen sentinel Mar 7, 2025, 1:57 AM

#

both background-color and background work on my machine actually

cedar ridge Mar 7, 2025, 1:58 AM

#

Looking at the code for the card, I think it uses background.

keen sentinel Mar 7, 2025, 1:58 AM

#

try this

card_mod:
  style: |
    ha-card {
      background: transparent !important;
      border-width: 0px !important;
    }```

cedar ridge Mar 7, 2025, 2:00 AM

#

Yeah. If you have it working on your side but it is not for the OP, then the browser may need refreshed and/or cache cleared. Reinstalling card-mod, like Michael mentioned, is another good option (followed by a refresh and cache clear.)

wanton stone Mar 7, 2025, 2:01 AM

#

Card mod where do I get that

keen sentinel Mar 7, 2025, 2:01 AM

#

...

#

on HACS

cedar ridge Mar 7, 2025, 2:02 AM

#

wanton stone Card mod where do I get that

That explains why it is not working :p

wanton stone Mar 7, 2025, 2:08 AM

#

dumb me 🫢

#

#

Thanks for the help

#

How do you use 12 hours clock

keen sentinel Mar 7, 2025, 2:19 AM

#

wanton stone How do you use 12 hours clock

timeFormat: hh:mm a
card_mod:
  style: |
    ha-card {
      background-color: transparent !important;
      border-width: 0px !important;
     }

cedar ridge Mar 7, 2025, 7:36 AM

#

If you want to "design" your own time card, you can use the Markdown card. This is for the top example: ```yaml
type: markdown
content: "{{ now().strftime("%m/%d/%Y, %H:%M")

To help with the strftime syntax, I recommend [Python strftime cheatsheet](<https://strftime.org/>)
The yellow one has template to handle to text and a bunch of card_mod for the styling.

#

This one is similar to the first example but has some card_mod to pin it to the top of the screen. ```yaml
type: markdown
content: "{{ now().strftime("%m/%d/%y, %H:%M") }}"
card_mod:
style: |
ha-card {
background: transparent;
color: white
}
:host {
position: fixed;
top: 0px;
right: 50%;
z-index: 99;
font-size:25px;
}

#

Lastly, a custom:button-card using its internal styling and the Time & Date integration which gives a sensor.time entity.

#

I forgot the Mushroom card's template card ```yaml
type: custom:mushroom-template-card
primary: |
{{ (states('sensor.date_time_iso') | as_datetime).strftime('%H:%M') }}
layout: vertical
icon: ""
card_mod:
style: |
:host {
--card-primary-font-size: 55px !important;
--card-primary-line-height: 1.0 !important;
}
ha-card {
border: none;
background: transparent;
}

wanton stone Mar 8, 2025, 4:34 PM

#

Hello how can i center the Message?

#

‘‘‘type: vertical-stack
cards:
- type: markdown
content: |
# Hello, {{ user }}
Welcome Home 🥳😆🏠
text_only: true
- type: custom:digital-clock
card_mod:
style: |
ha-card {
background: transparent !important;
border-width: 0px !important;
}‘‘‘

keen sentinel Mar 8, 2025, 4:41 PM

#

wanton stone Hello how can i center the Message?

add the center tags
<center>Welcome Home</center>

wanton stone Mar 8, 2025, 4:50 PM

#

i need the hello welcome homein the center too

keen sentinel Mar 8, 2025, 4:56 PM

#

then put center tags around that too

#HELP Digital clock with HACS

Hello, {{ user }}

Hello, {{ user }}

Hello, {{ user }}