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

mkanet · August 8, 2023, 2:28am

Please see my code inspector screenshot below after I added class_0 to my stack-in-card code. I am still struggling to figure out the path based on what I see in code inspector. If I’m wrong again, maybe you could give me some hints that could help me do the correct path based on my screenshot (to know what to look for).

  card-mod-card-yaml: |
    $: |
      class_0 type-custom-stack-in-card .card-header {
          padding-top: 0px !important;
      }

or maybe

  card-mod-card-yaml: |
    $: |
      class_0.card-header {
          padding-top: 0px !important;
      }

Ildar_Gabdullin · August 8, 2023, 3:19am

Starting this night I am far away from any civilian PC for at least a week, so can only suggest:
1st post → link at the bottom → other stuff → hints about navigating
There you will find info how to define a path.
You need to understand it.

And once again: my example with classes is exactly about headers; since you need to style “stack-in-card” only - you do not need invent new classes like “class_2” etc, address to “.type-custom-stack-in-card”.
Check examples of Thomas in ReadMe for styling classes; this is for understanding that this method only works for non-shadowRoot elements. But you need to access shadowRoot element “.card-header”. So use a trick with defining variables on a non-shadowRoot level - and then using this variable on the shadowRoot level.

Opontios · August 8, 2023, 10:05am

Hi аnd thanks again for the response. I was using the below configuration but it wasn’t giving me the desired result, I can’t explain why. Could it be a not cleared cache issue, although I’m pretty sure that I had cleared it multiple times and used both browsers, Chrome and Firefox. It’s really strange. Now it works. Благодарю.

              style: |
                .horizon-card-header {
                  margin-top: 0px !important;
                }
                .horizon-card-graph {
                  margin-top: 5px !important;
                  margin-bottom: -20px !important;
                }
                .horizon-card-footer {
                  margin-bottom: 0px !important;
                }
                .horizon-card-footer > * {
                  margin-top: 8px !important;
                }
                .horizon-card-field-name {
                  font-size: .8rem !important;
                }
                .horizon-card-field-value {
                  font-size: .9rem !important;
                }
                ha-card {
                  --ha-card-background: transparent;
                  box-shadow: none;
                }

arganto · August 8, 2023, 2:27pm

Compare what I have posted with that you have tried. Until you are not doing, what I suggest, it will ofc not work. In my code is another card-mod on top level and not on entity level. And I have explained the reason for that, too.

arganto · August 8, 2023, 2:45pm

Sure, that you have not disabled the shadow, he wants to remove, via theme, etc. already?

Here it is the shadow and not the border he wants to disable and I have already posted the working code above.

ipod86 · August 8, 2023, 5:45pm

I completely overlooked the answer.
Sorry.
That’s how it worked right away

Then I go now again the problem from my other topic .

Thank you both
@arganto @Ildar_Gabdullin

PickOne · August 8, 2023, 6:59pm

Hi all!

I want to make a red background to “odd” cards from a grid card type and I can’t get it to work, maybe someone knows how to do this.

This is what i have till now…

type: grid
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: input_boolean.dummy_button
  - type: button
    tap_action:
      action: toggle
    entity: input_boolean.dummy_button
  - type: button
    tap_action:
      action: toggle
    entity: input_boolean.dummy_button
  - type: button
    tap_action:
      action: toggle
    entity: input_boolean.dummy_button
columns: 1
card_mod:
  style:
    hui-grid-card$: |
      #root hui-button-card:nth-of-type(odd) {
        background: red !important;}
      }

Thank you in advance!

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