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

Mariusthvdb · October 25, 2022, 12:40pm

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?

Mariusthvdb · October 25, 2022, 2:42pm

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.

rog889 · October 27, 2022, 1:12am

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

Ildar_Gabdullin · October 27, 2022, 1:16am

1st post → link at the bottom:

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

rog889 · October 27, 2022, 1:23am

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

Ildar_Gabdullin · October 27, 2022, 1:32am

Mariusthvdb:

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

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

usercr70 · October 27, 2022, 9:30am

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

Ctek · October 27, 2022, 8:31pm

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.

janiv · October 27, 2022, 10:29pm

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

Thanks

BradAU · October 28, 2022, 4:38am

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

Mariusthvdb · October 28, 2022, 9:54am

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

Mariusthvdb · October 28, 2022, 10:01am

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

vinzcenzo · October 28, 2022, 8:58pm

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

Thanks in advance for your hints.

Ildar_Gabdullin · October 28, 2022, 9:04pm

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

vinzcenzo · October 29, 2022, 4:32am

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).

AleXSR700 · October 30, 2022, 3:14pm

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?

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

CDRX2 · October 30, 2022, 8:21pm

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

AleXSR700 · October 30, 2022, 9:16pm

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

CDRX2 · October 31, 2022, 6:46am

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.

AleXSR700 · October 31, 2022, 6:51am

I posted the screenshots of devveloper tools yesterday in my post