šŸ”¹ Card-mod - Add css styles to any lovelace card

What do you mean by style from the outer level? How could I do that? Thank you

Your card_x is inside card_y.
You can style card_x from the level of card_y (ofc if card_y has ha-card).

My decluttering-card is wrapped inside stack-in-card and layout-cardā€¦

Stack-in-card > Layout-card > Decluttering-card

You can see the path on the bottom of the image I sent on my first post. There is a HA-Card

Then you need to style from the layout-card if it has ha-card. Never did it myself.
But seems that layout-card does not have it.
So, your options could be style from the stack-in-card level - or revise as per my 1st post to you.

I tried. But couldnā€™t figure how to do it. That is why I came here.
Iā€™m not good with this shadow root thing, and the syntax of the card-mod. I find it complicate to understand how to do it when you find what you wanna modify inside the Google Chrome inspector.
Do you think you can help me with that or guide me to find how to do itā€¦
On the Picture from the Google Inspector I found what I need to modify and the path to it. Itā€™s inside Stack-in-card (Ha-Card) but I donā€™t know how to translate that to card-mod.

  1. You will anyway need to learn. So use examples (like from 1st post ā†’ link at the bottom), try-fail-repeat-succeed.
  2. I would say that styling through many levels (stack-in-card ā†’ layout-card ā†’ ā€¦) is not worth it (complex, unstable, easy to break, ā€¦). Consider other ways. Why donā€™t try styling in the mushroom itself? Mushroom has ha-card, probably it will be much easier.

Also, does layout-card has own native possibilities to style?

I style everything inside mushroom-card levelā€¦ The thing is that the margin I need to remove comes from the decluttering-card. Thatā€™s the only thing I need to change from the decluttering-card, all the rest I do in the mushroom-card level.

No, it comes from the outer container which is layout-card.
Place 2 Entities card in a vertical stack - you will see a similar margin.
And it is supposed to be changed on the containerā€™s level.
So, you are right in part that it cannot be styled from a mushroom.

So:
ā€“ check native layout-card options to style a margin;
ā€“ if not - youā€™ll have to go from stack-in-card levelā€¦

image
I guess the margin comes from decluttering-card, doesnā€™t it?
It says the margin is inside decluttering-card in the Google Inspector.
Doesnā€™t this mean itā€™s from decluttering-card?

decluttering card does not add a margin.
Right on your screenshot - ā€œmasonry-view-card-marginā€ applied to ā€œ#root > *ā€. It comes from your container.

Can I change it? even though it comes from the container like you said.

answered
once again - check layout-card options

alright Iā€™ll do it. Thank you for your help my friend.

This MAY BE what you are looking for:


If so - would be great, no need to use a potentially unstable card-mod solution.

Thank you so much for taking your time and take a look at this!
It seems card_margin isnā€™t working when using layout_type: custom:grid-layout (which is my case).
There is an open issue on github for that

In the mean time negative value for margin will do the work for me,
Again, thank you Ilda.

1 Like

Good morning,
Iā€™m working on a stacked card that contains a tile card. The normal ā€œstyleā€ tag seems to have no effect on the card when Iā€™m using card-mod to introduce a gradient gauge icon.

Iā€™ve been searching but I canā€™t find anything specific about borders and the card mod attribute.

image

The YAML below is only an excerpt from a much larger, stack-in-card with conditional cards, showing different stack cards when my 3D printer is in different states. Iā€™m only providing the section of the code in question to highlight the specific problem

        card:
          type: tile
          entity: sensor.prusalink_progress
          icon: mdi:printer-3d-nozzle
          color: blue
          name: Prusa MK4
          card_mod:
            style:
              ha-tile-icon$: |
                .shape {
                  background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--tile-color) {{ (states(config.entity) |float ) }}% 0%, var(--card-background-color) 0% 100%);
                }
              ha-tile-info$: |
                .secondary {
                  visibility: hidden;
                }
                .secondary:before {
                  visibility: visible;
                  content: "{{ (states(config.entity) }}%";
                }
              ha-card$: |    
                  border: 0px;
                  border: none; 

Hello,
Hello, I have a template sensor with 3 possible states (off/standby/on) and I would like its icon to reflect the 3 states using 3 different colors. I came up with this syntax for card-mod which I apply to the entity of a Glance card:

  - entity: sensor.t4_corredor_termoacumulador_state
    name: TA WC
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {%- set sensor = states('sensor.t4_corredor_termoacumulador_state') %}
          {%- if sensor == 'on' %}var(--state-light-on-color)
          {%- elif sensor == 'standby' %}var(--state-humidifier-on-color)
          {%- else %}var(--state-light-off-color)
          {%- endif %}
          }

But it is not updating correctly: the state is now standby and yet the icon has the color of off (grey). I tried reloading the page to no aval:

But when enter edit mode and open the popup to edit the Glance card, the color is now shown correctly (blue):

But only there. When I close the popup and go back to the main screen, it is still grey.

And yet yesterday I had the opposite problem: it was (correctly) blue but when I turned it off it would still remain blue.

Can you please suggest reasons for these problems to happen?

Thanks in advance.

You dont need to enter the shadow-dom of ha-card. So no $ needed a that bit.

          type: tile
          entity: sensor.prusalink_progress
          icon: mdi:printer-3d-nozzle
          color: blue
          name: Prusa MK4
          card_mod:
            style:
              ha-tile-icon$: |
                .shape {
                  background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--tile-color) {{ (states(config.entity) |float ) }}% 0%, var(--card-background-color) 0% 100%);
                }
              ha-tile-info$: |
                .secondary {
                  visibility: hidden;
                }
                .secondary:before {
                  visibility: visible;
                  content: "{{ (states(config.entity) }}%";
                }
              .: |
                ha-card {   
                  border: 0px;
                  border: none;
                }

Use .: | to reset back to style: |

I always suggest to open the devtools and see where it is set.
And then you ā€œdirectlyā€ see, that you have to overwrite this.
Itā€™s faster than to wait that the prepared solution is flying in. :wink:

type: entities
entities:
  - entity: input_number.musikbox
    card_mod:
      style:
        ha-slider:
          $: |
            input[type="range"] {
              pointer-events: none;
            }

Have you tried it that way and it worked for you? Because I had tried it before posting and it didnā€™t work for me.
It does work if you uncheck the " pointer-events" in Devtools, but the code is not applying.

Yes. Tested and working. I cannot use the slider then anymore as set to none. Please try it one to one with my code or post yours where it is not working.