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

2021.11.2 - my picture is always with applied styles:

image

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    icon: mdi:delete-empty
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: red;
        }
  - entity: sensor.cleargrass_1_co2
    icon: mdi:recycle
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: yellow;
        }
  - entity: sensor.cleargrass_1_co2
    icon: mdi:leaf
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: green;
        }
title: Rubbish Bins
1 Like

Strange - I added the card_mod: line, but still getting no colours once I exit the editor.

I also just tried adding coloured icons to a different card, and it’s done exactly the same thing… yet nothing in the logs - any idea what debugging I can turn on (if any)?

Have also reinstalled card_mod

Update: it’s working fine on my 2nd HA instance… I really don’t get this… :expressionless:

Hi, i have css formatted several badges, it has been working until two days ago. 11.2 Core installed.

Desired look:
image

Since two days ago:
image

If i open Raw Config Editor and exit, styles are applied even without saving any changes (no one is done). I have to do that every time i open a new HA tab on web browser or open the app. Also tried with and without card_mod: label

my code is

    badges:
      - entity: person.luis_davalos
        card_mod:
          style: |
            :host {
              {% if is_state('person.luis', 'home') %}
              --label-badge-red: green;
              {% else %}
              --label-badge-red: red;
              {% endif %}
            }
      - entity: person.violeta
        card_mod:
          style: |
            :host {
              {% if is_state('person.violeta', 'home') %}
              --label-badge-red: green;
              {% else %}
              --label-badge-red: red;
              {% endif %}
            }
      - entity: sensor.temperatura_terraza
        name: Exterior
        card_mod:
          style: |
            @keyframes blinker { 50% { opacity: 0; } }
            :host {
              {% if states('sensor.temperatura_terraza') |float(0) > 40 %}
              --label-badge-background-color: red;
              --label-badge-text-color: white;
              animation: blinker 2s linear infinite;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.temperatura_terraza') |float(0) > 34 %}
              --label-badge-background-color: #FF9800;
              --label-badge-text-color: white;
              --label-badge-red: #FF9800;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.temperatura_terraza') |float(0) > 12 %}
              --label-badge-background-color: green;
              --label-badge-text-color: white;
              --label-badge-red: green;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% else %}
              --label-badge-background-color: #039BE5;
              --label-badge-text-color: white;
              --label-badge-red: #039BE5;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              animation: blinker 2s linear infinite;
              {% endif %}
            }
      - entity: sensor.media_temperatura_interior
        name: Interior
        card_mod:
          style: |
            @keyframes blinker { 50% { opacity: 0; } }
            :host {
              {% if states('sensor.media_temperatura_interior') |float(0) > 29 %}
              --label-badge-background-color: red;
              --label-badge-text-color: white;
              animation: blinker 2s linear infinite;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.media_temperatura_interior') |float(0) > 27 %}
              --label-badge-background-color: #FF9800;
              --label-badge-text-color: white;
              --label-badge-red: #FF9800;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.media_temperatura_interior') |float(0) > 18 %}
              --label-badge-background-color: green;
              --label-badge-text-color: white;
              --label-badge-red: green;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% else %}
              --label-badge-background-color: #039BE5;
              --label-badge-text-color: white;
              --label-badge-red: #039BE5;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              animation: blinker 2s linear infinite;
              {% endif %}
            }
1 Like

grrr, my 2nd HA wasn’t on 11.2 - 11.2 broke card_mod when I upgraded it

I’m about to update the recommended installation method for card-mod.
It’s always been highly timing-dependent, and as hass gets more and more optimized it gets harder and harder to keep up.

Luckily, there’s a thing you can do to help.

By adding the following to your configuration.yaml (obviously adjusting the URL to where you actually have card-mod installed) and restarting, you can give card-mod a head start.
It will even be there - waiting - when the core interface parts are still loading in.

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

You may get some errors in the browser console. They can be safely ignored, and I’m currently working on some tweaks to make this installation method work even more smoothly.
Nevertheless, this should remove most issues with things working when switching tab, but not when pressing F5 and that kind of thing.


If I had started today, I would have made card-mod a custom component or integration rather than a frontend plugin. It’d be an incredibly breaking change for everyone using HACS to switch now, though. So you’ll need some manual intervention unless @ludeeus can think up some magic.

1 Like

Nope, sorry.
AFAIK that setting is not even hot-reloadable, so move config and restart is probably the best option right now.

tbh, I havent met many issues during the HA changes, in fact, I can only see 1 mod not working anymore. I have meticulously read the posts above and many come close, but just not exactly:

  - type: custom:template-entity-row
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2182?u=mariusthvdb
    entity: binary_sensor.vijverpompen
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            {% if is_state(config.entity,'on') %}
            animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
            {% endif %}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          @keyframes colorize {
            0% {
              color: steelblue;
            }
            100% {
              color: aquamarine;
            }
          }

still makes my entity icon rotate, but the colorization is gone…

anyone with a hint, please come forward? thanks!

Thanks Thomas, that’s worked a charm! :smiley: I’m a happy chappy again!!

Thanks! I noticed a bunch of button cards I had styled with colors (representing a cheap battery powered usb lamp’s IR-controlled colors) were all using my default theme about half the time when reloading…it was starting to drive my OCD a little crazy :slight_smile: thinking it was something wrong on my end.
Looks much better now!
Screen Shot 2021-11-12 at 10.47.13 AM

at least this works:

type: entities
entities:
  - type: custom:template-entity-row
    entity: binary_sensor.test_value_from_input_boolean
    name: name
    secondary: some value
    state: state
    icon: mdi:fan
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            animation: rotation 0.5s linear infinite, resizing 1s linear infinite alternate, coloring 8s linear infinite alternate;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          @keyframes resizing {
            0% {
              --mdc-icon-size: 10px;
            }
            25% {
              --mdc-icon-size: 15px;
            }
            50% {
              --mdc-icon-size: 20px;
            }
            75% {
              --mdc-icon-size: 26px;
            }
            100% {
              --mdc-icon-size: 32px;
            }
          }
          @keyframes coloring {
            0% {
              color: red;
            }
            17% {
              color: orange;
            }
            34% {
              color: yellow;
            }
            51% {
              color: green;
            }
            68% {
              color: lightblue;
            }
            85% {
              color: blue;
            }
            100% {
              color: violet;
            }
          }

Untitled Project

thanks Ildar. Since that is quite identical to what I am using, what do you think could be the desicive difference?

is the difference.
Should be “1 forwards”.
Also the first frame must be a default icon color

Ill test, thanks. It was working fine though, so you’re saying this is because changes in HA lately?

nope, doesnt work. btw, this same coloring does still work on a glance card:

card_mod:
  style:
    '.box div:nth-child(3)':
      'div:nth-child(1)':
        ha-icon-button:
          $:
            mwc-icon-button:
              $: |
                .mdc-icon-button {
                  {% if is_state('switch.vijverpomp_links','on') %}
                  animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
                  {% endif %}
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }
                @keyframes colorize {
                  0% {
                    color: var(--text-color-off);
                  }
                  100% {
                    color: aquamarine;
                  }
                }

puzzling this is…

copying your config above shows it doesnt work…
Nov-12-2021 23-01-10

maybe my card-mod-theme interferes, Ill turn that off and see what happens.
Nope, that doesnt help either…

Cannot tell, I have never tested this case before.

Is there a means to modify the icon sizes and spacings in the thermostat card? I currently get this:
2021-11-12 12_17_02-
And I’d like to either hide the “Auto” icon (left) or get all icons on the same line as it is in the fullsize view.

Edit: So I found that this will reduce the size of the icons, but it will not change anything about their spacing:

                entity: climate.heating_sascha
                card_mod:
                  style:
                    ha-icon-button:
                      $: |
                        ha-svg-icon {
                          height: 75% !important;
                          width: 75% !important;

The order of arguments is important.
https://www.w3schools.com/cssref/css3_pr_animation.asp

Are you sure you are talking about Glance card?
Rotating for Glance card is done for state-badge.
Probably you meant Picture Glance card.

Faced a new issue with the HA Editor:

  1. Create a new card via UI, copy/paste this code into Editor:
type: glance
entities:
  - entity: sun.sun
  - entity: sun.sun
    icon: mdi:fan
    card_mod:
      style: |
        state-badge {
          color: orange;
        }
  1. The screen is:

  2. Save the code, the screen is:
    image

  3. Open the Editor again, the screen is:

The card_mod code is not displayed.
If you press the “Save” button, the code will probably be saved w/o card_mod.

Curious to know if you’re using the new config advised by Thomas Loven.

User DrewXT reported that it fixed the similar issue that he had posted earlier in the thread.

I don’t use the editor myself, and haven’t really seen many of the issues that some people are reporting, apart from the occasional need for a CTRL+F5 page refresh, but the new config is working well for me.

1 Like