šŸ”¹ Card-mod - Add css styles to any lovelace card

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

Cannot understand why - but it really helped:


Now the card-mod code is visible in the Editor.

no sorry, youā€™re right, it is a picture-glance.

type: picture-glance
title: Vijverpompen
image: /local/images/vijver.png
state_filter:
  'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
  - switch.vijverpomp_links
  - switch.vijverpomp_rechts
  - input_boolean.vijverpompen_alterneren
  - sensor.pond_buiten_sensor_calibrated_temperature
  - binary_sensor.vijverpompen
  - sensor.vijverpompen
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;
                  }
                }
      'div:nth-child(2)':

etc

and the colorize works perfectly. cant get the other options to work, or, rephrase, can not get the template-entity-row to colorize

another (older) card to card_mod: Waze-card.GitHub - royto/waze-card: Lovelace card for showing Waze routes data my regular header card_mod doesnā€™t do anything:

      card_mod: &header
        style: |
          .card-header {
            background-color: var(--background-color-off);
            color: var(--text-color-off);
            padding-top: 0px;
            padding-bottom: 0px;
            margin: 0px 0px 16px 0px;
          }

when use on:

  - type: custom:waze-card
    title: Rijtijden
    card_mod: *header
    entities:

I did change .card-header to .header, because thats what inspector indicates the header to be, but still no mod effective. what should I try next?