Did you update to 3.5.0 from HACS couple hours ago?
If you did, you have version which fixed some problems, but introduces some new.
Take look on posts arround this one: link to main thread
Hmm noticed now that I do have 3.5.0, might be from there I started to notice some “issue” with the coloring. Thanks I will see the other forum for updates.
I personally use card-mod a lot, somehow none of my customizations broke with this update.
So, I understand the frustration from people here when a very popular extension breaks in a new release. However I must agree with @koying and @Edwin_D, we can’t expect the core devs to fix and ensure compatibility of new releases with third party tools, the only thing they could have done better was maybe raise a breaking change in the changelog for how the card is rendered.
Who is responsible to ensure the third party tools don’t break are the third party tools developers themselves. If you develop an extension for something, you should have your own tests that cover all possible scenarios and these tests should be executed every time a new beta of the main core is available so you then have time to act upon it and fix your extension before final core release.
I had the big issue with Card-mod v3.5.0. I fixed the problem:
- Uninstall all Card-mod v3.5.0.
- Restart HA.
- Install Card-mod v3.4.5.
After this steps I got back all card-mod functions.
I have the same problem with car-mod after update core to 2025.1. But after update car-mod to latest 3.4.4 (released 7 hours ago), everything is OK, but only when using browser (Safari in my case). In case of using HA app on iOS, problem still lasts…
Did you clear cache of the mobile app?
I know do that for android… Settings->Apps-Home Assistant->Storage->Clear cache
Should be something similar for IOS.
I had the same problem after core update but uninstalling and reinstalling of Card-Mod solved the problem.
Worked for most of my cards as well!
You shouldn’t need card mod at all to style an entities card.
Instead of:
type: entities
card_mod:
style:
.: |
ha-card {
background: #d2d2d2;
border-top-right-radius: 0px !important;
border-color: transparent !important;
}
entities:
...
Remove your reliance on “hacky” solutions lol:
type: entities
style:
.: |
ha-card {
background: #d2d2d2;
border-top-right-radius: 0px !important;
border-color: transparent !important;
}
entities:
...
Simple as that!
EDIT: This is not totally correct, card mod is still somehow at work here and needs to be installed.
Fake news.
You sit on a throne of lies!
type: entities
style:
.: |
ha-card {
color: red;
}
div:nth-child(1)>hui-simple-entity-row$hui-generic-entity-row$: |
div.text-content.value.pointer > div {
display: none;
}
div:nth-child(2)>hui-simple-entity-row$hui-generic-entity-row$: |
div.text-content.value.pointer > div {
display: none;
}
div:nth-child(3)>hui-simple-entity-row$hui-generic-entity-row$: |
div.text-content.value.pointer > div {
display: none;
}
entities:
- entity: sun.sun
name: me sitting
icon: mdi:crown
- entity: sun.sun
name: throne
icon: mdi:chair-rolling
- entity: sun.sun
name: lies
icon: mdi:newspaper
What version of card_mod are you using?
The result of your posted code
With card_mod added
The need for card_mod was a change in card-mod 3
Ha, I guess I sit corrected, my apologies! I didn’t realize card mod was still at work under the hood.
I’m using card mod v3.3.0. The 3.4 update broke so many of my cards I had to roll it back. I’ve since been working on removing the old styling where I can, but I still can’t figure out how to use the new styling with horizontal stack cards.
If you do update card_mod, provide an example of a horizontal stack card and what you are looking to accomplish. I’d be happy to help!
I appreciate the offer!
This got me looking at the docs again , and I think I got it to work now. Here’s a thrown together example of my old code (the card I’m looking at updating has 1878 lines so I won’t post that):
type: custom:mod-card
style:
.: |
ha-card {
background-color: red;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
So the above would simply need to become this:
type: custom:mod-card
card_mod:
style:
.: |
ha-card {
background-color: red;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
Is that really it? Will the second one work with card-mod v3.4+? Both work in 3.3.0:
I’m not sure why this seemed so hard the first time I looked at it, probably some dumb formatting typo .
You should check out type: custom:stack-in-card
and type: custom:layout-card
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: -10px 0px 0px 0px
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
card_mod:
style: |
ha-card {
background-color: red;
}
and to answer your question, Yes for the most part. Some card_mod code may need updated because the card code changed.
Maybe you all can help me with this.
I have this card (which used to work before 2025 updates) but since them the styles applied with card mod don’t work at all, not sure if I am missing something or if anyone has an idea on how to make it work:
The borders around the button cards and the margins are not correct.
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: >-
'item1 item1' 'item2 item2' 'item3 item3' 'item4 item4' 'item5
item5'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content min-content min-content
- row-gap: 10px
custom_fields:
item1:
card:
type: custom:button-card
name: Tucson
tap_action:
action: none
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: rgba(0,0,0,0)
- border: none
- box-shadow: none
- height: auto
- width: auto
- margin-top: 6px
- margin-left: 18px
- margin-bottom: 0px
- padding: 6px
grid:
- grid-template-areas: "'n' 'l'"
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
name:
- justify-self: start
- font-weight: bold
- font-size: 1.5rem
label:
- justify-self: start
- font-weight: bold
- font-size: 1rem
- opacity: "0.4"
item2:
card:
type: custom:button-card
entity: device_tracker.2025_tucson_location
show_entity_picture: true
show_icon: false
show_name: false
entity_picture: /local/devices/car.png
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
styles:
entity_picture:
- width: 100%
- padding-bottom: 0%
item3:
card:
type: custom:button-card
custom_fields:
item1:
card:
type: tile
name: Engine
entity: binary_sensor.2025_tucson_engine
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
item2:
card:
type: tile
name: Lock
entity: lock.2025_tucson_door_lock
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
:host {
margin: 0px 12px 0 12px;
}
styles:
grid:
- grid-template-areas: "'item1 item2'"
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
card:
- border: none
- box-shadow: none
- padding: 0px
item4:
card:
type: custom:button-card
custom_fields:
item1:
card:
type: tile
name: Odometer
entity: sensor.2025_tucson_odometer
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
item2:
card:
type: tile
name: Range
entity: sensor.2025_tucson_fuel_driving_range
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
card_mod:
style: |
:host {
margin: 0px 12px 0 12px;
}
styles:
grid:
- grid-template-areas: "'item1 item2'"
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
card:
- border: none
- box-shadow: none
- padding: 0px
item5:
card:
type: custom:button-card
custom_fields:
item1:
card:
type: custom:fluid-level-background-card
card:
type: tile
name: Battery
entity: sensor.2025_tucson_car_battery_level
entity: sensor.2022_tucson_car_battery_level
level_color: hsl(115, 50%, 30%)
item2:
card:
type: custom:fluid-level-background-card
card:
type: tile
name: Fuel
entity: sensor.2025_tucson_fuel_level
entity: sensor.2025_tucson_fuel_level
level_color: hsl(217, 50%, 30%)
card_mod:
style: |
:host {
margin: 0px 12px 0 12px;
}
styles:
grid:
- grid-template-areas: "'item1 item2'"
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
card:
- border: none
- box-shadow: none
- padding: 0px
Hi all,
I also have the same problem with card-mod styling after the HA Core upgrade to version 2025.2. I have already tried all the types mentioned above:
- renaming the .gz file
- checking the _renderEntity in www/community/lovelace-card-mod/card-mod.js
- going back to card-mod version 3.4.3
- uninstalling card-mod, restarting HA, and reinstalling either an older or the current version
- changing the style from:
- type: entities
entities:
card_mod:
style:
.: |
#states > * {
margin: 2px -10px !important;
margin-left: -25px !important;
font-size: 10.5px;
--mdc-icon-size: 18px;
}
to
- type: entities
entities:
style:
.: |
#states > * {
margin: 2px -10px !important;
margin-left: -25px !important;
font-size: 10.5px;
--mdc-icon-size: 18px;
}
Nothing helped me.
Does anybody have an idea how to solve it?
Thanks.