Sorry, cannot help now, try using Code Inspector & provided examples for the vertical/horizontal stack cards (as usual: try ā fail ā repeat ā succeed)
Thanks for the reply!
Indeed, Iāve managed to make your example with a rotating icon on a mini graph work well here, and I think Iāve understood what was wrong in my initial approach - basically:
- I was starting with āmini-graph-card$ā instead of within the āha-cardā;
- I need to target the ha-svg-icon level for an animation to apply
- I cannot observe some effects on intermediary levels (itās either the whole header or the icon that is several levels below in the DOM)
Thank you again for these very useful examples.
Nonetheless, getting back to my real problem with a slightly more difficult structure, even after several more hours spent on this, Iām still bumping into an issue that might be due to my lack of correct reading of the DOM.
To contextualize a bit, I have a mini room card and I want to show the state of some sensors on it, through some mushroom-chips. Iād want to be able to apply some of the neat animations shown in this thread on the icons that are within these chips.
My YAML structure is as follows - there are some conditionals Iāve removed to simplify the code (so ignore the fact the icon is static here) and I donāt show how the positioning of s1 is handled:
name: Office
icon: mdi:desk
entity: sensor.temphumsensoroffice_temperature
custom_fields:
s1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: "binary_sensor.occupancysensoroffice_occupancy"
icon: mdi:motion-sensor
icon_color: green
tap_action:
action: more-info
card_mod:
style: |
ha-card .chip-container mushroom-template-chip:
$: |
mushroom-chip ha-state-icon:
$: |
ha-icon:
$: |
ha-svg-icon {
background: red !important;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
For me, this should correspond to the DOM Iām seeing below (and you can see the whole path at the bottom of the screenshot):
However, I do manage to make the whole chip rotate though, if I use:
card_mod:
style: |
ha-card .chip-container mushroom-template-chip {
background: red !important;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
You may say that for this particular example, the outcome is visually the same. But the problem is that eventually, Iāll want to use other animations than rotation, and for instance when clipping with a path, it does matter whether itās the whole chip or just the icon inside that is targeted. So Iām working on rotation merely as an example I want to extend to other animations and it is therefore important to me to target the icon itself.
Iād truly welcome an expert eye on this to point me out the probably obvious mistake I might be doing.
Sorry, can say nothing about mushrooms, not using them.
you can customize the styles for individual chipsā¦
type: custom:mushroom-chips-card
chips:
- type: template
card_mod:
style: |
ha-card {
background: red !important;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
entity: binary_sensor.movement_backyard
icon: mdi:motion-sensor
icon_color: green
tap_action:
action: more-info
- type: template
entity: binary_sensor.movement_backyard
icon: mdi:motion-sensor
icon_color: green
tap_action:
action: more-info
Style each individual state-display of the new āHeadersā type without targeting individual children:
card_mod:
style:
.badges hui-entity-heading-badge $: |
state-display {
color: red;
font-size: medium;
}
Mushroom Chips are a different animal. Use this as an exampleā¦
type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.bedroom_fan
icon: mdi:fan
icon_color: green
tap_action:
action: more-info
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: rotation 2s linear infinite;
}
@keyframes rotation {
100% { transform: rotate(-360deg); }
}
Refer to this thread Mushroom Cards - Build a beautiful dashboard easily š (Part 2)
Yes, if same style is needed for each child.
Good example.
Hi, what am i doing wrong, pleaes?
Cant get the icons to show or change colour based on the state of the lock
camera_view: auto
type: picture-glance
title: Front Door
entities:
- entity: light.floodlight
icon: mdi:light-flood-down
- entity: light.front_spot
- entity: light.driveway
- entity: lock.front_door
tap_action:
action: call-service
service: lock.unlock
target:
entity_id: lock.front_door
style:
--icon-color: |
[[[
if (states['lock.front_door'].state === 'locked') {
return 'green';
} else {
return 'red';
}
]]]
--icon: |
[[[
if (states['lock.front_door'].state === 'locked') {
return 'mdi:lock';
} else {
return 'mdi:lock-off';
}
]]]
- entity: camera.front_door_package_camera
icon: mdi:package
camera_image: camera.front_door_high_resolution_channel
As a starting point:
1st post ā link at the bottom titled āfantasticā ā picture-glance
Ok i have pealed this back and still cant get it to work ā¦ any pointers please?
camera_view: auto
type: picture-glance
title: Front Door
camera_image: camera.front_door_high_resolution_channel
entities:
- entity: lock.front_door
card_mod:
style: |
ha-card {
background: var(--background-card-color);
}
#states div:nth-of-type(1) {
--paper-item-icon-color: [[ if(lock.front_door == "unlocked", "red", "green")]];
}
How do I need to modify the card_mod style in case of using the decluttering-card?
Iāve found 2 card_mod examples for the decluttering-card, both are using the following code.
card_mod:
style: '[[STYLE]]'
This would be working fine, but the sense of using the decluttering-card will be lost, because of too many lines left in the card.
Here I found another solution for a bar-card and Iāve tried to transfer this solution to my usecase.
Here is the simplified code with sensor sun.sun to make it run in any environment.
decluttering_templates:
raumcard_overview_template_icon_links:
default:
- ENTITY: sun.sun
- POSITION_LEFT: 4px
- CHIP_ICON_SIZE: 0.6em
card:
type: custom:mod-card
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: '[[ENTITY]]'
icon: mdi:[[ICON]]
icon_color: '[[ICON_COLOR]]'
content_info: none
card_mod:
style:
decluttering-card $ mushroom-chips-card $: |
ha-card {
position: absolute;
top: '[[POSITION_TOP]]';
left: '[[POSITION_LEFT]]';
z-index: 1;
--chip-icon-size: '[[CHIP_ICON_SIZE]]';
--chip-border-width: 0;
}
According to the example above, Iāve inserted the line
decluttering-card $ mushroom-chips-card $
to make the card_mod work within decluttering card.
Here the code for the card:
type: custom:decluttering-card
template: raumcard_overview_template_icon_links
variables:
- ENTITY: sun.sun
- ICON: sofa-outline
- ICON_COLOR: orange
- POSITION_TOP: 35px
- POSITION_LEFT: 15px
Please note, that this code is simplified to just show the issue.
The hole code of the card would be more than 500 lines and could be reduced by using the decluttering-card.
What do I need to change to make the card_mod (POSITION_TOP & LEFT) working for this combination?
@Ildar_Gabdullin can you make a fixed post in the grand fantastic overview for the 2025.1 breaking of entity-rows, and how to temporarily fix it? Maybe just link to the GitHub repo post where we explain how to proceed, or to this one in this thread: š¹ Card-mod - Add css styles to any lovelace card - #7894 by Mariusthvdb
I can get it to work in standard glance. But if i transpose this to picture-glance, no avail ? 
type: glance
entities:
- entity: lock.front_door
state_color: false
card_mod:
style: |
state-badge {
{% if is_state(config.entity,'on') %}
color: red;
{% else %}
color: yellow;
{% endif %}
}
NOT working:
camera_view: auto
camera_image: camera.front_door_high_resolution_channel
type: picture-glance
title: Front Door
entities:
- entity: lock.front_door
state_color: false
card_mod:
style: |
state-badge {
{% if is_state(config.entity,'on') %}
color: red;
{% else %}
color: yellow;
{% endif %}
}
Thank you so much! Indeed, what I had completely overlooked this whole time is that mushrooms has a syntax that does not follow the same logic. So I was trying complex DOM piercing that actually led to nothing.
For anyone that would bump into this in the future, what I should have looked at much earlier was this post that describes well the combination of mushrooms with card-mod: Mushroom Cards Card Mod Styling/Config Guide
Thanks also to Ildar for the pointers, it was my bad for not talking about mushrooms at the beginning!
No, I have not installed it yet. Iāll try to check what have changed there.
1 Like
iāve read to posts you have suggested - this is a far as i can get ā¦
Icon change = works
background change = works
icon colour change - doesnāt work.
Where am i going wrong??
camera_view: auto
camera_image: camera.front_door_high_resolution_channel
type: picture-glance
title: Front Door
entities:
- entity: lock.front_door
tap_action:
action: call-service
service: lock.unlock
target:
entity_id: lock.front_door
state_color: false
card_mod:
style: |
ha-card .box {
background-color: rgba(0,255,0,0.5);
}
.box div:nth-child(2) div:nth-child(1) {
--card-mod-icon: mdi:car;
}
#states div:nth-child(2) div:nth-child(1) {
--paper-item-icon-color: {% if is_state("lock.front_door", "unlocked") %} red {% else %} green {% endif %};
}
After hours of trial and error:
camera_view: auto
camera_image: camera.front_door_high_resolution_channel
type: picture-glance
title: Front Door
entities:
- entity: light.floodlight
icon: mdi:light-flood-down
- entity: light.front_spot
- entity: light.driveway
- entity: lock.front_door
state_color: false
tap_action:
action: call-service
service: lock.unlock
target:
entity_id: lock.front_door
- entity: camera.front_door_package_camera
icon: mdi:package
grid_options:
columns: 12
rows: auto
card_mod:
style: |
ha-card .box {
background-color: rgba(0,255,0,0.5);
}
.box div:nth-child(2) div:nth-child(1) {
{% set lock_state = states('lock.front_door') %}
--card-mod-icon-color:
{% if lock_state == 'unlocked' %} red
{% elif lock_state == 'locked' %} blue
{% else %} yellow; {% endif %};
}
I will do it. Currently I am away from a PC. Will add a link in a few days I hope.
1 Like
sure, no rush.
as it looks, the marker no longer has the entity_id, so we can not template that into it anymore like we didā¦
