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

Koli · November 3, 2021, 9:27pm

Hi. I’m trying to style color of icon basing on sensor state, but I can’t get it working. So at the beginning I’m trying to do some basing styling, but my icon does not appear anywhere on card.

type: picture-elements
title: Foo
image: local/bar.png
elements:
  - type: icon
    icon: hass:white-balance-sunny
    card-mod:
      style: |
        :host {
          top: 50%;
          left: 50%;
          color: red;
        }

Thank you for your time.

Ildar_Gabdullin · November 3, 2021, 10:23pm

There are errors in your code:

type: picture-elements
title: Foo
image: /local/images/blue.jpg
elements:
  - type: icon
    icon: hass:white-balance-sunny
    style:
      top: 50%
      left: 50%
    card_mod:
      style: |
        :host {
          color: red;
        }

Styling from picture-elements is mixed with styling by card-mod.
The path is /local/....
Keyword card_mod.

Koli · November 3, 2021, 10:31pm

Ildar_Gabdullin:

elements:
  - type: icon
    icon: hass:white-balance-sunny
    style:
      top: 50%
      left: 50%
    card_mod:
      style: |
        :host {
          color: red;
        }

You’re boss. Thank you!

Ildar_Gabdullin · November 3, 2021, 10:32pm

Probably because you copy-pasted style from another card (facepalm).
The picture-entity card does not seem to have the .card-content element.
Also, wrong value for the padding property was used.
Try using this:

card_mod:
  style: |
    ha-card {
      padding: 20px 20px 20px 20px;
      box-shadow: none;
    }

Koli · November 3, 2021, 10:59pm

Anyway, I can’t get it working in more complicated example - when I’m trying to use it in conditional element.

type: picture-elements
title: Foo
image: /local/bar.png
elements:
  - type: icon
    icon: hass:white-balance-sunny
    style:
      top: 10%
      left: 50%
    card_mod:
      style: |
        :host {
          color: {% if is_state('humidifier.zhimi_humidifier_ca1', 'on') %} green {% else %} red {% endif %};
        }
  - type: conditional
    conditions:
      - entity: humidifier.zhimi_humidifier_ca1
        state: 'on'
    elements:      
      - type: conditional
        conditions:
          - entity: switch.humidifier_bedroom_led_on
            state: 'on'
        elements:
          - type: icon
            icon: hass:white-balance-sunny
            style:
              top: 20%
              left: 50%
            card_mod:
              style: |
                :host {
                  color: {% if is_state('humidifier.zhimi_humidifier_ca1', 'on') %} green {% else %} red {% endif %};
                }

What’s wrong this time?

@EDIT
I see now on github:

NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen , but not e.g. conditional , entity_filter , vertical-stack , horizontal-stack , grid

So is it possible to make something like that?

Ildar_Gabdullin · November 4, 2021, 12:48am

Conditional elements - 2 options for styling:

type: vertical-stack
cards:
  - type: entities
    title: Conditional
    entities:
      - entity: input_boolean.test_boolean_2
        name: show
  - type: picture-elements
    card_mod:
      style:
        hui-conditional-element hui-state-label-element:
          $: |
            div {
              color: red;
            }
        .: |
          ha-card {
            height: 80px !important;
          }
    elements:
      - type: state-label
        entity: sensor.cleargrass_1_co2
        style:
          top: 6%
          left: 10%
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_2
            state: 'on'
        elements:
          - type: state-label
            entity: sensor.cleargrass_1_co2
            style:
              top: 6%
              left: 30%
    image: /local/images/white.jpg
  - type: picture-elements
    card_mod:
      style: |
        ha-card {
          height: 80px !important;
        }
    elements:
      - type: state-label
        entity: sensor.cleargrass_1_co2
        style:
          top: 6%
          left: 10%
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_2
            state: 'on'
        elements:
          - type: state-label
            entity: sensor.cleargrass_2_co2
            style:
              top: 6%
              left: 30%
        card_mod:
          style:
            hui-state-label-element:
              $: |
                div {
                  color: orange;
                }
    image: /local/images/white.jpg

Update (20.05.22):
I recommend to use the 1st method.
The 2nd method sometimes does not work:

Open a view with this card.
Set the toggle to OFF. The conditional element is not displayed.
Refresh the page.
Set the toggle to ON. The conditional element is displayed.
The conditional element may not be of orange color - this is a glitch.
Refresh the page.
The conditional element is of orange color.

So, the glitch occurs if the conditional element is not displayed first, then it is displayed w/o the style. The style is applied after refresh only.

Alternatively, on step 6 got to another view and then return to the view - the style is applied.

Also - same problem with a Conditional row inside Entities card. There is an issue on Github.

Update (30.10.23):
Here I will describe one more (3rd) method to style conditional element.
Also will demonstrate a currently present glitch (2023.10.2, card-mod 3.2.3) & a possible workaround.

A simple case - only 1 conditional element with different sub-elements:

  - type: picture-elements
    image: /local/images/test/white.jpg
    elements:
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        elements:
          - type: state-badge
            entity: sun.sun
            style:
              top: 10%
              left: 75%
          - type: state-label
            entity: sun.sun
            style:
              top: 20%
              left: 75%

Now let’s style it using the 2nd method described above:

code

  - type: picture-elements
    image: /local/images/test/white.jpg
    elements:
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        elements:
          - type: state-badge
            entity: sun.sun
            style:
              top: 10%
              left: 75%
          - type: state-label
            entity: sun.sun
            style:
              top: 20%
              left: 75%
        card_mod:
          style: |
            hui-state-label-element {
              {%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
              {%- if FLAG -%}
                color: red;
              {%- else -%}
                color: orange;
              {%- endif %}
            }
            hui-state-badge-element {
              {%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
              {%- if FLAG -%}
              --label-badge-text-color: red;
              --label-badge-red: cyan;
              --label-badge-background-color: lightblue;
              {%- else -%}
              --label-badge-text-color: pink;
              --label-badge-red: orange;
              --label-badge-background-color: yellow;
              {%- endif %}
            }

Note that here card-mod is used w/o entering a shadowRoot.
When we have to enter a shadowRoot - a picture is a bit different, it is described in the end of this post.

Then let’s add:
– some “non-conditional” SAME elements - state-badge, state-label;
– one more conditional element with SAME sub-elements - i.e. with state-badge, state-label
and do not specify styling for them.

code

  - type: picture-elements
    image: /local/images/test/white.jpg
    elements:
      - type: state-badge
        entity: sun.sun
        style:
          top: 10%
          left: 25%
      - type: state-label
        entity: sun.sun
        style:
          top: 20%
          left: 25%

      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        elements:
          - type: state-badge
            entity: sun.sun
            style:
              top: 40%
              left: 75%
          - type: state-label
            entity: sun.sun
            style:
              top: 50%
              left: 75%

      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        elements:
          - type: state-badge
            entity: sun.sun
            style:
              top: 10%
              left: 75%
          - type: state-label
            entity: sun.sun
            style:
              top: 20%
              left: 75%
        card_mod:
          style: |
            hui-state-label-element {
              {%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
              {%- if FLAG -%}
                color: red;
              {%- else -%}
                color: orange;
              {%- endif %}
            }
            hui-state-badge-element {
              {%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
              {%- if FLAG -%}
              --label-badge-text-color: red;
              --label-badge-red: cyan;
              --label-badge-background-color: lightblue;
              {%- else -%}
              --label-badge-text-color: pink;
              --label-badge-red: orange;
              --label-badge-background-color: yellow;
              {%- endif %}
            }

Note that these added elements got the same styling.
This is a GLITCH.
Since card-mod specified for some particular conditional element - the styling is supposed to be used for this element only. But in fact it is applied for other elements as well.

To understand a possible workaround, we need to consider the 3rd method - “using variable”.
Again with a simple case shown above:

code

  - type: picture-elements
    image: /local/images/test/white.jpg
    elements:
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        elements:
          - type: state-badge
            entity: sun.sun
            style:
              top: 10%
              left: 75%
          - type: state-label
            entity: sun.sun
            style:
              top: 20%
              left: 75%
              color: var(--my-label-color)
        card_mod:
          style: |
            :host {
              {%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
              {%- if FLAG -%}
                --my-label-color: red;
                
                --label-badge-text-color: red;
                --label-badge-red: cyan;
                --label-badge-background-color: lightblue;
              {%- else -%}
                --my-label-color: orange;
                
                --label-badge-text-color: pink;
                --label-badge-red: orange;
                --label-badge-background-color: yellow;
              {%- endif %}
            }

Here are variables are defined by card-mod.
Note that:
– a variable for state-label is then used with a native styling way for picture-elements;
– variables for state-badge are defined on this conditional element level - and then supposed to be used inside an internal state-badge.

Let’s add additional elements as we did earlier.

And here we observe the same GLITCH - but only for state-badge!
For state-label everything works as expected since we used a “native picture-elements styling way”.
Now we can see a bit cumbersome workaround:

code

  - type: picture-elements
    image: /local/images/test/white.jpg
    elements:
      - type: state-badge
        entity: sun.sun
        style:
          top: 10%
          left: 25%
      - type: state-label
        entity: sun.sun
        style:
          top: 20%
          left: 25%
          
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        elements:
          - type: state-badge
            entity: sun.sun
            style:
              top: 40%
              left: 75%
          - type: state-label
            entity: sun.sun
            style:
              top: 50%
              left: 75%
              
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        elements:
          - type: state-badge
            entity: sun.sun
            style:
              top: 10%
              left: 75%
              '--label-badge-text-color': var(--my-label-badge-text-color)
              '--label-badge-red': var(--my-label-badge-red)
              '--label-badge-background-color': var(--my-label-badge-background-color)
          - type: state-label
            entity: sun.sun
            style:
              top: 20%
              left: 75%
              color: var(--my-label-color)
        card_mod:
          style: |
            :host {
              {%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
              {%- if FLAG -%}
                --my-label-color: red;
                
                --my-label-badge-text-color: red;
                --my-label-badge-red: cyan;
                --my-label-badge-background-color: lightblue;
              {%- else -%}
                --my-label-color: orange;
                
                --my-label-badge-text-color: pink;
                --my-label-badge-red: orange;
                --my-label-badge-background-color: yellow;
              {%- endif %}
            }

Now let’s consider a card-mod with entering a shadowRoot:

code

  - type: picture-elements
    image: /local/images/test/white.jpg
    elements:
      - type: state-badge
        entity: sun.sun
        style:
          top: 10%
          left: 25%
      - type: state-label
        entity: sun.sun
        style:
          top: 20%
          left: 25%

      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        elements:
          - type: state-badge
            entity: sun.sun
            style:
              top: 40%
              left: 75%
          - type: state-label
            entity: sun.sun
            style:
              top: 50%
              left: 75%

      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        elements:
          - type: state-badge
            entity: sun.sun
            style:
              top: 10%
              left: 75%
          - type: state-label
            entity: sun.sun
            style:
              top: 20%
              left: 75%
        card_mod:
          style:
            hui-state-badge-element:
              $:
                ha-state-label-badge:
                  $: |
                    ha-label-badge {
                      {%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
                      {%- if FLAG -%}
                      color: orange;
                      --label-badge-text-color: red;
                      --label-badge-red: cyan;
                      --label-badge-background-color: lightblue;
                      {%- else -%}
                      color: magenta;
                      --label-badge-text-color: pink;
                      --label-badge-red: orange;
                      --label-badge-background-color: yellow;
                      {%- endif %}
                    }
            hui-state-label-element:
              $: |
                div {
                  {%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
                  {%- if FLAG -%}
                    color: red;
                  {%- else -%}
                    color: orange;
                  {%- endif %}
                }

Here we can see that styles are only applied to a particular conditional element (as it is supposed to be), i.e. there is no GLITCH. Earlier we had to use a variable-base workaround to solve it.
But this styling is unstable - it has same issues as described in the beginning of this post.
So, nothing is perfect.

Note that for THESE particular cases there is no a real need to enter a shadowRoot, everything may be styled w/o entering (as we did above). But in real cases to style some UI parts we really need to enter shadowRoot.

Stooovie · November 4, 2021, 7:46am

works perfectly, thanks!

arganto · November 4, 2021, 5:22pm

Is there any way to style such dialogs as well? E.g. the more-info-parts like

Or to ingest css which has priority over every other stuff?

e.g. the new show more links. I would like to have them in secondery color instead of primary. Currently it is style this way

.header > a, a:visited {
    color: var(--primary-color);
}

But I’m not able to find a point, where and how to change styles in such pop-ups.

slim971 · November 5, 2021, 5:41am

Hello, rotating and resizing stop working since last update.
Any idea ?

Thanks a lot !

arganto · November 5, 2021, 7:47am

There is a big mess/change in .11

Everywhere either ha-icon has been renamed in ha-state-icon or sometimes (buttons, …) there is still the ha-icon but an additional ha-state-icon. You have to adopt it accordingly in your style.

Ildar_Gabdullin · November 5, 2021, 11:44am

What are you talking about exactly, be more specific.
If you are talking about icons inside picture-elements - try to apply the style to the state-badge.
Do some experiments by yourself.

arganto · November 5, 2021, 12:58pm

Please see my answer above. ha-icon is not the anchor anymore.

Ildar_Gabdullin · November 5, 2021, 12:59pm

I already told - use state-badge then… HA changes, styling have to be changed too…

arganto · November 5, 2021, 1:02pm

?

I don’t have problems. I only said, that I have already answered, where you asked further things.

Ildar_Gabdullin · November 5, 2021, 2:14pm

Now I see it. Yes. Very sad. All icon styling became not working.

slim971 · November 5, 2021, 4:11pm

It was animated before with this code, but now not

type: entities
entities:
  - entity: switch.tuya_smart_plug
    name: Ventilateur SALON
    icon: mdi:fan
    state_color: true
    style:
      hui-generic-entity-row:
        $:
          state-badge:
            $:
              ha-icon:
                $: |
                  ha-svg-icon {
                    animation: 
                      {% if is_state('switch.tuya_smart_plug', 'on') %} rotation 1s linear infinite {% endif %};
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }

Now I see it. Yes. Very sad. All icon styling became not working.

Just rotating and resizing not working, all others still ok.

I will try to find a way, thanks a lot for your help

Ildar_Gabdullin · November 5, 2021, 4:14pm

As I wrote before - replace it with state-badge only.

slim971 · November 5, 2021, 4:34pm

Ok ok, thanks, i will try.
Best regards

afxefx · November 5, 2021, 5:34pm

This worked for me on 2021.11.1:

style:
  hui-generic-entity-row:
    $:
      state-badge:
        $:
          ha-state-icon:
            $:
              ha-icon:
                $: |
                  ha-svg-icon {
                  {% if is_state('switch.esp_a3f81c', 'on') %}
                    animation: rotation 1.0s linear infinite;
                   }
                  @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                  transform: rotate(360deg);
                    }
                  {% endif %}
                  }

Entities within auto-entities also needed a slight tweak:

style:
  hui-generic-entity-row:
    $:
      state-badge:
        $:
          ha-state-icon:
            $: |
              ha-svg-icon {
                 animation: wobbling 2s linear infinite alternate;
              }
              @keyframes wobbling {
              0% {
                transform: rotate(-10deg);
              }
              100% {
                transform: rotate(+10deg);
              }
              }

stennajay · November 5, 2021, 8:49pm

I´m using slider button card and I want to change the color of the big slider. If I change the primary-color in the theme I´m using the color change but I only want to change color in some of the slider button cards and not affect every other primary color.
When i try --primary-color: red; nothing happens. Is it not possible to change the primary-color in a card or am I missing something? If I for example instead use card-background-color that affect the spicific card I´m trying to change so card mod is working.