🔹 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?