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

[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.

[Ildar_Gabdullin]

@Timmiej93

I.e., when you click save, all your anchors get replaced by the code that anchor represents.

Anchors should be used in yaml mode only.
When used in UI editor then these anchors like "ref_my_anchor_for_sensor" MAY BE saved as "ref_0" - but also may be just replaced by code (depends, I haven’t investigated this issue).

@Timmiej93

Is there no option to assign a theme to a single section or something like that?

You may just define a card-mod style for ALL entities in the Entity card (see the 1st post → accumulative post → post for Entities card). Note that since Entity card may contain different types of rows (text0entity-row, sensor-entity-row, …) you have to specify a code for each type.

@Timmiej93

set the theme for HA as an entirety

I never tried but can’t we set a theme for a particular card?

[Timmiej93 (Tim)]

@Ildar_Gabdullin

Anchors should be used in yaml mode only.

Huh, I didn’t know there’s a real difference between editing the yaml file directly, and doing it through the “code editor”.

---

@Ildar_Gabdullin

You may just define a card-mod style for ALL entities in the Entity card (see the 1st post → accumulative post → post for Entities card). Note that since Entity card may contain different types of rows (text0entity-row, sensor-entity-row, …) you have to specify a code for each type.

I think you’re referring to the first code block in that post here, where style: is at the very front of the line (not indented). This indeed would have been great, but only for static styling, at least that’s what it looked like to me. I couldn’t get anything regarding to config.entity working when using that method.

---

@Ildar_Gabdullin

I never tried but can’t we set a theme for a particular card?

We can (apparently). I never used themes, so I never noticed this option. This is the winner for me, for now at least.

Basically just follow these steps: Card mod Themes · thomasloven/lovelace-card-mod Wiki · GitHub
Make sure to create the theme folder, create the theme yaml file, add the frontend bit in configuration.yaml, restart HA, reload themes, and of course set the theme to the entities list.

It’s not perfect, since you need to call the reload themes service every time you update a theme (which is VERY easy to forget, especially if you haven’t done it for a while), but it’s the best option I’ve seen so far.

[Ildar_Gabdullin]

@Timmiej93

I couldn’t get anything regarding to config.entity working when using that method.

Agreed, this cannot be used on the card level.

@Timmiej93

u need to call the reload themes service every time you update a theme

Each time you edit a template sensor you need to reload them template sensors.
Here is the same situation.

[ASNNetworks]

Not sure if this is possible, but seeing how some users seem to be magicians, I hope someone knows how to achieve this. Basically I want an iframe (webcard) to adjust to the screen size automatically. I use this card on different devices. The content in the iframe is already responsive, so I hope the iframe can be as well. This is the code I currently use. I used mod-card because (if I remember correctly when creating this) it didn’t work as standard card-mod style.

                      - type: custom:mod-card
                        card_mod:
                          style: |
                            ha-card {
                              border-radius: 20px !important;
                              --ha-card-border-radius: 20px !important;
                              height: 85vh;
                              
                            }            
                        card:            
                          type: iframe
                          url: 'https://LINK/'
                          aspect_ratio: 165%

The main challenge with iframe is that you need to use an aspect ratio, which forces it to a certain shape. So I hope I can alter this card using card-mod to make it responsive and always fill the entire screen.

_{But perhaps I need Config Template Card for this and use a template to determine the ratio depending on the viewport of the screen…?}

[Ildar_Gabdullin]

@ASNNetworks

he main challenge with iframe is that you need to use an aspect ratio

I cannot reproduce it.
Tried with the 1st site and it is scaled properly:

And there is no need for mod-card:

card_mod:
  style: |
    ha-card {
      --ha-card-border-radius: 20px !important;
    }            
type: iframe
url: https://meduza.io
aspect_ratio: 165%

[ASNNetworks]

The content inside the iframe is scaled fine, that’s not the issue. It’s the card element of the iframe. I need the card to take the size of the entire screen automatically. The content in the card already fit’s itself fine to the card size.

So If I open the webcard on a screen with less height, it’s should still be fullscreen and I don’t need to scroll the page. Also when the screen has more height, it needs to fill the entire screen and not leave empty spaces below it. I tried with height: 100vh but that didn’t work.

See my example: Imgur: The magic of the Internet

I hope I explained it well what I’m trying

What’s funny is that it does work as intended when I open the url as it’s own custom panel (in sidebar). It adapts to the screensize. Ofcourse I can forward to that as well, but then I have no UI there and no way to go back with a simple button (like I have now in my own dashboard).

[Ildar_Gabdullin]

@ASNNetworks

See my example:

Your example - what I noticed is:

• if you change a height of the screen then you see more/less “lines” on the page;
• there is a sticky footer (probably as a part of the page).

My example w/o height does the same (w/o sticky footer).
So, still I am not getting the problem((((.

@ASNNetworks

but then I have no UI there

What UI do you need? Not clear

[ASNNetworks]

@Ildar_Gabdullin

• if you change a height of the screen then you see more/less “lines” on the page;

I don’t want to see more/less lines on the page, that’s the challenge. I want the webcard to fill the entire screen, on different devices. I want the webcard to always fill the entire screen. Also as you can see, if I make the window smaller, I have to scroll within Lovelace, the webcard is larger than the screensize, it doesn’t adapt. This means that the webcard is not scaling with the screen, it’s fixed due to the aspect ratio. So I need the webcard to be responsive, like the content in the iframe.

Currently I have this inside my dashboard (i.e. UI). So I can open my LMS webpage as part of my dashboard. Basically I want the webcard to act like this: Imgur: The magic of the Internet As you can see, it always fit’s the entire screen.

But I think this is impossible due to how the webcard renders itself and needs an aspect ratio.