istvn.urbn
November 14, 2021, 7:34pm
2315
Hi All,
I’m trying to remove the box-shadow from a conditional mini-media-player card with no success.
Here is the config I’m using:
type: entities
title: Media
show_header_toggle: true
entities:
- entity: switch.ff_living_room_lgtv
icon: mdi:television
- entity: switch.ff_living_room_apple_tv
icon: mdi:cast-variant
- type: conditional
conditions:
- entity: media_player.ff_living_room_apple_tv
state_not: standby
row:
type: custom:mod-card
card:
type: custom:mini-media-player
entity: media_player.ff_living_room_apple_tv
sound_mode: icon
tap_action: more-info
hide:
volume: true
power: true
name: true
icon: true
border: true
artwork: material
source: full
toggle_power: false
info: scroll
card_mod:
style: |
ha-card {
box-shadow: none;
}
But the box shadow remains on the interface:
Does anyone have an idea what am I doing wrong?
Thanks!
not sure about the card itself, (never modded the media-player card) but if anything, you should indent 1 more, and set the card_mod under the card you want to mod… which would be the custom:mini-media-player ?
1 Like
Try using “group” option.
nvm this, it worked after all, for reference to anyone else using the waze-card:
- type: custom:waze-card
title: Rijtijden
card_mod:
style: |
.header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
does the trick
my default for these listed entities in an entities card, you might want to spread the card to the full card-width?:
card_mod:
style: |
ha-card {
margin: 0px -16px 0px -16px;
box-shadow: none;
}
1 Like
istvn.urbn
November 15, 2021, 7:27am
2321
Just made the adjustment, can’t complain about the looks
now I cant figure this one out. A fold-entity-row I like the fold-down to have a background. Somehow I must have flaked, because the margins are not set correctly:
- type: custom:fold-entity-row
head:
type: section
label: Automations
padding: 0
entities:
- type: custom:hui-element
card_type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
background: url('/local/afvalwijzer/background.png');
background-size: cover;
margin: 0px -16px -16px -16px;
}
entities:
- entity: input_boolean.trash_reminder
secondary_info: last-changed
- entity: input_boolean.trash_outside
secondary_info: last-changed
- type: divider
- entity: automation.afval_vandaag
name: Notify vandaag
secondary_info: last-triggered
- entity: automation.afval_morgen
name: Notify morgen
secondary_info: last-triggered
as a matter of fact, the
background-size: cover;
margin: 0px -16px -16px -16px;
is completely non functional, because taking it out makes no difference at all. Please have a look what I can do to make the background image use the margins I prescribe
for reference: 🔹 Card-mod - Add css styles to any lovelace card - #1192 by Ildar_Gabdullin
fwiw, this does work if I dont add it under the F-e-r card:
This post is not correct now:
After 2021.11.1 most of icon color styles are broken - that can be fixed, haven’t done yet.
After some update of [do not know what] most styles for fold-entity-row are broken too - see this issue .
Btw I corrected ALL my posts except some which stopped working (same issue) - fold-entity-rowconfig-template-cardrows inside Picture elements ).hui-element - see this post .
o right, thats a nuisance . Hadn’t noticed before. (I am not sure my card above was correct before that tbh, so not pointing any fingers)
maybe you have a suggestion how to use a background on a T-e-r other than I did here? I mean, I merely copied from before the fold, so maybe its not the preferred way in the first place
In my example it works too:
yep. note that the background-size: cover isnt needed if you do not want to manipulate the image, but only have the full background filled.
Good remark, my JPG is larger than the row and is shrunk automatically.
Mariusthvdb:
as a matter of fact, the
background-size: cover;
margin: 0px -16px -16px -16px;
is completely non functional, because taking it out makes no difference at all. Please have a look what I can do to make the background image use the margins I prescribe
Could you explain what do you want to achieve?
type: custom:fold-entity-row
head:
entity: sun.sun
open: true
entities:
- entity: sun.sun
- type: custom:hui-element
card_type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
background: url('/local/images/orange.jpg');
background-size: cover;
margin: 0px -16px -16px -16px;
}
entities:
- sun.sun
- input_boolean.test_boolean
- input_boolean.test_boolean_2
yes, that is exactly what is happening here too. I would like the white left, right and bottom margins to be filled with the background image.
not the header Automations with the icon, but the listing below that (in fact the full fold out should have a background)
ive added the background to the top level card, and its looks like
so thats no use either…,
It should show like below, without the indicated margins
@Mariusthvdb
type: custom:stack-in-card
cards:
- type: entities
title: lalala
entities:
- sun.sun
- sun.sun
- sun.sun
card_mod:
style: |
ha-card {
margin-bottom: 0px !important;
}
- type: entities
card_mod:
style: |
.card-content {
padding-top: 0px !important;
}
ha-card {
background: url('/local/images/orange.jpg') !important;
background-size: 100%;
}
entities:
- type: custom:fold-entity-row
head:
type: section
label: Automations
card_mod:
style: |
.divider {
background: none !important;
}
open: true
padding: 0
entities:
- input_boolean.test_boolean
- input_boolean.test_boolean_2
- type: divider
- input_boolean.test_boolean_3
- input_boolean.test_boolean_4
Also you may add
keep:
background: false
box_shadow: true
margin: false
outer_padding: false
border_radius: false
and play with shadows for cards.
that’s progress, thanks!
Mariusthvdb:
and not include it…
type: custom:stack-in-card
keep:
box_shadow: true
cards:
- type: entities
title: lalala
entities:
- sun.sun
- sun.sun
- sun.sun
card_mod:
style: |
ha-card {
margin-bottom: 0px !important;
}
- type: entities
card_mod:
style: |
.card-content {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
entities:
- type: custom:fold-entity-row
card_mod:
style: |
div#head {
margin-top: 0px !important;
padding-bottom: 16px !important;
}
div#items {
background: url('/local/images/orange.jpg') !important;
background-size: 100%;
margin: 0px -16px -16px -16px;
padding: 0px 16px 16px 16px !important;
}
head:
type: section
label: Automations
card_mod:
style: |
.divider {
background: none !important;
}
open: true
padding: 0
entities:
- input_boolean.test_boolean
- input_boolean.test_boolean_2
- type: divider
- input_boolean.test_boolean_3
- input_boolean.test_boolean_4
1 Like
Thanks again! Much appreciated.
