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

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.

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;
        }
  1. Styling from picture-elements is mixed with styling by card-mod.
  2. The path is /local/....
  3. Keyword card_mod.
1 Like

You’re boss. Thank you!

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

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

image
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?

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

image

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

  1. Open a view with this card.
  2. Set the toggle to OFF. The conditional element is not displayed.
  3. Refresh the page.
  4. Set the toggle to ON. The conditional element is displayed.
  5. The conditional element may not be of orange color - this is a glitch.
  6. Refresh the page.
  7. 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.

works perfectly, thanks!

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

image

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.

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

Thanks a lot !

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.

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.

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

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

?

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

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

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

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

Ok ok, thanks, i will try.
Best regards

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

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.