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

needed a few extra entities in my Glance card

type: picture-glance
title: Vijverpompen
image: /local/images/areas/vijver.png
state_filter:
  'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
  - sensor.vijver_thermometer_temperature
  - sensor.pond_buiten_sensor_temperature
  - binary_sensor.vijverpompen
  - binary_sensor.vijverpompen_alterneren
  - binary_sensor.vijver_donker_koud
  - switch.vijverpomp_links
  - switch.vijverpomp_rechts
  - input_boolean.vijverpompen_toggle_override
card_mod:
  style: |
    .box ha-state-icon {line-height: 0px;}
    .box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon
      {
        {% if is_state('switch.vijverpomp_links','on') %}
          animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
        {% endif %}
      }
    .box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon
      {
        {% if is_state('switch.vijverpomp_rechts','on') %}
          animation: rotation 3s linear infinite, colorize 3s 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;}
    }

and this shows perfectly fine on Desktop:

however, on mobile the icons are not resized/moved, so the right side icons overflow the card:

I couldn’t find anything in the core docs on a max number entities, so, figured maybe this has to do with the card_mod? taking that out doesnt make any difference, so probably a core card thing.

shortening the title helps:

But I would rather squeeze the icons a bit… question here would be: can we auto-fit those entities using card-mod maybe?

btw, how can we change an icon in the bottom bar? I tried the path to

ha-icon-button > ha-state-icon").shadowRoot.querySelector(“ha-svg-icon”)

with:

card_mod:
  style: |
    .box ha-state-icon {line-height: 0px;}
    .box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon
      {
        {% if is_state('switch.vijverpomp_links','on') %}
          animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
        {% endif %}
      }
    .box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon
      {
        {% if is_state('switch.vijverpomp_rechts','on') %}
          animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
        {% endif %}
      }
    .box div:nth-child(3) div:nth-of-type(3) ha-icon-button ha-state-icon ha-svg-icon 
      {
        {% if is_state('input_boolean.vijverpompen_toggle_override','on') %}
          mdi:toggle-switch
        {% else %}  mdi:toggle-switch-off;
        {% endif %}
      }

without luck.

Hi,

I am struggling to make this card work. I would like to make “Garage Door” and “Laundry Lock” (please see picture below) turn red or with some animation like ‘breathing’ or “glowing” if the “Garage Door” is not closed or the “Lock” is not locked.

I have tried dozen examples people posted here past 2 weeks. Unfortunately, none of them worked. Can someone please give me a pointer with post with example would actually work? There are thousands of post here. Finding the working one was almost impossible for me. It would be super helpful if someone can point me to an example with code that actually works.

Thanks

1st post → link at the bottom:

  • styles for Glance card;
  • animation for Entities card - create a similar animation for the Glance card by yourself.

Oh. Thanks. Didn’t see that link. Will give another try! Thanks again!

Wrong path and no property specified.
Try this:

    type: picture-glance
    title: vars
    image: /local/images/test/blue_low.jpg
    entities:
      - entity: binary_sensor.night
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(2) div:nth-child(2) {
          --card-mod-icon: mdi:microphone-outline;
        }
        .box div:nth-child(2) div:nth-child(3) {
          --card-mod-icon: mdi:microphone;
        }
        .box div:nth-child(3) div:nth-child(1) {
          --card-mod-icon: mdi:microphone-message;
        }
        .box div:nth-child(3) div:nth-child(2) {
          --card-mod-icon: mdi:microphone-message-off;
        }
        .box div:nth-child(3) div:nth-child(4) {
          --card-mod-icon: mdi:microphone-minus;
        }

image

1 Like

Hi arganto,
sorry for the delay in my reply and thank you so much again for your help.
I tried to apply your suggested code but it didn’t work.
I will look into the issue again trying to understand better how card-mod works.
Have a great day

Great job!
Make it as option to the default card, and make a push req to Git; So it can be available with the next release of the card.

How do I make the spaces (padding) in the title much smaller? The title takes too much real estate.

Thanks

So far this change has added a 1px border around every element in my dashboards, so now I have added border: none; to all my mods.
Hopefully another PR will fix this during beta for 2022.11

you can simply add ha-card-border-width: 0px to your theme, and it will be applied to all cards

1 Like

thanks Ildar.
I see the toggle switch for a moment,

even toggle it,

but then it returns to the native tick/X after that.

Using/trying:

    .box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon {
      {% if is_state('switch.vijverpomp_links','on') %}
        animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
      {% endif %}
    }
    .box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon {
      {% if is_state('switch.vijverpomp_rechts','on') %}
        animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
      {% endif %}
    }
    .box div:nth-child(3) div:nth-child(3) {
      --card-mod-icon:
        {% if is_state('input_boolean.vijverpompen_toggle_override','on') %}
          mdi:toggle-switch
        {% else %}  mdi:toggle-switch-off;
        {% endif %}
    }

Hi there,
Is it a way to centralize styles that are identical and used several times with a syntax like the one below, or something else:

(I tried, but it does not work) :

card_mod: 
  style: !include includes/styles/css-home-info-entities.yaml

“css-home-info-entities.yaml” content :

|
ha-card {
  margin-right: 5px;
  margin-bottom: 5px;
  border: solid 2px var(--secondary-color);
  border-radius: 25px;
} 

This would help me to maintain a specific style in a centralized file, and I will need to modify it only in one place when needed instead of changing a hundred style: tags on all my pages.

Maybe a dumb question… but I like to eliminate duplicate code; it is definitely easier to maintain :upside_down_face:

Thanks in advance for your hints.

I use secrets for globally used styles. For repeating styles within one yaml file - I use anchors.

1 Like

Thanks for your answer.
A search with the right keywords taught me how to use YAML anchors. I will then be able to simplify many pieces of reused code in my YAML code with your hint (more than style tags). :ok_hand: :wink:

I am trying to change the font size of a value but I am not changing the div and span correctly. Could someone point me in the right direction please?
image
image

    style:
      .: |
        ha-card {
          --ha-card-background: rgba(0, 0, 0, 0);
          --ha-card-box-shadow: none;
          --primary-text-color: white;
          --secondary-text-color: white;
        }
      "#header div":
        "#states div":
          "#state div":
            "#value div":
              $: |
                #state {
                  font-size: 3em;
                }

This tool has helped me navigate my way around the CSS selectors quite a few times.

3 Likes

That looks very helpful for the future indeed.

For the first usage, how do I read it correctly, because it cannot just be copy&pasted.

Result:

"body>home-assistant$hui-dialog-edit-card$ha-dialog>div.content>div.element-preview>hui-card-preview>config-template-card$#card>auto-entities>apexcharts-card$#state"`

What would that translate to in card-mod?

Sorry to bother you for a first example, but I did not find a convert example that I could copy & modify :frowning:

Difficult to say without seeing the content of the developer tools. As far as I’ve understood, you’re trying to style an apexcharts card header, so that’s where I’d start.

Where to start in the expression you posted basically depends on where you plan to put the CSS in your code: is it at the CTC level, the auto-entities level or the apexcharts level.

I posted the screenshots of devveloper tools yesterday in my post :slight_smile: