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

[arganto]

@Mariusthvdb

And ofc that is not an ideal situation, to put it mildly

Completely agree. I would hope, that the UI devs would take more care with their new elements, element changes, … And do not really understand, why they are not doing this.

@Mariusthvdb

and if you would make the effort to check the issue I the Github repo

Even there is is too overloaded, not reduced to the real problem and simple bare example. With providing dom before and after and css styles from inspector. Without this no one without beta (like me) can help and those with really have to try to understand what you want to say.

I feel the problem and you can write your issues however you want, but my gut feeling is, that you would get more feedback with simpler problem descriptions. Was only an advice.

[MrNorth45]

@parautenbach

If there’s not an <ha-card> element, card-mod won’t work. Did you check that?

The element hierarchy is like this:

< hui-card>
----> < alarmo-card>
-------------> #shadow-root
-----------------------> < ha-card class=“type-custom-alarmo-card”>

So card_mod should work, right?

[parautenbach (Pieter Rautenbach)]

Unfortunately, I don’t use the Alarmo card, so I cannot say for certain, but it should be possible.

You need to show what you’ve tried and perhaps there’s someone else that can help further.

[Mariusthvdb (Marius)]

@arganto

With providing dom before and after and css styles from inspector.

can no longer provide Dom before, but this is the current Dom, and probably a good example for one of the most important changes , on hui-generic-entity-row

[VietNgoc (Ngoc John)]

Card mod main entities should apply styles to all fold items… individual fold card mod does not working, probably new change in 2025.1

by docs GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

You can use this command to find out where the card mod is applied to which elements

[Mariusthvdb (Marius)]

@VietNgoc

ndividual fold card mod does not working, probably new change in 2025.1

exactly, that is the point of this whole series of posts…

@VietNgoc

Card mod main entities should apply styles to all fold items

that would be fine, except where one does not want it to be applied to all items identically. As said, I have several picture-entity card, and some iframe cards. they tend to behave differently inside the folds.

Ill retry your yaml above, but I fear the padding: 0 does nothing as the padding is already set to 0 in my folds by default, using its built-in option.

there is some light at the end of the tunnel:

card_mod:
  style:
    fold-entity-row $: |
      div#items {
        margin: 0 -16px -16px -16px;
      }

works for both picture and iframe when set from the entities card config, though it leaves some details to be worked out:

need to make that margin: 16px -16px -16px -16px; and the fold remains nicely spaced when collapsed
not ye found the right element to set the box-shadow: none to, and take away the shadow the image casts over the next fold

[VietNgoc (Ngoc John)]

@Mariusthvdb

Ill retry your yaml above, but I fear the padding: 0 does nothing as the padding is already set to 0 in my folds by default, using its built-in option.

Nope, for #items default is padding-left: 24px…
this is the default styles for items, without card_mod…

@Mariusthvdb

there is some light at the end of the tunnel:

not working for me…

but, this will work and apply only for #items child…

card_mod:
  style:
    fold-entity-row $: |
      div#items {
        margin-inline: -16px !important;
        padding: 0 !important;
      }

[Mariusthvdb (Marius)]

@VietNgoc

Nope, for #items default is padding-left: 24px…

my bad. I should have said I already set that in another mod, using:

style: |
  .label {
    margin-left: 0px !important;
  }

for all folds

why the other mod doesnt work for you is beyond me, Ive just set it to several others and it seems to behave as intended.

just as why your mod with margin-inline does exactly nothing in my setup…

unless you’re not running the beta?

[VietNgoc (Ngoc John)]

@Mariusthvdb

why the other mod doesnt work for you is beyond me, Ive just set it to several others and it seems to behave as intended.

just as why your mod with margin-inline does exactly nothing in my setup…

unless you’re not running the beta?

Yeah, I have a dev container with beta

[Ildar_Gabdullin]

@teadragon7

ha-card .card-header {

May be simplified to

.card-header {

since this element is definitely inside ha-card.

@teadragon7

  style: 
    hui-text-entity-row $: |
      ha-card .card-header  {
      display: unset;
      text-align: center;
      font-size: 20px;
      }
   .: |
            hui-generic-entity-row {
            height: 10px;
    }

Wrong, must be

  style: 
    hui-text-entity-row $: |
      hui-generic-entity-row {
        ...
      }
   .: |
     .card-header {
       ...
     }

A simplified (not precise) explanation:
– go to “hui-text-entity-row” (find it BEFORE any shadowRoot);
– go inside it’s shadowRoot, do smth;
– go out that shadowRoot;
– go to “.card-header” (find it BEFORE any shadowRoot).

Also, the “hui-text-entity-row” seems to be called now “hui-simple-entity-row” ))).
As usual - things are changed in Frontend & that is not reflected in examples.

[teadragon7]

Got it! Thank you!

[Mariusthvdb (Marius)]

using the following yaml

Multiple entity row

type: entities
card_mod:
  style: |
    .card-content {
      padding: 8px 8px 8px 0px;
    }
entities:

  - type: custom:multiple-entity-row
    entity: weather.buienradar
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            display: none;
          }
        .: |
          .entities-row {
           align-items: start !important;
           width: 100%;
           justify-content: space-evenly !important;
          }
    show_state: false
    entities:
      - entity: sensor.ws_5500_outdoor_temperature
        name: Temp
      - entity: sensor.buienradar_woensdrecht
        attribute: windspeedBft
        name: Kracht
        unit: Bft
      - entity: sensor.buienradar_woensdrecht
        attribute: winddirection
        name: Wind
      - entity: sensor.ws_5500_relative_pressure
        name: Lucht
      - entity: sensor.ws_5500_rain_rate
        name: Neerslag
      - entity: sensor.ws_5500_uv_index
        name: Uv
      - entity: sensor.ws_5500_humidity
        name: Vocht

No longer hides the info, probably because of yet to be found changes in core 2025.1 Frontend hui-generic-entity-row.

the Inspector DOM now is like this

and as you can see the relevant

    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            display: none;
          }

is no longer applied, showing the Buienradar name

please help me find the correct syntax/element to set the display: none to, ive looked at this too long now to see anything anymore…

other than the same technique used in the camera card above, setting the mod on the entities card:

type: entities
card_mod:
  style:
    multiple-entity-row $:
      hui-generic-entity-row $: |
        .info {
          display: none;
        }

I am lost how to set it to the multiple-entity-row card itself

next, the

  - type: custom:multiple-entity-row
    entity: weather.buienradar
    card_mod:
      style: |
        .entities-row {
           align-items: start !important;
           width: 100%;
           justify-content: space-evenly !important;
        }

is no longer being functional either…

Update

also setting it on the main entities card with:

    multiple-entity-row:
      $: |
        .entities-row {
           width: 100%;
           justify-content: space-evenly !important;
          }

totaling the full card_mod:

card_mod:
  style:
    .: |
      .card-content {
        padding: 8px 8px 8px 0px;
      }
    multiple-entity-row $:
      hui-generic-entity-row $: |
        .info {
          display: none;
        }
    multiple-entity-row:
      $: |
        .entities-row {
           width: 100%;
           justify-content: space-evenly !important;
          }

has the desired effect:

allowing me to slate do that in the Horizon stack

from

back to this again:

NOTE: the original yaml (hidden at the top of this post), is still functional when the row is in a fold-entity-row…

so going forward, we need to apply 2 sets of mods for the same effect

[arganto]

@Mariusthvdb

the Inspector DOM now is like this

You are still not posting the relevant part, e.g. here from 2024.12

There you see how and where the css is ingested inside the shadow root. How does this look like in 2025.1?

[Mariusthvdb (Marius)]

like this:
this is with the new mod on the entities card I posted above

[arganto]

Still not the relevant part. Compare above.

[sammyke007 (Sammy V)]

EDIT: solution at the end of this message!

@Ildar_Gabdullin, sorry for asking, but any idea why this is not working?

This is the code. I’m using sections btw.

show_name: true
show_icon: true
show_state: false
type: glance
entities:
  - entity: binary_sensor.voordeur_access_control_window_door_is_open
  - entity: binary_sensor.schuifdeur_access_control_window_door_is_open
  - entity: binary_sensor.dws_achterdeur_contact
  - entity: binary_sensor.dws_keukenraam_contact
  - entity: binary_sensor.dws_garageraam_contact
  - entity: binary_sensor.dws_garagepoort_contact
  - entity: binary_sensor.dws_slaapkamer_ouders_contact
  - entity: binary_sensor.dws_zijraam_fran_contact
  - entity: binary_sensor.mot1_occupancy
  - entity: binary_sensor.dws_tuinhuis_contact
state_color: true
card_mod:
  style: |
    ha-card {
      margin-bottom: -5px;
    }
    .entities .entity .name {
      white-space: unset !important;  # Allow wrapping onto multiple lines
      text-overflow: unset !important; # Disable ellipsis
    }

This is the debug console:

EDIT: SOLUTION

After bruteforcing I’ve found the solution!

show_name: true
show_icon: true
show_state: false
type: glance
entities:
  - entity: binary_sensor.voordeur_access_control_window_door_is_open
  - entity: binary_sensor.schuifdeur_access_control_window_door_is_open
  - entity: binary_sensor.dws_achterdeur_contact
  - entity: binary_sensor.dws_keukenraam_contact
    name: Keuken raam
  - entity: binary_sensor.dws_garageraam_contact
    name: Garage raam
  - entity: binary_sensor.dws_garagepoort_contact
    name: Garage poort
  - entity: binary_sensor.dws_slaapkamer_ouders_contact
  - entity: binary_sensor.dws_zijraam_fran_contact
  - entity: binary_sensor.mot1_occupancy
  - entity: binary_sensor.dws_tuinhuis_contact
state_color: true
card_mod:
  style:
    .: |
      ha-card {
        margin-bottom: -10px;
      }
      .entities {
        align-items: end !important;
      }
    .entities .entity:
      $: |
        state-badge {
          margin-top: 0px;
          margin-bottom: 0px;
        }
        .name {
          white-space: unset !important;  # Allow wrapping onto multiple lines
          text-overflow: unset !important; # Disable ellipsis
        }

[Mariusthvdb (Marius)]

all I have.
This to-and-fro 'ing is fruitless.

I’ll await todays release to see what you’ll experience for yourselves
thanks for the effort, appreciated

[Vorty]

Hello everyone,

I apologize if my question is a bit of a noob one, but after hours spent trying to shoot in the dark finding the right expression to target an icon within a card, I’d really welcome an expert opinion. Right now I’m back to try to find a basic working example to make things work, before getting back to my more complex styling, and I’m seeing I visibly don’t master the basics. Here is my current DOM for a basic mini-graph, the goal being to target the icon in the top right hand corner:

So if I can read correctly, my basic structure is something like:

hui-card
  mini-graph-card
    #shadow-root (open)
      ha-card.flex.type-custom-mini-graph-card
        #shadow-root (open)
          <slot> (with some empty divs)
          <div class="header flex">
            <div class="name">...</div>
            <div class="icon">
              <ha-icon>
                #shadow-root (open)
                  <ha-svg-icon>...</ha-svg-icon>
              </ha-icon>
            </div>
          </div>
          <div> ... other stuff ... </div>
          <div> ... other stuff ... </div>

Alright, so I think what I want to target is either the ha-icon or the ha-svg-icon inside to change its color. So far the only thing I manage to target correctly is the whole text in the mini-graph, using a div, with a code such as:

type: custom:mini-graph-card
entities:
  - sensor.floor3humidity
card_mod:
  style: |
    div {
      color: green !important;
      background-color: white;
    }

As soon as I try piercing the DOM with something as simple as:

card_mod:
  style:
    mini-graph-card$:
      ha-card:
        color: green !important
        background: white !important

There is no styling applied anymore. What am I missing here please?

Edit: I’ve forgotten to mention that I’m running Home Assistant 2024.12.3 (within a Docker container but I doubt it matters).

[Mariusthvdb (Marius)]

HI Elchininet,

Any chance you are running the beta 2025.1 ?

Ive been successfully applying the marker outline template mods since we discussed those here, but there has been a change in Frontend, Ability to show map icons for geolocation sources by karwosts · Pull Request #23247 · home-assistant/frontend · GitHub, which might be related.

since 2025.1 beta this is no longer applied and I would love to understand the hows and why’s. and of course to reapply.
Please have a look if you can?

[arganto]

@Mariusthvdb

all I have.
This to-and-fro 'ing is fruitless.

No, you collapsed the relevant part. Don’t understand, why you are not providing the relevant and requested and shown details if you are searching for help. Without it, it is fruitless.