Ah, that works.
But I was trying to do it for the title and I think that should be .card-header and there it was not working for me
"card_mod": {
"style": ".card-header {color: red}"
},
1st create a working card-mod style w/o auto-entities.
Then make it json for auto-entites.
That I already tried:
type: glance
title: Colored title
card_mod:
style:
$: |
.card-header {
color: red !important;
}
entities:
- entity: sensor.xiaomi_dining_room_battery
Same as
card_mod:
style:
'$': 'card-header { color: red !important; }'
and as experienced user you now create a json)
If the $ is important, then it should be
"card_mod": {
"style": {
"$": "card-header { color: red !important; }"
}
},
which does nothing.
But ha-card worked without the $, yet card-header will not. So still stuck 
Also tried
"card_mod": {
"style": {
"'$'": ".card-header { color: red !important; }"
}
},
just in case…
EDIT2:
Since I also wanted to add your line breaking, I tried a different property of the card but that also failed.
"card_mod": {
"style": {
".entities": {
".entity": ".name { text-overflow: unset !important; white-space: unset !important; }"
}
}
},
I think the json ison itself is formatted correctly. So I am assuming my mistake is elsewhere, more general
Check this:
filter:
template: |-
{% for item in states.sun -%}
{{
{
"type": "glance",
"title": "xxx",
"card_mod": {
"style": {
"$": ".card-header { color: red !important;}",
".": "ha-card {color: cyan}"
}
},
"entities": [
{"entity": item.entity_id}
],
"show_icon": false,
}
}},
{%- endfor %}
1 Like
Fascinating. I adopted one of your other glance examples (the multirow names) and took me 10 min to get it right.
Now I will try to figure out how to mod a grid card (well, auto-entites with template and grid). Just want to modifiy the grid card’s title 
type: custom:auto-entities
card:
type: grid
columns: 4
title: Xiaomi Battery
card_param: cards
filter:
template: |-
...
I have started down the rabbit hole, but before I get stuck:
is the card type custom:card-mod needed for grid cards or was that just an example of yours?
I thought that card-mod was kind of available without making it a card-mod card.
From one of your excellent example posts
type: custom:mod-card
card:
type: grid
title: some title
cards:
EDIT:
Baby steps. Glance card is being modded but the title of the grid itself is not being changed yet.
But at least no error message.
Or does the type: custom:mod-card have to be directly above the grid card rather than turning it all into a card-mod?
type: custom:mod-card
card:
type: custom:auto-entities
card:
type: grid
columns: 4
square: false
title: Xiaomi Battery
card_mod:
style:
':first-child $': |
.card-header {
color: red !important;
}
card_param: cards
filter:
template: |-
...#and then the rest of the template I posted previously
Is there a way of removing the rectangles from the mushroom-person-card so I only get the circles?
This is what I have:
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.ignacio_martinez
icon_type: entity-picture
name: Ignacio
primary_info: none
secondary_info: none
fill_container: true
tap_action:
action: navigate
navigation_path: '#ignacio'
hold_action:
action: call-service
service: script.unmute_ignacios_pixel_5
data: {}
target: {}
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states('switch.ignacio') == 'on' %}
animation: pinggreen 2s infinite;
{% else %}
animation: pingred 2s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
.container {
--icon-size: 80px !important;
}
ha-card {
background-color: transparent;
box-shadow: none;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.ignacio_martinez
icon_type: entity-picture
name: Ignacio
primary_info: none
secondary_info: none
fill_container: true
tap_action:
action: navigate
navigation_path: '#ignacio'
hold_action:
action: call-service
service: script.unmute_ignacios_pixel_5
data: {}
target: {}
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states('switch.ignacio') == 'on' %}
animation: pinggreen 2s infinite;
{% else %}
animation: pingred 2s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
.container {
--icon-size: 80px !important;
}
ha-card {
background-color: transparent;
box-shadow: none;
}
Thanks for the help!
I’ll like to chnage vertical slider style in more-info light dialog.
Can i do that with card-mod ?
Tried this, but not working:
hold_action:
action: more-info
name: AJUSTAR
card_mod:
style:
body>home-assistant$ha-more-info-dialog$ha-dialog>div>ha-more-info-info$div>div>more-info-content$more-info-light$div.controls>ha-state-control-light-brightness$ha-control-slider: |
{
max-height: 200px; /*
}
Dont fully understand why you are using any stack-in-card in the first place. There is only 1 card in each stack-in-card.
But this should do it:
type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.ignacio_martinez
icon_type: entity-picture
name: Ignacio
primary_info: none
secondary_info: none
fill_container: true
tap_action:
action: navigate
navigation_path: '#ignacio'
hold_action:
action: call-service
service: script.unmute_ignacios_pixel_5
data: {}
target: {}
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states('switch.ignacio') == 'on' %}
animation: pinggreen 2s infinite;
{% else %}
animation: pingred 2s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
.container {
--icon-size: 80px !important;
}
.: |
ha-card {
background-color: transparent;
box-shadow: none;
width: fit-content !important;
}
- type: custom:mushroom-person-card
entity: person.ignacio_martinez
icon_type: entity-picture
name: Ignacio
primary_info: none
secondary_info: none
fill_container: true
tap_action:
action: navigate
navigation_path: '#ignacio'
hold_action:
action: call-service
service: script.unmute_ignacios_pixel_5
data: {}
target: {}
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states('switch.ignacio') == 'on' %}
animation: pinggreen 2s infinite;
{% else %}
animation: pingred 2s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 5px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
.container {
--icon-size: 80px !important;
}
.: |
ha-card {
background-color: transparent;
box-shadow: none;
width: fit-content !important;
}
Thanks! That was pure ignorance + copy and paste. I’m a slow learner
One more @dimitri.landerloos . The background is transparent but I can see the border of the box as light gray. How do I make that transparent too?
ha-card {
background-color: transparent;
box-shadow: none;
width: fit-content !important;
border: none !important;
}
1 Like
@dimitri.landerloos I’m trying to apply this logic to custom:popup-card but is not working.
title: Ignacio
size: normal
type: custom:popup-card
entity: person.ignacio_martinez
style: |
ha-card {
background-color: transparent;
box-shadow: none;
width: fit-content !important;
border: none !important;
}
cards:
- type: custom:bubble-card
card_type: separator
name: Map
icon: mdi:map-marker-account
dismissable: true
What am I missing?
Still trying to make a card work and now need to change some elements.
So, I got .name working but nothing else 
.
So line wrappibg is working.
But how do I change .entites.no-header and .entities itself?
I tried
"card_mod": {
"style": {
".entities": {
"$": ".no-header { padding: 0px 0px 0px }",
".entity": {
"$": ".name { text-overflow: unset !important; white-space: unset !important; margin-bottom: 0px; padding: 0px; display: flex }",
}
}
}
},
and also
"card_mod": {
"style": {
".entities.no-header": {
"$": "{padding-top: 0px}",
},
".entities": {
"$": "{padding: 0px 0px 0px}",
".entity": {
"$": ".name { text-overflow: unset !important; white-space: unset !important; margin-bottom: 0px; padding: 0px; display: flex }",
}
}
}
},
Or could all this hierarchy be avoided by always doing
"card_mod": {
"style": {
".": "entities {}",
".": "entities.no-header{}",
".": "entities.entity.name{}",
}
}
?
So basically just starting each div with ".": ?
Sorry , for my stupid question
what’s the meaning of $ in style?
From the docs, would config somehow allow changing all paddings of all cards at once?
Hello,
I will just copy-paste my post from configuration-frontend as I was informed that someone here will be able to help me:
I have created custom sensors which are referencing local calendar events, and I was able to create dashboard with garbage collecting schedule.
My sensor gets 3 states
0 - when it’s takeout day
1 - day before takeout day
2 - every other day
I was able to bind different images depending on sensor stare using state_image. My problem is, I would like to make image blink when sensor stare is 1 (day before takeout). Here is my dashboard code for one of bins, rest is redundant:
type: custom:config-template-card
entities:
- sensor.bio_days
variables:
DAYS: states['sensor.bio_days'].attributes['days']+'d'
card:
type: picture-entity
entity: sensor.bio_days
name: ${DAYS}
show_name: true
show_state: false
state_image:
'0': /local/images/smieci/kosz_bio_state0.png
'1': /local/images/smieci/kosz_bio_state1.png
'2': /local/images/smieci/kosz_bio_state2.png
This is how it looks like:
As you can see name is set to show days left, and I also would want to do blinking animation, but have no idea how to do it. I tried styling suggested here:
but with no success.
So difficult sometimes and only few people who know how to help.
Good luck with your blinking issue @milanos94
There is an example by ThomasLoven here https://github.com/thomasloven/lovelace-card-mod/blob/c182987f7d134970ede640be6681a95f701ecd85/test/views/tricks.yaml
MAybe that will help you?
To the other experts here.
I am still struggling to somehow get my grid to remain aligned.
Using the dev tools in Chrome I found that setting display: flex instead of display: grid seemingly suffices to display the card as an aligned “table”.
<div id="root" style="grid-template: "name temperature humidity battery" / auto auto auto auto;"><auto-entities style="grid-area: name;"><!----><!--?lit$5126878477$--><hui-grid-card style="--grid-card-column-count: 1;"></hui-grid-card><!--?--></auto-entities><auto-entities style="grid-area: temperature;"><!----><!--?lit$5126878477$--><hui-grid-card style="--grid-card-column-count: 1;"></hui-grid-card><!--?--></auto-entities><auto-entities style="grid-area: humidity;"><!----><!--?lit$5126878477$--><hui-grid-card style="--grid-card-column-count: 1;"></hui-grid-card><!--?--></auto-entities><auto-entities style="grid-area: battery;"><!----><!--?lit$5126878477$--><hui-grid-card style="--grid-card-column-count: 1;"></hui-grid-card><!--?--></auto-entities></div>
Does anybody know how to achieve this? Ideally within a template?
"card_mod": {
"style": {
}
},
try this and adapt the template to use your entity
- type: picture-entity
card_mod:
style: |
ha-card {
box-shadow: none;
animation:
{% if is_state('input_boolean.afvalwijzer_vandaag_notificatie','on')
and states('sensor.afvalwijzer_vandaag') != 'geen' -%}
blink 2s linear infinite;
{% else -%} none
{% endif %}
}
@keyframes blink {
100% {opacity: 0;}
}