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

[Ildar_Gabdullin]

And I never used mushrooms, can say nothing about them))).
In decluttering card we have to do like

my_super_template:
  card:
    type: custom:mod-card
    card:
      type: custom:multiple-entity-row
      ...
    card_mod:
      style:
        multiple-entity-row $:
          .. and so on

With “ha-card” embedded into m-e-r it would be like

my_super_template:
  card:
    type: custom:multiple-entity-row
    ...
    card_mod:
      style:
        ...

But as I said, there are pro & contra…

[VietNgoc (Ngoc John)]

@Ildar_Gabdullin

    type: custom:mod-card
    card:
      type: custom:multiple-entity-row

The mod card just wrap a custom element into the ha-card, without ha-card… without ha-card there is no card-mod

@Ildar_Gabdullin

With “ha-card” embedded into m-e-r it would be like

yep

[arganto]

@VietNgoc

The mod card just wrap a custom element into the ha-card, without ha-card… without ha-card there is no card-mod

This is true for cards, but nt for the rows of cards with ha-card. Rows don’t have a ha-card. And as it is not only about M-E-R in 2025.1, but with generic row as well (or other way round, this generic is used within M-E-R as well and this generic row should be the root cause, I wonder if this approach to modify custom cards with elements, which should not be there.

[Mariusthvdb (Marius)]

yes, the change happened to hui-generic-entity-row, (well, and the map card).
so apparently any other card that uses hui-generic-entity-row in some way is now also involved. Not to say the card_mod customizations on those are now broken.

my thoughts too are that we should focus on the row, and with that hope to fix all occurrences in those configurations on row level.

However painful that is going to be, as core Frontend devs simply state that this is unsupported, and they dont even need to publish the changes somewhere, we are on our own.

(remember the state-color drama?)

Arganto has justly said I made a mess of my reports above… I just dont know how to procede best.

do we open a separate thread per config that now is broken, to keep them tidy and fix individually?

if we keep posting here, they will get drowned

Mods that are still working like before are only 2:

entities in a Glance card, and entities inside a fold-entity-row.
we can also set some generic mod to fold-entity-row in the main entities card-mod, setting it to all items in
the fold.

any other mutation, like auto-entities lists, template-entity-row, or even auto-entities inside the fold-entity-row

[Ildar_Gabdullin]

@Mariusthvdb

well, and the map card

At least this one is a known reason. And probably can be fixed with a changed style.

Let’s wait for 2025.1 then.
I agree that shouting (100% positive meaning) before official release does help to sort out things. But here we can see ignoring, so… Let’s wait and then more experienced users will start testing, may be it will change things.

OK, started downloading 2025.1.
“What fun. What fun!” (Darth Maul)

[Mariusthvdb (Marius)]

before trying to fix all, would it be at all conceivable this could be fixed by PR’ing card_mod?
(ofc we would need to really understand the actual change in core for that, but it seems it would be a better solution than ‘fixing’ all possible variants)

@Ildar_Gabdullin

Let’s wait for 2025.1 then.

it’s here

be sure to back up your current version, as automatic updates before updating have been taken out…
hmm thats updating to b9, while my notification says:

o well, Ill click update once more then

[Ildar_Gabdullin]

@Mariusthvdb

back up your current version

Nah, that is for babies… )))

[Mariusthvdb (Marius)]

well, new Backup has its quirks (as was discovered in beta), so be a baby this once. better safe than sorry.

it’s here after all:

[VietNgoc (Ngoc John)]

thomasloven/lovelace-card-mod/blob/f59abc785eabb689ac42a9076197254421f96c60/src/helpers/apply_card_mod.ts#L106C1-L169C2

The only difference between 2024 and 2025 that I can see is that there is no class added to the tagname for the custom element, and the card-mod has disappeared. Isn’t there a problem here?

beta

[Ildar_Gabdullin]

@Mariusthvdb

so be a baby this once

Seriously, I usually copy a whole “HA” folder (except *.db & *.log) manually, then tar, then copy to Dropbox.

[Ildar_Gabdullin]

@VietNgoc

no class added

I do not recall a PR for this. And no idea if this class is used in card-mod internally… Need to check.

[HerbertTestmann]

Hello

How can I display the text on the “heading” card in red and change the text size?

type: heading
icon: mdi:snowflake-thermometer
heading: F R O S T
heading_style: subtitle
tap_action:
  action: none
card_mod:
  style: |
    ha-card {
            background-color: lightblue !important;
            align-items: center;
          }

[Ildar_Gabdullin]

1st post → link at the bottom titled “fantastic” → heading card

[arganto]

@VietNgoc

and the card-mod has disappeared

Is there something in this node? You didint show and I would say the other obove from Marius is more relevant?

[VietNgoc (Ngoc John)]

[Ildar_Gabdullin]

It was new for me:
Never ever use “0” values for css theme variables!
Correct:

--some-variable: 0px

Wrong:

--some-variable: 0

link

[agustusbotti]

Hello, I’m having this problem with Card_mod which gives me the following error when I insert the code, although it works without problems I can’t find what is causing the error. Thanks

• At path: chips.0.card_mod – Expected a value of type never, but received: [object Object]

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:battery-alert-variant-outline
    icon_color: blue
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: custom:battery-state-card
            title: Devices with Low Battery
            sort_by_level: asc
            filter:
              include:
                - name: attributes.device_class
                  value: battery
              exclude:
                - name: state
                  value: 10
                  operator: ">"
                - name: state
                  value: Unknown
                - name: state
                  value: Unavailable
                - name: display.platform
                  value: mobile_app
    card_mod:
      style: |
        ha-card:after {
          content: "{{states.sensor
                          | selectattr('attributes.device_class', 'defined')
                          | selectattr('attributes.device_class', 'eq', 'battery')
                          | rejectattr('entity_id', 'in', integration_entities('mobile_app'))
                          | map(attribute='state')
                          | reject('in', ['unknown', 'unavailable'])
                          | map('int', -1) | select('le', 10)
                          | select('ge', 0)
                          | list | count
                         }}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgb(var(--rgb-red));
          color: var(--card-background-color);
          font-weight: bolder;
          border-radius: 50%;
          top: -5px;
          right: -5px;
          width: 16px;
          height: 16px;
          font-size: 11px; 
        }

[mombro]

Is there a way to have the icon of an entity card in the same line as the content, so instead of this:

I could have something like this:

My entity-card currently looks simply like this:

type: entity
entity: sensor.biowaste
grid_options:
  columns: 12
  rows: 2
card_mod:
  style: |
    .name{
      display: none;
    }

[bluk]

How might I change the row-gap of a vertical-stack card? In my image the purple dashed space is the row-gap but it looks as though it is under the #root and I can’t seem to properly address it. Appreciate any insights.

[Ildar_Gabdullin]

Any changes for vertical-stack card should be done with mod-card.
Go to 1st post → link at the bottom titled “fantastic” → vertical-stack