How to add rounded corners to lovelace cards - within a theme?

@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.

1 Like

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 !

Screen Shot 2019-02-23 at 10.58.10 am

1 Like

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.

1 Like

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 :wink:

1 Like

got it:

now fiddle with the colors :wink: 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.

1 Like

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?

1 Like