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

[LiQuid_cOOled]

Mushroom Chips are a different animal. Use this as an example…

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: fan.bedroom_fan
    icon: mdi:fan
    icon_color: green
    tap_action:
      action: more-info
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: rotation 2s linear infinite;
        
      }
      @keyframes rotation {
        100% { transform: rotate(-360deg); }
      }       

Refer to this thread Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2)

[Ildar_Gabdullin]

Yes, if same style is needed for each child.
Good example.

[Vinney]

Hi, what am i doing wrong, pleaes?

Cant get the icons to show or change colour based on the state of the lock

camera_view: auto
type: picture-glance
title: Front Door
entities:
  - entity: light.floodlight
    icon: mdi:light-flood-down
  - entity: light.front_spot
  - entity: light.driveway
  - entity: lock.front_door
    tap_action:
      action: call-service
      service: lock.unlock
      target:
        entity_id: lock.front_door
    style:
      --icon-color: |
        [[[
          if (states['lock.front_door'].state === 'locked') {
            return 'green';
          } else {
            return 'red';
          }
        ]]]
      --icon: |
        [[[
          if (states['lock.front_door'].state === 'locked') {
            return 'mdi:lock';
          } else {
            return 'mdi:lock-off';
          }
        ]]]
  - entity: camera.front_door_package_camera
    icon: mdi:package
camera_image: camera.front_door_high_resolution_channel

[Ildar_Gabdullin]

As a starting point:
1st post → link at the bottom titled “fantastic” → picture-glance

[Vinney]

Ok i have pealed this back and still cant get it to work … any pointers please?

camera_view: auto
type: picture-glance
title: Front Door
camera_image: camera.front_door_high_resolution_channel
entities:
  - entity: lock.front_door
card_mod:
  style: |
    ha-card {
      background: var(--background-card-color);
    }
    #states div:nth-of-type(1) {
      --paper-item-icon-color: [[ if(lock.front_door == "unlocked", "red", "green")]];
    }

[scw2wi (Walter Schlögl)]

How do I need to modify the card_mod style in case of using the decluttering-card?

I’ve found 2 card_mod examples for the decluttering-card, both are using the following code.

card_mod:
  style: '[[STYLE]]'

This would be working fine, but the sense of using the decluttering-card will be lost, because of too many lines left in the card.

Here I found another solution for a bar-card and I’ve tried to transfer this solution to my usecase.

Here is the simplified code with sensor sun.sun to make it run in any environment.

decluttering_templates:
  raumcard_overview_template_icon_links:
    default:
      - ENTITY: sun.sun
      - POSITION_LEFT: 4px
      - CHIP_ICON_SIZE: 0.6em
    card:
      type: custom:mod-card
      card:
        type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: '[[ENTITY]]'
            icon: mdi:[[ICON]]
            icon_color: '[[ICON_COLOR]]'
            content_info: none
      card_mod:
        style:
          decluttering-card $ mushroom-chips-card $: |
            ha-card {
              position: absolute;
              top: '[[POSITION_TOP]]';
              left: '[[POSITION_LEFT]]';
              z-index: 1;
              --chip-icon-size: '[[CHIP_ICON_SIZE]]';
              --chip-border-width: 0;
            }

According to the example above, I’ve inserted the line
decluttering-card $ mushroom-chips-card $
to make the card_mod work within decluttering card.

Here the code for the card:

type: custom:decluttering-card
template: raumcard_overview_template_icon_links
variables:
  - ENTITY: sun.sun
  - ICON: sofa-outline
  - ICON_COLOR: orange
  - POSITION_TOP: 35px
  - POSITION_LEFT: 15px

Please note, that this code is simplified to just show the issue.
The hole code of the card would be more than 500 lines and could be reduced by using the decluttering-card.

What do I need to change to make the card_mod (POSITION_TOP & LEFT) working for this combination?

[Mariusthvdb (Marius)]

@Ildar_Gabdullin can you make a fixed post in the grand fantastic overview for the 2025.1 breaking of entity-rows, and how to temporarily fix it? Maybe just link to the GitHub repo post where we explain how to proceed, or to this one in this thread: 🔹 Card-mod - Add css styles to any lovelace card - #7894 by Mariusthvdb

[Vinney]

I can get it to work in standard glance. But if i transpose this to picture-glance, no avail ?

type: glance
entities:
  - entity: lock.front_door
    state_color: false
    card_mod:
      style: |
        state-badge {
          {% if is_state(config.entity,'on') %}
            color: red;
          {% else %}
            color: yellow;
          {% endif %}
        }

NOT working:

camera_view: auto
camera_image: camera.front_door_high_resolution_channel
type: picture-glance
title: Front Door
entities:
  - entity: lock.front_door
    state_color: false
    card_mod:
      style: |
        state-badge {
          {% if is_state(config.entity,'on') %}
            color: red;
          {% else %}
            color: yellow;
          {% endif %}
        }

[Vorty]

Thank you so much! Indeed, what I had completely overlooked this whole time is that mushrooms has a syntax that does not follow the same logic. So I was trying complex DOM piercing that actually led to nothing.

For anyone that would bump into this in the future, what I should have looked at much earlier was this post that describes well the combination of mushrooms with card-mod: Mushroom Cards Card Mod Styling/Config Guide

Thanks also to Ildar for the pointers, it was my bad for not talking about mushrooms at the beginning!

[elchininet]

@Mariusthvdb

Any chance you are running the beta 2025.1 ?

No, I have not installed it yet. I’ll try to check what have changed there.

[Vinney]

@Ildar_Gabdullin

i’ve read to posts you have suggested - this is a far as i can get …

Icon change = works
background change = works
icon colour change - doesn’t work.

Where am i going wrong??

camera_view: auto
camera_image: camera.front_door_high_resolution_channel
type: picture-glance
title: Front Door
entities:
  - entity: lock.front_door
    tap_action:
      action: call-service
      service: lock.unlock
      target:
        entity_id: lock.front_door
    state_color: false
card_mod:
  style: |
    ha-card .box {
      background-color: rgba(0,255,0,0.5);
    }
    .box div:nth-child(2) div:nth-child(1) {
      --card-mod-icon: mdi:car;
    }
    #states div:nth-child(2) div:nth-child(1) {
      --paper-item-icon-color: {% if is_state("lock.front_door", "unlocked") %} red {% else %} green {% endif %};
    }

[Vinney]

After hours of trial and error:

camera_view: auto
camera_image: camera.front_door_high_resolution_channel
type: picture-glance
title: Front Door
entities:
  - entity: light.floodlight
    icon: mdi:light-flood-down
  - entity: light.front_spot
  - entity: light.driveway
  - entity: lock.front_door
    state_color: false
    tap_action:
      action: call-service
      service: lock.unlock
      target:
        entity_id: lock.front_door
  - entity: camera.front_door_package_camera
    icon: mdi:package
grid_options:
  columns: 12
  rows: auto
card_mod:
  style: |
    ha-card .box {
      background-color: rgba(0,255,0,0.5);
    }
    .box div:nth-child(2) div:nth-child(1) {
      {% set lock_state = states('lock.front_door') %}
      --card-mod-icon-color: 
        {% if lock_state == 'unlocked' %} red
        {% elif lock_state == 'locked' %} blue
        {% else %} yellow; {% endif %};
    }

[Ildar_Gabdullin]

I will do it. Currently I am away from a PC. Will add a link in a few days I hope.

[Mariusthvdb (Marius)]

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…

[VietNgoc (Ngoc John)]

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

[parautenbach (Pieter Rautenbach)]

It’s also documented: GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card.

[Mariusthvdb (Marius)]

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

[IgorZg (Igor Simić)]

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.

[GTunney]

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;
    }

[pergola.fabio]

all my borders are indeed back too with release 3.5.0