🔹 Card-mod - Add css styles to any lovelace card

Yes, this seems to work. I think, the problem is the multiple-entity-row card. It doesn‘t work there

Please reference the guide @Ildar_Gabdullin has provided. His posts provides multiple scenarios for the custom:multiple-entity-row card

An example

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.p1s_ams_tray_3
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: {{ state_attr('sensor.p1s_ams_tray_3', 'color') }};
                  }

1 Like

Just done my usual monthly HA Core update to 2025.1.4 and noticed a few things not working in cards.

I’d been using this in an entities cards to conditionally show an icon. It’s stopped working in 2025.1.4. Did I miss something that changed? Any help would be gratefully received. Thanks.

            entities:
              - entity: sensor.dave_location
                name: Dave
                card_mod:
                  style:
                    hui-generic-entity-row $: |
                      .text-content {
                        font-size: 10px;
                        color: #ec7063;
                      }
                      state-badge {            
                      {% if states(config.entity) == 'Kitchen' %}
                        --card-mod-icon: mdi:stove;
                        --paper-item-icon-color: gold
                      {% elif states(config.entity) == 'Living Room' %}
                        --card-mod-icon: mdi:sofa;
                        --paper-item-icon-color:green
                      {% elif states(config.entity) == 'Master Bedroom' %}
                        --card-mod-icon: mdi:bed-queen;
                        --paper-item-icon-color:blue
                      {% elif states(config.entity) == 'In bed' %}
                        --card-mod-icon: mdi:sleep;
                        --paper-item-icon-color:blue
                      {% elif states(config.entity) == 'Guest Bedroom' %}
                        --card-mod-icon: mdi:bed-double;
                        --paper-item-icon-color:gold
                      {% elif states(config.entity) == 'Office' %}
                        --card-mod-icon: mdi:desk;
                        --paper-item-icon-color:red
                      {% elif states(config.entity) == "Jamie's Room" %}
                        --card-mod-icon: mdi:bed;
                        --paper-item-icon-color:yellow
                      {% elif states(config.entity) == "Sean's Room" %}
                        --card-mod-icon: mdi:bunk-bed;
                        --paper-item-icon-color:yellow
                      {% elif states(config.entity) == 'Garage' %}
                        --card-mod-icon: mdi:garage-variant;
                        --paper-item-icon-color:grey
                      {% else %}
                        --card-mod-icon: mdi:home;
                        --paper-item-icon-color:#ec7063
                      {% endif %};                        
                      }  

@P6Dave What version of card_mod are you using? Your code tested fine. If it’s v3.5, please roll back to v3.4.4

1 Like

technically, it is an update :wink:

2 Likes

It’s the only reason I could think his card isn’t working. It shouldn’t be associated with the 2025.1.4 Core update. I do welcome your opinion, you have been at this a lot longer than me :smiley:

2 Likes

no wait, I was merely jesting.

we had to update from 3.5.0 to 3.4.4 after 3.5.0 was pulled, and at that time the 3.4.3 was the latest.

3.4.4 was an update from 3.4.3

and you’re right, many post of people stating things dont work are still based on that half a day existence of 3.5.0 (which I still use btw)

it has become my first question helping people: what version is installed.

3 Likes

Yep! That was it exactly. I ‘updated’ to v3.4.4 and all is working again. Thanks everyone who responded.

using this mod on my badges in general

card_mod:
  style:
    ha-badge:
      $: |
        .badge {
          border: 2px solid var(--success-color) !important;
          box-shadow: var(--box-shadow) !important;
        }

I’d like the box-shadow to be sensitive to the screen width, with something like

        @media (max-width: 768px)

can this be done inside that template, in pseudocode:

box-shadow: {{'var(--box-shadow) !important' if @media (max-width: 768px)}};

or would I need a complete double setting for that?

Thank you … sorry I missed the code it is updated.

This also used to work for the bars. But does not anymore since 2025.2. Bars are now black with a colored outline.
Any work around?

all of the graphs now use a different library as of 2025.2
maybe that has to do with it?

Ive got a sliding door state-badge and I just wanrt to be able to color it yellow when the state is on/open…

Screen Shot 2025-02-06 at 9.09.16 AM

  - type: state-badge
    entity: binary_sensor.sliding_door
    style:
      left: 39.5%
      top: 29%

It shouldn’t be that difficult, but after 3 days, I give up and thought I would ask for assistance.

I ended up putting a state-icon over top, but that’s a lame workaround

Screen Shot 2025-02-06 at 9.20.34 AM

  - type: state-icon
    entity: binary_sensor.sliding_door
    state_color: true
    style:
      left: 39.6%
      top: 26%

As Marius said already, a new graph library is used - so a structure of graphs could change and thus card-mod may stop working. Means - you will have to find a new way of card-modding by yourself (or wait until someone posts new examples).

After some update the code (below) stopped working, it doesn’t change the background color or fonts, I looked through everything, but I still don’t understand the reason why it doesn’t work.
Code:

type: custom:auto-entities
show_empty: false
card:
  type: entities
  card_mod:
    style: |
      ha-card {
        background-color: red;
        --primary-text-color: white;
        --secondary-text-color: white;
        --paper-item-icon-color: white;
      }
filter:
  include:
    - entity_id: sun.*
      options:
        secondary_info: last-changed
sort:
  method: last_changed
  reverse: true

Result:

Are you using card_mod v3.5.0? If so update to v3.4.4

The code is fine

2 Likes

Thank you, it helped, that was exactly the problem.

1 Like

Hello there!
I’m trying to use this plugin but I’m not having success. I followed the installation steps, but it doesn’t work. What do I need to check to make sure everything is ok?

I’m testing with this basic code, but it doesn’t work:

type: entities
entities:
  - sensor.time
  - sensor.date
  - sensor.sun_next_dusk
card-mod:
  style: |
    ha-card {
      color: red;
    }

That results:

Can anyone kindly help me?

Greetings!!!

You have a typo in the 1st line of card-mod code. Compare it with an example in docs.

Wow… What a silly mistake! :sweat_smile:

It’s card_mod and not card-mod.

Thank you very much!!!