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

[thomasloven (Thomas Lovén)]

thomasloven/lovelace-card-mod

This is not a custom card. Instead it’s a plugin which changes the way all other cards work

How about this?

type: entities
style: |
  ha-card {
    color: red;
  }
entities:
  - light.bed_light
  - light.ceiling_lights
  - light.kitchen_lights

Not a custom: in sight.

Or this?

(Please click this gif to open it. It seems to be prone to artifacting when compressed)

Or how about changing what happens when you click the name or icon in an entities-card?

---

FANTASTIC POST BY ILDAR GABDULLIN ON HOW TO MODIFY EVERYTHING WITH CARD-MOD

---

[jcreynolds (James C. Reynolds II)]

@thomasloven nice stuff, does this plugin deprecate: https://github.com/thomasloven/lovelace-card-modder ?

[thomasloven (Thomas Lovén)]

Yes it does. To 95% or so…

[jcreynolds (James C. Reynolds II)]

I’ll begin converting my lovelace over to using the new module.

[daphatty]

What are your plans for card-modder going forward? I use card-modder against a lot of other cards, mostly custom: cards, and would hate to lose that functionality, especially considering that the changes I make via card-modder are typically one off mods and not global changes for all cards.

[DavidFW1960 (David)]

Trying to switch to the new card like this:

              - type: 'custom:text-divider-row'
                style: |
                  ha-card {
                    --secondary-text-color: var(--primary-text-color);
                  }
                text: Blah
              - type: 'custom:card-modder'
                style:
                  --secondary-text-color: 'var(--primary-text-color)'
                card:
                  type: 'custom:text-divider-row'
                  text: Household

But it does not modify the colour of the card correctly. I want both to use a white line and colour of text. The card is locked to secondary-text-color but I want it to change to primary-text-color. What am I missing? (Also tried the var(–primary-text-color) in ‘’ as well)

[thomasloven (Thomas Lovén)]

text-divider-row isn’t a card, it’s an entity row, so it’s meant to be used inside an entities card.
You can style that card to be invisible, and change the text color:

type: entities
style: |
  ha-card {
    background: none;
    box-shadow: none;
    --secondary-text-color: var(--primary-text-color);
  }
entities:
  - type: custom:text-divider-row
    text: Blah

[thomasloven (Thomas Lovén)]

The styles are applied on a card-by-card basis. It’s only the ability to style that is added to all card globaly.

There are some functions of card-modder which aren’t available in card-mod, e.g. styling things that doesn’t contain a ha-card element. Until I have a solution for all of those (that I can think of) card-modder will still be available. But it absolutely recommend using card-mod instead.

And it will work with any custom-card that contains a ha-card element.

[jaalperin (Jeff Alperin)]

Per your usual, Thomas. Great!

Can you template in the style?

[thomasloven (Thomas Lovén)]

Of course. As detailed in the readme.

[rolfberkenbosch (Rolfie)]

A quick question, i saw the following in your example

type: entity-button
entity: light.bed_light
style: |
ha-card {
background: [[ if(light.bed_light == “on”, “green”, “”) ]];
}

Can I also make an else if ? I try to get the following working, but it won’t. What did i miss ?

style: |

  @keyframes blink {
    50% {
      background: [[ if(states.binary_sensor.meteoalarm.attributes.severity == "Moderate", "yellow", "") else if (states.binary_sensor.meteoalarm.attributes.severity == "High", "red", "")]];
    }
  }
  ha-card {
    animation: blink 10s linear infinite;
  }

[DavidFW1960 (David)]

Thanks… that worked… but I really don’t understand why it worked before if it’s not a card? I get that it doesn’t have a ha-card element and that’s why it doesn’t work but you can add that ‘card’ text-divider-row anywhere… I only wrapped it in card-modder because I wanted to change the colour… So thanks for the fix but I don’t understand.

[thomasloven (Thomas Lovén)]

Card-mod works only with ha-card. Card-modder works with other things too. That’s all.

[thomasloven (Thomas Lovén)]

From the wiki post linked from the documentation:

<then> and <else> can be any template - including further if() -expressions"

[Holdestmade]

Kind of got this working. I have an entity card with 2 enitities. I want to colour the icon based on state. This works but the second entity only changes colour if the 1st one has changed colour.
Probably because I have no idea how to use the #states part. Also, if I remove the background part, the rest doesn’t work
Any ideas ?

type: entities
title: Front Door Lock
show_header_toggle: false
style: |
    ha-card {
      background: var(--background-card-color);
    }
    #states div:nth-of-type(1) {
      --paper-item-icon-color: [[ if(lock.assa_abloy_yale_conexis_l1_sd_l1000_ch_locked == "unlocked", "red", "green";
    }
    #states div:nth-of-type(2) {
      --paper-item-icon-color: [[ if(sensor.front_door_lock_battery <25, "red", "green";
    }
entities:
  - entity: lock.assa_abloy_yale_conexis_l1_sd_l1000_ch_locked
  - entity: sensor.front_door_lock_battery

[thomasloven (Thomas Lovén)]

You need to end the if(s with a ) and the [[s with ]].

[dvanderb]

Trying to figure out how to apply this to slider-entity row’s label so that it wraps instead of ellipsing on overflow. Ultimately I want to unset “text-overflow” and “white-space” on the “div.info” element… The jquery selector path is as follows… just can’t figure out what this is supposed to translate to for card-mod:

$(‘home-assistant’).shadowRoot.querySelector(‘home-assistant-main’).shadowRoot.querySelector(‘ha-panel-lovelace’).shadowRoot.querySelector(‘hui-root’).shadowRoot.querySelector(‘hui-view’).shadowRoot.querySelector(‘hui-entities-card’).shadowRoot.querySelector(‘slider-entity-row’).shadowRoot.querySelector(‘hui-generic-entity-row’).shadowRoot.querySelector(‘div .info’)

[thomasloven (Thomas Lovén)]

style:
  # The following two lines are separated to make sure card-mod first goes into _every_ div inside #states, and then looks for slider-entity-row inside each of them
  "#states div":
    slider-entity-row:
      $:
        hui-generic-entity-row:
          # Once we reach the final shadow-root in our path, there's no need to drill any deeper
          $: |
            .flex .info {
              text-overflow: unset;
              white-space: unset
            }  

Unfortunately, due to how lovelace loads custom elements this won’t be applied immediately, but will happen after the first state update.
I’m still looking for a way to fix that…

[Holdestmade]

Thanks for the reply, don’t know how the brackets were missing !

All working fine now, great mod, thanks

[dvanderb]

Thanks!. This worked as expected and was super helpful in connecting up your syntax with the console query.