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

Ildar_Gabdullin · August 8, 2023, 7:08pm

First, (and may be I am wrong) check if the Grid card has a ha-card element (in Code Inspector).
If not - use mod-card.

PickOne · August 8, 2023, 7:27pm

This is what it is in Code Inspector

This mod-card it is a specific lovelace card? I should install it from hacs or something?

Edit: I see there is a ha-card element but not of the grid card.
About the mod-card, now I found out what is this my bad… But how can I achieve what I want?

This is what I tried… no luck

card_mod:
  style:
    hui-grid-card$:
      '#root': 
        hui-button-card$: |
          ha-card{
            background: red !important;}
          }

MelleD · August 9, 2023, 8:50pm

I’m trying to change the color of a ha-svg-icon to solve the problem. However, no matter what I specify, nothing is changed.

Issue

Selector

    card_mod:
      style: |
        ha-svg-icon {
          color: red;
        }

maddin84 · August 10, 2023, 12:27pm

Hey guys, how can I change the color in this glance card ONLY for the state and not for the Entity-Name above.

arganto · August 10, 2023, 2:29pm

As often: First Post → Link to examples from ildar at the bottom → Glance card

onepointbrewing · August 11, 2023, 12:58am

Does this still work? I cant seem to get mine to change size

S1NK · August 11, 2023, 7:32am

Wondering if anyone had some advice for my post here. Really scratching my head on this one.

All of the styling on this 2nd screenshot is exactly the same as my original post (I have added one entity marked by the light bulb mdi). I’m finding when I restart home assistant, the card uses the red color I have defined when cycling sensors and entities on the card.

It only does this on restart. As soon as Home Assistant has fully restarted, it reverts to the default yellow.

Does anyone have any good resources to learn CSS styles/CardMod in general?

arganto · August 11, 2023, 9:12am

First Post → Link from Ildar. And card_mod-github site with examples and explanations as well.

parautenbach · August 11, 2023, 10:54am

What happens if you open the browser dev tools and disable the cache?

You might be suffering of this:

NOTE 2: Following on the note above; due to the high level of load order optimization used in Home Assistant, it is not guaranteed that the #shadow-root or the mwc-buttonactually exists at the point in time when card-mod is looking for it. If you use the second method above, card-mod will be able to retry looking for #shadow-root at a later point, which may lead to more stable operation.

In short; if things seem to be working intermittently - try splitting up the chain.

Ildar_Gabdullin · August 11, 2023, 7:36pm

You would make a life easier for people if you attach a screenshot with a DEFAULT theme, otherwise it looks really weird.

critical_limit · August 13, 2023, 4:30pm

Have a website card like this:

type: iframe
url: /local/Schultermine.html
title: 'Termine'
aspect_ratio: 100%
card_mod:
  style: |
    ha-card { 
      background: transparent !important; 
    }       
    .card-header {
      justify-content: center !important;
    }

But I can´t get the iframe background transparent or the title of this HA website Card to be centered.
Background is displayed white and Title is shown left

Can anybody help?

Kippy74 · August 13, 2023, 5:08pm

What about links?

<a href="whatever">whatever</a>

Like, I don’t want the link to be underlined and blue…

dCypher · August 14, 2023, 9:46pm

Hey there!
I tried many approaches to reach the code below as clean as possible, but this was the best that I could. Do you guys can tell me how do do it better ?

state_color: false
type: glance
entities:
  - entity: sensor.sm_g780g_battery_level
    name: S20
    card_mod:
      style: |
        state-badge {
          {% if states(config.entity)|float >= 70 %}
            color: #4caf50;
          {% elif states(config.entity)|float >= 15 %}
            color: #ff9800;
          {% else %}
            color: #f44336;
          {% endif %}
        }
  - entity: sensor.s22_battery_level
    name: S22
    card_mod:
      style: |
        state-badge {
          {% if states(config.entity)|float >= 70 %}
            color: #4caf50;
          {% elif states(config.entity)|float >= 15 %}
            color: #ff9800;
          {% else %}
            color: #f44336;
          {% endif %}
        }

The goal is just to change battery bounds to 15% instead of 25% that is the HA default.

I was thinking about anchors but I still don’t understand how it works

Ildar_Gabdullin · August 15, 2023, 12:44am

…
entities:
  - entity: sensor.sm_g780g_battery_level
    …
    card_mod: &ref
      style: …
  - entity: sensor.s22_battery_level
    …
    card_mod: *ref

tungmeister · August 15, 2023, 3:33pm

I can’t work out why I can’t get rid of the header in this card. could someone give me any pointers?

arganto · August 15, 2023, 3:36pm

In general: Post the dom-tree and not (only) the css-picker as screenshot. And secondly the code as code and not as screenshot.

But to shorten the follow up. Even if I don’t use this card, the header will be as always inside a shadow root. I assume you will see it in the dom. ave a look in the many same q&a in this thread.

card_mod:
  style:
    $: |
      .card-header { display: none !important }

GertVanderstukken · August 15, 2023, 10:48pm

Hello all,

I am searching for a way to change the color of the value (under the gauge) in a Gauge Card.
I know the basics of Card_mod, but I cannot seem to find the correct CSS value to adapt.

What I use now is working, except for the color:

          card_mod:
            style: |
              ha-card {
                height:125px;
                width:195px;
                background: transparent;
                color: red;
              }

tungmeister · August 16, 2023, 7:47am

Thanks but that didn’t work either. Here’s the dom-tree and here’s the code I’ve got at the moment which is working for all other elements, just need to get rid of the header:

type: custom:more-info-card
entity: media_player.spotify_daniel_james_tye
style:
  more-info-media_player$: |
    div.controls {
      margin-top: 6px;
      padding-top: 10px;
    }
    div.background {
      display: none;
    }
    div.basic-controls {
      display: none;
    }
    div.volume {
      display: none;
    }
    div.source-input {
      display: none;
    }
  .: |
    state-card-content {
      display: none;
    }
    ha-card {
      background-color: transparent;
      box-shadow: none;
    }

arganto · August 16, 2023, 7:51am

I don’t see anything from my code-snipped in your code. BTW you are quoting other part (svg-misc from Melle) from than you replied to in my case (hiding title). So I don’t know, to what are you referring exactly.

johnbull · August 16, 2023, 2:12pm

Hi,
Trying to get entity text color to change dependent on a temperature sensor…

After googling and testing, I fond some example that can make it happen

This for example changes the temperature for the entity depending on a helper I have (input_number.testljusvare)

type: entities
entities:
  - sensor.kyl_inne_temperature
card_mod:
  style: |
    ha-card {
        color:
    {% set temp = states('input_number.testljusvade') | float %}
    {% if temp <= 45 %} #88fcf9
    {% elif temp <= 47 %} #00c711
    {% elif temp <= 49 %} #fff133
    {% elif temp <= 51 %} #ffad33
    {% elif temp <= 53 %} #ff3333
    {% endif %};
              display: 
    {% if states('input_number.testljusvade') | float > 5 %}
      none;
    {% endif %}
        box-shadow: none;
        background:
    }

Returns for input_number.testljusvarde=51

Returns for input_number.testljusvarde=49

I only understand the code partially. I can’t figre out what “float…” and box-shadow and background does…but that might not matter as long as it works…

However, I want the entities for my fridges and freezers to indicate if they are at correct temperture by color

I’m using zigbee sensors and custom:multiple-entity-row to be able to display last updated value for the entity last_seen and then the temperature for the temperature sensor.

That code looks like this and works

type: entities
entities:
  - entity: sensor.kyl_inne_last_seen
    type: custom:multiple-entity-row
    name: Kyl inne
    icon: mdi:fridge-variant
    show_state: false
    secondary_info: last-updated
    entities:
      - entity: sensor.kyl_inne_temperature
        name: false

returns

Them I want all text to be:
*** green below <=4 °C***
*** yellow for 4-6 °C***
*** red >6***

Tried this (used my virtual sensor/input_number helper to test) and colors from the example above - but this doesn’t work:

type: entities
entities:
  - entity: sensor.kyl_inne_last_seen
    type: custom:multiple-entity-row
    card_mod:
      style: |
        ha-card {
          color:
          {% set temp = states('input_number.testljusvade') | float %}
          {% if temp <= 45 %} #88fcf9
          {% elif temp <= 47 %} #00c711
          {% elif temp <= 49 %} #fff133
          {% elif temp <= 51 %} #ffad33
          {% elif temp <= 53 %} #ff3333
          {% endif %};
            display: 
          {% if states('input_number.testljusvade') | float > 5 %}
            none;
          {% endif %}
            box-shadow: none;
            background:
          }
    name: Kyl inne
    icon: mdi:fridge-variant
    show_state: false
    secondary_info: last-updated
    entities:
      - entity: sensor.kyl_inne_temperature
        name: false

no repsonse when I change my virtual sensor/input_number_testljusvarde…