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

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?

Earlier I gave an example of template-entity-row, it did not work on your side.
Cache problem? Card-mod-themes problem?

Hello @thomasloven, I officially surrender since I stopped to understand the logic of applying CSS styles (((.
Could you help me?
I am confused about using hui-element - and probably because of the same reason I started stumbling with other cards like restriction-card, fold-entity-row
Earlier I think I followed a clear logic of using card-mod - but after a few latest updates I see some failures in my HA setup and “learning examples”.

Let’s consider row_type: section.

But first here is a usual section row, we need a red divider line:
image
CSS tree:
image
Code:

type: entities
entities:
  - type: section
    label: section 1
    card_mod:
      style: |
        .divider {
          background-color: red !important;
        }

My logic is: we are inside shadowRoot of the hui-section-row, so we must get directly to the .divider element.

Now let’s consider a section implemented by hui-element:
image
CSS tree:
image
Code:

type: entities
entities:
  - type: custom:hui-element
    row_type: section
    label: section 3 (hui-element)
    card_mod:
      style:
        hui-section-row:
          $: |
            .divider {
              background-color: orange !important;
            }

My logic is: we are inside shadowRoot of the hui-element, so we must get to the .divider element via hui-section-row$.
But the style is not applied (as it shown on the picture above).

This is working:
image
Code:

type: entities
entities:
  - type: custom:hui-element
    row_type: section
    label: section 2 (hui-element)
    card_mod:
      style:
        $: |
          .divider {
            background-color: orange !important;
          }

And I cannot understand - why do we have to use this construction?

And the simplest case - let’s style the hui-element from the entities-card level:
CSS tree:
image
Code:

type: entities
entities:
  - type: custom:hui-element
    row_type: section
    label: section 4
card_mod:
  style:
    .card-content hui-element:
        $:
          hui-section-row:
            $: |
              .divider {
                background-color: orange !important;
              }

The style is not applied:
image
And now I am completely lost.

neither… I am lost really. In no browser can I get this to show a coloring and resizing icon. It only spins :wink:
also without any theme, just the HA default theme loaded.