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

[Ildar_Gabdullin]

Any examples & tutorials are not supposed to cover ALL possible needs - they just simplify learning.

[chezpaul2 (Paul B.)]

I want to change the size of my mdi icons seen here:

I use them in a grid:

         - type: grid
            view_layout:
              grid-area: sidebar
            columns: 3
            cards:
              - type: button
                icon: mdi:battery-charging-high
                tap_action: !include popup/battery.yaml
                hold_action:
                  action: none

              - type: button
                icon: mdi:arrow-up-bold-circle-outline
                tap_action: !include popup/sidebar_update.yaml
                hold_action:
                  action: call-service
                  service: homeassistant.update_entity
                  service_data:
                    entity_id: sensor.hacs

              - type: button
                icon: mdi:information-outline
                tap_action: !include popup/sidebar_information.yaml
                hold_action:
                  action: none

              - type: button
                icon: mdi:car
                tap_action: !include popup/sidebar_car.yaml
                hold_action:
                  action: none

              - type: button
                icon: custom:roborock-vacuum
                tap_action: !include popup/sidebar_vacuum.yaml
                hold_action:
                  action: none

              - type: button
                icon: mdi:radio
                tap_action: !include popup/radio.yaml
                hold_action:
                  action: !include popup/plex.yaml

I do use card-mod but I have no clue how to make it work on these icons. Couldn’t find any other thread explaining this.
Thanks

[Ildar_Gabdullin]

Check here:
1st post → link at the bottom to the post → find a link to a post for Entities card → find a style for changing an icon size → use ha-card instead of :host

[chezpaul2 (Paul B.)]

I do see how to change icon color in those posts but not icon size. Now I’m sure it’s not that far off but I tried using icon-size and size in px. or em or font size but that doesn’t work. That’s why I’m asking I guess.

            cards:
              - type: button
                icon: mdi:battery-charging-high
                card_mod:
                  style: |
                    ha-card {
                      size: 12px;
                    }
                tap_action: !include popup/battery.yaml
                hold_action:
                  action: none

[Ildar_Gabdullin]

@chezpaul2

I do see how to change icon color in those posts but not icon size.

I gave you an exact route to the code you need - you could find it:

There is a code for 1 entity below this code, you may use it for 1 button (:host → ha-card). Or you may use the code from the screenshot , just for one entity.

[chezpaul2 (Paul B.)]

This didn’t do anything:

            cards:
              - type: button
                icon: mdi:battery-charging-high
                card_mod:
                  style: |
                    ha-card {
                      --mdc-icon-size: 12px;
                    }
                tap_action: !include popup/battery.yaml
                hold_action:
                  action: none

[the_reza]

Is it possible to change the width and height percentages associated with an svg? The thermostat dial is too big and I’m trying to reduce its size. The documentation says that the lowest entry it can access is ha-card, so not sure if entries under it can be modified… This didn’t work:

 type: custom:thermostat-dark-card
 card_mod:
   style: |
     svg {
       width="75%"
     }

Thanks!

[Ildar_Gabdullin]

Then go down to the icon element (ha-icon or how it is called, check with Code Inspector) and apply this style to this element.

Update:

type: button
entity: sun.sun
card_mod:
  style:
    ha-state-icon $: |
      ha-svg-icon {
        --mdc-icon-size: 32px;
      }

@chezpaul2
You should learn how to navigate to particular element & use Code inspector since provided examples do not cover all cases.

[Ildar_Gabdullin]

@the_reza

This didn’t work:

Wrong indentation. Or paste the code formatted properly.

@the_reza

Is it possible to change the width and height percentages associated with an svg?

You can check it by yourself - select the element in the Code Inspector and then try to add some styles directly in the Inspector.

[the_reza]

Sorry, wrong formatting options on this forum. Fixed:

 type: custom:thermostat-dark-card
 card_mod:
   style: |
     svg {
       width="75%"
     }

And by changing the width in that element manually using the inspector, I was able to get the desired effect. Was my approach correct? The image I pasted showed the values I changed it to (75%) and it rescaled correctly. Should it have worked?

[Ildar_Gabdullin]

@the_reza

The image I pasted showed the values I changed it to (75%) and it rescaled correctly. Should it have worked?

You changed the width via Code inspector by setting some property to some value for some element.
Result is OK.
Then try to set the same value for the same property for the same element by card-mod.
The result is supposed to be OK too - just define a proper DOM path to the element; probably, the “!important” keyword may be required.

@the_reza

width="75%"

Must be:

width: 75%;

[gasolli]

I took that to heart, and through trial and error actually got it to work.
Added the following to every entity:

card_mod:
  style:
    hui-generic-entity-row:
      $: |
        :host {
          height: 20px;
        }

Considering I have never touched any coding before, I am incredibly happy with figuring it out after spending ~30 hours on it. Thanks to the community I learned a few things along the way.
2 fist were swiftly raised in the air.

[e-raser]

“30 hours”

[gasolli]

lol, as I said, I have no experience with JS, Yaml, or CSS whatsoever. All of this is a learning experience.
And the time consumption doesnt really bother me much, I enjoy creating something of my own from “the bottom up”

[Ildar_Gabdullin]

@gasolli

I enjoy creating something of my own from “the bottom up”

This is a good point! HA is a kind of hobby for many people))).
Btw, I have never been a CSS expert too, never been a web-programmer or designer))).
Everything is achieved step by step.

@gasolli

    hui-generic-entity-row:
      $: |
        :host {
          height: 20px;
        }

The code is not 100% correct.
See this:

There are at least 2 ways of decreasing a row height:

• remove margins between rows - 2nd column;
• decrease a row’s height (40px → 25px) - 3rd column= for all rows, 4th column=for each row - up to you to decide which variant needs less of lines.

type: horizontal-stack
cards:
  - type: entities
    entities: &ref_0
      - entity: sun.sun
      - entity: sensor.cleargrass_1_co2
      - entity: input_boolean.test_boolean
      - entity: input_number.test_number
  - type: entities
    entities: *ref_0
    card_mod:
      style: |
        .card-content div {
          margin-top: 0px !important;
          margin-bottom: 0px  !important;
          color: red;
        }
  - type: entities
    entities: *ref_0
    card_mod: ### leave the code only for your rows (i.e. for sensors only if no other types are present)
      style:
        hui-simple-entity-row:
          $: |
            hui-generic-entity-row {
              color: red;
              height: 25px;
            }
        hui-sensor-entity-row:
          $: |
            hui-generic-entity-row {
              color: cyan;
              height: 25px;
            }
        hui-toggle-entity-row:
          $: |
            hui-generic-entity-row {
              color: magenta;
              height: 25px;
            }
        hui-input-number-entity-row:
          $: |
            hui-generic-entity-row {
              color: green;
              height: 25px;
            }
  - type: entities
    entities:
      - entity: sun.sun
        card_mod: &ref_1
          style: |
            hui-generic-entity-row {
              height: 25px;
            }
      - entity: sensor.cleargrass_1_co2
        card_mod: *ref_1
      - entity: input_boolean.test_boolean
        card_mod: *ref_1
      - entity: input_number.test_number
        card_mod: *ref_1

[djacid]

I am trying to achieve the same but I can’t. Could please help me?

[haze.1986 (Hay Kay)]

is there no way to change color of the thermostat card?

type: thermostat
entity: climate.mbr_ac
name: ' '
style: |
  ha-card {
    color:red;
    }

[Timmiej93 (Tim)]

So I’ve used card-mod to apply a dynamic color to the icons of every thermometer entity in my entity list. There’s 8 of them, so basically it’s 8 times this:

- entity: sensor.bla
  card_mod:
    style: |
      :host {
        -- 17 lines of code here
      }

Anyone who knows about programming will know what a nightmare it is to have the exact same bit of code just copy/pasted, so I’d really like to get rid of this unnecessary amount of code, it really makes it hard to change anything in this entity card.

So basically: is there any way at all to apply a style to each icon, where the color is based on the value of the matching entity? I noticed config.entity, but that only seems to work inside a :host section.

[Ildar_Gabdullin]

1. auto-entities with one card_mod.
2. Specify card_mod for the 1st row and then use yaml anchor like card_mod: *ref_card_mod_for_sensor.
3. Use card-mod-theme for entity-row to specify a style for every row containing a sensor with name/id/device_class/etc corresponding to some conditions.

[Timmiej93 (Tim)]

First of all: thanks for the suggestions, I appreciate it.

@Ildar_Gabdullin

1. auto-entities with one card_mod.

I didn’t explore this option, since I already had the list of entities ready, and auto-compiling a list could be limiting in future scenarios.

---

@Ildar_Gabdullin

2. Specify card_mod for the 1st row and then use yaml anchor like card_mod: *ref_card_mod_for_sensor.

This is what I ended up going with. It’s not quite as compact as I would’ve liked, but it’s a lot more compact than the original, and it works, so I’m quite satisfied. Again though, the documentation on these things isn’t great, so I’ll give a short summary here for those that run in to the same issue:

While typing this up, I saved the card config, closed and re-opened, and to my horror I saw that this does not at all work like I expected. I expected the anchors to behave like variables: defined once, can be looked up infinitely. Instead, anchors work like placeholders, and the code gets compiles. I.e., when you click save, all your anchors get replaced by the code that anchor represents.

---

@Ildar_Gabdullin

3. Use card-mod-theme for entity-row to specify a style for every row containing a sensor with name/id/device_class/etc corresponding to some conditions.

After finding out that #2 didn’t work for me, I dove deeper in to #3. It seems however that for this to work, you need to set the theme for HA as an entirety, which doesn’t make sense at all to me. Is there no option to assign a theme to a single section or something like that?

---

I’m very curious to see if I’m just not understanding things correctly, or if it’s seriously this hard to style multiple items with the same bit of code.