Curious to know if youâre using the new config advised by Thomas Loven.
User DrewXT reported that it fixed the similar issue that he had posted earlier in the thread.
I donât use the editor myself, and havenât really seen many of the issues that some people are reporting, apart from the occasional need for a CTRL+F5 page refresh, but the new config is working well for me.
no sorry, youâre right, it is a picture-glance.
type: picture-glance
title: Vijverpompen
image: /local/images/vijver.png
state_filter:
'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
- switch.vijverpomp_links
- switch.vijverpomp_rechts
- input_boolean.vijverpompen_alterneren
- sensor.pond_buiten_sensor_calibrated_temperature
- binary_sensor.vijverpompen
- sensor.vijverpompen
card_mod:
style:
'.box div:nth-child(3)':
'div:nth-child(1)':
ha-icon-button:
$:
mwc-icon-button:
$: |
.mdc-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
'div:nth-child(2)':
etc
and the colorize works perfectly. cant get the other options to work, or, rephrase, can not get the template-entity-row to colorize
another (older) card to card_mod: Waze-card.GitHub - royto/waze-card: Lovelace card for showing Waze routes data my regular header card_mod doesnât do anything:
card_mod: &header
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
when use on:
- type: custom:waze-card
title: Rijtijden
card_mod: *header
entities:
I did change .card-header to .header, because thats what inspector indicates the header to be, but still no mod effective. what should I try next?
Earlier I gave an example of template-entity-row, it did not work on your side.
Cache problem? Card-mod-themes problem?
Hello @thomasloven, I officially surrender since I stopped to understand the logic of applying CSS styles (((.
Could you help me?
I am confused about using hui-element - and probably because of the same reason I started stumbling with other cards like restriction-card, fold-entity-rowâŚ
Earlier I think I followed a clear logic of using card-mod - but after a few latest updates I see some failures in my HA setup and âlearning examplesâ.
Letâs consider row_type: section.
But first here is a usual section row, we need a red divider line:
CSS tree:
Code:
type: entities
entities:
- type: section
label: section 1
card_mod:
style: |
.divider {
background-color: red !important;
}
My logic is: we are inside shadowRoot of the hui-section-row, so we must get directly to the .divider element.
Now letâs consider a section implemented by hui-element:
CSS tree:
Code:
type: entities
entities:
- type: custom:hui-element
row_type: section
label: section 3 (hui-element)
card_mod:
style:
hui-section-row:
$: |
.divider {
background-color: orange !important;
}
My logic is: we are inside shadowRoot of the hui-element, so we must get to the .divider element via hui-section-row$.
But the style is not applied (as it shown on the picture above).
This is working:
Code:
type: entities
entities:
- type: custom:hui-element
row_type: section
label: section 2 (hui-element)
card_mod:
style:
$: |
.divider {
background-color: orange !important;
}
And I cannot understand - why do we have to use this construction?
And the simplest case - letâs style the hui-element from the entities-card level:
CSS tree:
Code:
type: entities
entities:
- type: custom:hui-element
row_type: section
label: section 4
card_mod:
style:
.card-content hui-element:
$:
hui-section-row:
$: |
.divider {
background-color: orange !important;
}
The style is not applied:
And now I am completely lost.
neither⌠I am lost really. In no browser can I get this to show a coloring and resizing icon. It only spins 
also without any theme, just the HA default theme loaded.
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:
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 ?
Try using âgroupâ option.
That was it! Thanks!
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;
}
Just made the adjustment, canât complain about the looks 
Thanks again! Much appreciated.
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:
[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-row, config-template-card, rows inside Picture elements).
Also cannot style 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
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.
