@klogg it work just here in version 0.88.1
When you put the next line in theme.yaml it has to work:
ha-card-border-radius: “20px”
Only the mediaplayers don’t have rounded corners.
@klogg it work just here in version 0.88.1
When you put the next line in theme.yaml it has to work:
ha-card-border-radius: “20px”
Only the mediaplayers don’t have rounded corners.
This works for me; but needs to be ‘20px’ and not “20px” to work in my case. All the other theme components use ‘xxxx’ as well so it might need to be consistent is all.
Added as last line of the theme; then called reload_themes; then selected that theme again and PRESTO!!!
Thanks @thomasloven for getting this added!
@thomasloven Don’t supose you know a trick to say have the background of a card to use a filter: blur(4px)
while keeping the text/buttons/etc on top of the card not blur?
Working for me now - added:
ha-card-border-radius: ‘20px’
to the 2nd line of the theme, and very happy with the result! Thanks @thomasloven !
Nope.
Not yet…
What are you using for the transparency on the cards?
paper-card-background-color: "rgba(40, 40, 40, 0.6)
Tweak the fourth value. Warning though, it doesn’t play nice with custom cards or the default thermostat card.
As silvrr said :
paper-card-background-color: ‘#43495440’
The last 2 digits control the degree of transparency.
That’s interesting all my custom cards seem to be ok…
May depend on how transparent you go.
I know vertical stack didn’t play nicely, you could see two levels of transparency. Literally like they are stacked.
There was another card that I can’t seem to remember that didn’t take the transparency at all.
where do you set that transparency please? tried it like this:
cards:
- type: entities
title: Zonnepanelen
show_header_toggle: false
paper-card-background-color: 'rgba(40, 40, 40, 0.6)'
entities:
- device_tracker.ping_solaredge
- binary_sensor.solaredge
- device_tracker.solaredge
but I see only regular cards…?
It is in the theme.yaml
file
e.g.
# Paper card
paper-card-header-color: 'var(--accent-color)' # Card header text colour
paper-card-background-color: "rgba(67, 73, 84, 0.6)" # Card background colour
# paper-card-background-color: '#434954' # Card background colour
paper-dialog-background-color: '#434954' # Card dialog background colour
paper-item-icon-color: 'var(--primary-text-color)' # Icon color
paper-item-icon-active-color: '#ffc107' # Icon color active
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#434954' # Popup item select
paper-tabs-selection-bar-color: 'green'
Aha, ok. thanks.
so, you set a theme to a card, and edit that theme’s settings? What do you do, use a global theme for cards, or have each card use its own theme?
My setup switches between day and night themes automatically. I suppose I can edit those themes for this too, would be global in that case of course?
Yes I have it in my global theme.
All cards use that theme by default as I haven’t applied any individual theming to any of my cards…… yet
got it:
now fiddle with the colors thanks!
I take it themes aren’t hot-changeable ? need a restart for the edits in a theme to be effective? Would be nice…
There is a service available, frontend.reload_themes
to ‘hot-change’ your saved theme.
Just be aware of caching issues when it appears the change hasn’t taken.
of course! completely forgot about that one. Thx! a bunch for bringing my memory back…
is there a way to have the paper-card-background-color: 'var(--background-card-color)'
use this transparency too?
paper-card-background-color: 'var(--background-card-color, 0.6)'
would be nice ?
Is there anyway to apply border-radius to custom cards?
Are you noticing that the bottom corners are not rounded? I was messing with this the other night and noticed that some cards were not being rounded on all corners.
At what place, having already many themes, of the theme config we must put that new variable?