HA Core 2025.1 entities card mod styling broken

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:

  1. Uninstall all Card-mod v3.5.0.
  2. Restart HA.
  3. Install Card-mod v3.4.5.
    After this steps I got back all card-mod functions.
1 Like

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.

Thanks, this helped me!

I had the same problem after core update but uninstalling and reinstalling of Card-Mod solved the problem.

3 Likes

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.

4 Likes

You sit on a throne of lies! :crazy_face:

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 :person_facepalming:, 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:

image

I’m not sure why this seemed so hard the first time I looked at it, probably some dumb formatting typo :sweat_smile:.

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.

1 Like

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.