This might have been discussed earlier, but can the rounded corners also be applied in a similar way to picture element cards?
Works perfectly for me on all cards
Even picture element cards? Mine remain squareâŠ
Mine remain square as well⊠if i recall @thomasloven said something about using the style override of overflow: false fixes it.
Yes. Some cards with background images donât work well with rounded corners. The workaround, for now, is to add overflow: hidden using card-modder.
2 Likes
How to add those new variables to the default theme?
You canât change the default theme, but if you make a new one with only those variables, it will fill in the rest from the default.
1 Like
I think the picture elements card should work with rounded corners in 0.89, by the way.
Thanks, it worked as expectedâŠ
ok, I removed my card modder now and rounded cards works great. but is there a way to change background color for selective cards (in lovelace itself)? Thanks.
Some cards now allow you to specify a theme for the card itself, hopefully this will become standard.
1 Like
It will with the next update
1 Like
Good catch! Balloob wouldnât let me add that as default to ha-card, so this is the recommended method.
Hey guys, I still canât get rounded corners, what am I doing wrong here?
dark:
# Background image
background-image: 'center / cover no-repeat url("/local/night.jpg") fixed'
ha-card-border-radius: â20pxâ
# Colors
text-color: '#DADADB' # Grey text
text-medium-light-color: '#A0A2A8' # Medium-light grey text
text-medium-color: '#80828A' # Medium grey text
text-dark-color: '#6A6B74' # Dark grey text
accent-color: '#008bef' # Blue
accent-medium-color: '#2686c1' # Decent blue
background-color: '#3b4049' # Dark grey background
background-color-2: '#484E59' # Light grey background
background-card-color: '#434952' # Grey background
border-color: '#383C46' # Grey border
# Header
primary-color: '#363941' # Background
text-primary-color: 'var(--text-color)' # Text
# Left Menu
paper-listbox-background-color: 'var(--background-color)' # Background
sidebar-icon-color: 'var(--text-medium-color)' # icons
sidebar-selected-icon-color: 'var(--text-medium-light-color)' # Selected row icon and background (15%)
sidebar-selected-text-color: 'var(--text-color)' # Selected row label
# UI
paper-card-header-color: 'var(--text-color)' # Title in settings
primary-background-color: 'var(--background-color)' # Background (also title background in left menu)
mdc-theme-primary: 'var(--accent-medium-color)' # Action Buttons (save, restart etc.)
# Card
paper-card-background-color: 'var(--background-card-color)' # Background
dark-primary-color: 'var(--text-color)'
primary-text-color: 'var(--text-color)'
paper-listbox-color: 'var(--text-color)'
light-primary-color: 'var(--text-dark-color)'
secondary-text-color: 'var(--text-medium-color)'
disabled-text-color: 'var(--text-dark-color)'
paper-dialog-button-color: 'var(--text-color)'
secondary-background-color: 'var(--background-color-2)' # Background more info title
# Icons
paper-item-icon-color: 'var(--text-dark-color)' # Off
paper-item-icon-active-color: 'var(--accent-color)' # On
# Switches
paper-toggle-button-checked-button-color: 'var(--text-medium-light-color)' # Knob On
paper-toggle-button-checked-bar-color: '#009FFF' # Background On
paper-toggle-button-unchecked-button-color: 'var(--text-medium-light-color)' # Knob Off
paper-toggle-button-unchecked-bar-color: '#767682' # Background Off
# Shadows
shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'
shadow-elevation-4dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
shadow-elevation-6dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
shadow-elevation-8dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
shadow-elevation-10dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
shadow-elevation-12dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
shadow-elevation-14dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 3px var(--text-dark-color)'
1 Like
The quote marks are different to the others in the theme - they are wrong.
got to get back on this, sorry to bump:
just added:
ha-card-border-radius: 6px;
ha-card-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
to my theme and used the frontend.reload_themes service, but it doesnât show at all.
Isnt this the correct way to define border radius and shadow?
im trying to set globally what I now use on all my card mods:
style: |
ha-card {
--ha-card-background: 'var(--paper-card-background-color)';
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
update
wait, I think I found it:
ha-card-border-radius: '6px'
ha-card-box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
does the trick.
and your frontend.reload_themes service!
hello; is it possible to add ha-card-border-radius: 15px to the default theme in HA? i got it working for my custom themes
Where to find the full documentation on frontend and settings?