šŸ”¹ Card-mod - Add css styles to any lovelace card

Impossible currently.
Issue.

1 Like

I have forked the source repo and added the ha-card element to the source code, it seems that card-mod has been added as wellā€¦ i think someone can make a PR with this modificationā€¦

    render() {
        if (!this._hass || !this.config) return html``;
        if (!this.stateObj) return this.renderWarning();

        return html`
            <ha-card>
                <hui-generic-entity-row
                    .hass="${this._hass}"
                    .config="${this.config}"
                    .secondaryText="${this.renderSecondaryInfo()}"
                    .catchInteraction=${false}
                >
                    <div class="${this.config.column ? 'entities-column' : 'entities-row'}">
                        ${this.entities.map((entity) =>
                            this.renderEntity(entity.stateObj, entity)
                        )}${this.renderMainEntity()}
                    </div>
                </hui-generic-entity-row>
            </ha-card>
        `;
    }


You can try this source to see if the card mod will apply directly to the elementā€¦

test, it apply direct to the elementā€¦


the same way can use for custom foldā€¦

Donā€™t think that is is a generic solution to the new problem and a right way. This is still a row and not a card. And before there was no ha-card in this row either. The problem is mor in the generic row inside, I would think.

1 Like

Imho this is not a right thingā€¦
M-e-r is mainly a row which is supposed to be used inside Entities card.
That ā€œha-cardā€ element imho gives additional css properties to m-e-r, some of them may be not desired.
Although, when using m-e-r inside a decluttering-card, having own ā€œha-cardā€ makes styling a bit easier - we have to wrap m-e-r inside mod-card currently.

1 Like

Thanks that did the trick, but I do have white border lines, but using border-style: none wont remove themā€¦

this is var for border

--ha-card-border-width: 0;
1 Like

I have never used these custom cards before, I just thought it would work similar to adding a custom card to an entity card for example

type: entities
entities:
  - entity: sensor.outside_humidity
    type: custom:multiple-entity-row
    name: One entity
    secondary_info: last-changed
    entities:
      - sensor.outside_temperature
  - type: custom:mushroom-entity-card
    entity: person.anne_therese

Actually, it also adds a new custom element to the entities, where you can have a ha-cardā€¦ :man_shrugging: :man_shrugging:

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ā€¦

The mod card just wrap a custom element into the ha-card, without ha-cardā€¦ without ha-card there is no card-mod :grimacing: :grimacing:

yep

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.

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

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)

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)

itā€™s here :wink:

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

Nah, that is for babiesā€¦ )))

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:

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
CleanShot 2025-01-03 at 20.45.31

Seriously, I usually copy a whole ā€œHAā€ folder (except *.db & *.log) manually, then tar, then copy to Dropbox.

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

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

1st post ā†’ link at the bottom titled ā€œfantasticā€ ā†’ heading card

1 Like