đŸ”č Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
1

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

51
Not a custom: in sight.

Or this?

mov
mov800×385 929 KB

(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

34 Likes
2

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

3

Yes it does. To 95% or so


1 Like
4

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

5

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.

6

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

image

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)

7

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
2 Likes
8

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.

1 Like
9

Per your usual, Thomas. Great!

Can you template in the style?

1 Like
10

Of course. As detailed in the readme.

11

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;
  }
12

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.

13

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

14

From the wiki post linked from the documentation:

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

15

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
16

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

17

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’)

18 
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


5 Likes
19

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

All working fine now, great mod, thanks

20

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