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ā¦
There is an element with the attribute entity name, but I donāt think it is possible to modify another shadow to entity marker via template. 
Someone more experienced has to do that 
Itās also documented: GitHub - thomasloven/lovelace-card-mod: š¹ Add CSS styles to (almost) any lovelace card.
Thomas fixed the card-mod resource!
It is supposed to do a lot of good for change HA elements, and badges and cards in sections. (release notes)
Seeing a lot of problems in my own config though, using many embedded stacked cards, that now all fall apart.
So be preparedā¦
former badge mod:
type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: sensor.solar_energy_daily
show_name: true
name: Zon
color: gold
card_mod:
style:
hui-entity-badge:
$:
ha-badge:
$: |
.badge {
border: 2px solid var(--badge-color) !important;
}
.: |
ha-state-icon {
--mdc-icon-size: 24px;
}
now becomes
type: entity
entity: sensor.solar_energy_daily
show_name: true
name: Zon
color: gold
card_mod:
style:
ha-badge:
$: |
.badge {
border: 2px solid var(--badge-color) !important;
}
.: |
ha-state-icon {
--mdc-icon-size: 24px;
}
if I get it correctly.
dont have time now to fix all other stuff, so forced to revert and list the remaining issues:
mod-card stack-cards dont lose their box-shadows and gaps when not using mod-card
mods not using mod-card:
section headers
theme card classes
no more scrolling folds
tile card image and background
Wowā¦ installed 3.5.0 and loosed lot of background colors. Donāt have time to investigate, so revert back to ā_renderEntity patchedā version of 3.4.3.
Latest changed to card mod seem to have caused some issues on my dash.
One example is the below, it was using mod-card so I have removed that however none of the other styling is applying for some reason.
Downstairs should be in center but isnāt and certain styling options such as font weight arenāt working
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: Downstairs
subtitle: ""
card_mod:
style:
mushroom-title-card$: |
.title {
--card-primary-color: rgb(var(--rgb-black));
--title-font-size: 20px;
--title-font-weight: 350;
text-align: center;
}
.subtitle {
--card-secondary-color: rgb(var(--rgb-red));
--subtitle-font-size: 32px;
--subtitle-font-weight: bolder;
}
.header {
--title-padding: 0px 5px 0px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.hallway_lamp
use_light_color: true
- type: custom:mushroom-light-card
entity: light.living_room_lamp
use_light_color: true
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.dining_room_lamp
use_light_color: true
- type: custom:mushroom-light-card
entity: light.cupboard_lights
use_light_color: true
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.plinth_lights_1
use_light_color: true
- type: custom:mushroom-light-card
entity: light.plinth_lights_2
use_light_color: true
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.stair_lights
use_light_color: true
- type: custom:mushroom-light-card
entity: light.soffit_lights
use_light_color: true
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: none;
border-radius: 15px;
background-color: none;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.00);
box-shadow: 1px;
border-radius: 15px;
background-color: white;
}
all my borders are indeed back too with release 3.5.0
btw, we need some extra input hereā¦ A reversal PR was made to re-instate the entity_id, but dev;s fear performance issues
I never experienced that, so maybe chime in ?
Am I being particularly dim today?
What does this mean?
it means that where we used mod-card before (on the new view badges, or on stacks, cards without ha-card element), we should now be able to modify these directly.
However, things arenāt that simple in lifeā¦ the badges are fine now, as is the issue introduced in 2025.1, but the stack cards and classes in card-mod theme are no more functional (at east with the existing syntax)ā¦
either a card-mod bug, or user error requiring new syntax, yet to be defined
1 Like