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
Yeah thanks, I think I suddenly worked that out which is why you might have seen my question disappear!
I re-instated it so your reply to me wouldnât be an orphanâŠ
1 Like
Same for me, I use heavily custom button card with transparrent background inside picture elements card and after update to 3.5.0 (almost) all transparency gone. Strangely I canât figure pout difference between cards that now display with regular background and these that are renderred properly, without itâŠ
but why? Button-card hardly ever requires card_mod because of its native options to style anything?
Honestly, I donât have any map modification. So I donât know if there are performance problems somewhereâŠ
I have a horizontal-stack in a custom:vertical-stack-in-card and I styled the elements in the horizontal stack like so, and it works fine. However if I put this in a decluttering card it breaks completely and I donât understand why.
Please help!
regular card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
card_mod:
style:
ha-card:
mod-card:
$:
hui-horizontal-stack-card $: |
div#root hui-card > * {
display: flex;
flex-direction: column;
--ha-card-border-width: 0px !important;
margin-bottom: 5px !important;
margin-top: -5px !important;
}
div#root > :first-child > * {
margin-left: 4px !important;
}
div#root > :last-child > * {
margin-right: 4px !important;
}
.: |
hui-horizontal-stack-card {
--horizontal-stack-card-gap: 2px;
}
ha-card {
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
background: var(--ha-card-background,var(--card-background-color,#fff));
}
decluttering card template:
decluttering_test:
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
card_mod:
style:
ha-card:
mod-card:
$:
hui-horizontal-stack-card $: |
div#root hui-card > * {
display: flex;
flex-direction: column;
--ha-card-border-width: 0px !important;
margin-bottom: 5px !important;
margin-top: -5px !important;
}
div#root > :first-child > * {
margin-left: 4px !important;
}
div#root > :last-child > * {
margin-right: 4px !important;
}
.: |
hui-horizontal-stack-card {
--horizontal-stack-card-gap: 2px;
}
ha-card {
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
background: var(--ha-card-background,var(--card-background-color,#fff));
}
decluittering card:
type: custom:decluttering-card
template: decluttering_test
This is major news: Cardmod 3.50 class issues · Issue #423 · thomasloven/lovelace-card-mod · GitHub
Breaking, but major.
Bram and Karwosts found a different approach. There is still hope 
check the Pr I linked earlier
on theming badges with card_mod 3.5.0:
type: entity
entity: sensor.lightning_strikes_near_time
color: rgb(231,92,9)
hold_action:
action: navigate
navigation_path: /ui-overzicht/weer
visibility:
- condition: numeric_state
entity: sensor.lightning_strikes_near_time
above: 0
card_mod:
style:
ha-badge:
$: |
.badge {
border: 2px solid var(--badge-color) !important;
}
.: |
ha-state-icon {
--mdc-icon-size: 24px;
--card-mod-icon-color: var(--badge-color);
animation: blink 2s ease infinite;
}
@keyframes blink {
50% {opacity: 0.2;}
}
state-display {
font-size: 14px;
color: var(--badge-color);
}
.: |
hui-entity-badge {
--ha-card-background: rgb(18,46,129);
}
# pre 3.5.0
# type: custom:mod-card
# card:
# type: custom:hui-entity-badge
# entity: sensor.lightning_strikes_near_time
# color: rgb(231,92,9)
# hold_action:
# action: navigate
# navigation_path: /ui-overzicht/weer
# visibility:
# - condition: numeric_state
# entity: sensor.lightning_strikes_near_time
# above: 0
# card_mod:
# style:
# hui-entity-badge:
# $:
# ha-badge:
# $: |
# .badge {
# border: 2px solid var(--badge-color) !important;
# }
# .: |
# ha-state-icon {
# --mdc-icon-size: 24px;
# --card-mod-icon-color: var(--badge-color);
# animation: blink 2s ease infinite;
# }
# @keyframes blink {
# 50% {opacity: 0.2;}
# }
# state-display {
# font-size: 14px;
# color: var(--badge-color);
# }
# .: |
# ha-badge {
# --ha-card-background: rgb(18,46,129);
# }
1 Like
So far I was using:
card_mod:
style: |
ha-card {
background: none !important;
}
and it was working fine.
Now I found another solution, using native custom button-card styling:
styles:
card:
- background-color: transparent
which is probably more proper way of handling background transparrency.
BUT! It works only in editor mode:
As soon as I switch from editing card to dashboard edit or later to normal dashboard view I get this:
More over, in 3.5.0 also card height is not respected after quiting rditor. As you can see difference on screenshots. Card height is handled on parent picture-elements card by following code:
card_mod:
style: |
ha-card {
height: 150px !important;
top: 0px;
}
So for me (at lest for now) combination of HA 2025.1 and card-mod 3.5.0 is no go⊠until my issues can be handled by other code.