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

Ach85 · August 24, 2024, 2:02pm

need help to narrow buttons of cover-entity in entities-card:

I have search this thread (and others) and could already manage to reduce the height of my entity card. Thanks for this.
I still want to optimize the card and “narrow” the buttons of the cover entity:

Using the browser developer console with F12 I have already found out that if I set the CSS “margin-left: -20px;” in the appropriate place, the buttons are displayed the way I want them. Here I have to set the CSS:

Unfortunately, I can not get my code to work. I am not sure how to build the “path” to this element. This i what I have so far:

    card:
      type: horizontal-stack
      title: Rollladen
      cards:
        - type: entities
          card_mod:
            style:
              .: >
                #states > div {
                    margin: -15px -10px -15px -10px !important;
                }

                ha-card $ div#div hui-cover-entity-row $ hui-generic-entity-row
                $ ha-cover-controls $ div#ha-icon-button {
                  margin-left: -20px !important;
                }
          show_header_toggle: false
          entities:
            - entity: cover.hmip_roll_kuche_vorne
              name: Küche vorne
          state_color: true

(The "#states > div " is for decreasing the rows height).

Can someone help with this?
Thanks for any hint

Ildar_Gabdullin · August 24, 2024, 2:09pm

Ach85:

ha-card $ div#div hui-cover-entity-row $ hui-generic-entity-row
                $ ha-cover-controls $ div#ha-icon-button {
                  margin-left: -20px !important;
                }

This is a wrong syntax in general.
See Docs:

and dictionary is smth like

xxxx:
  xxx: xxx
  xxx: xxx

And what you got is

card_mod:
  style:
    .: long long string with shadowroots

Take literally ANY example from this thread with shadowroot - you will see smth like

card_mod:
  style:
    xxx $ xxx $: |
      some string
    xxx $ xxx $: |
      some string
    .: |
      some string

Using card-mod is not about a blind copy/paste.

Ach85 · August 24, 2024, 3:00pm

Hi Ildar_Gabdullin,
thanks for giving some hint.
Of course it is not about blind copy/paste.
Quite sure I saw this “syntax” somewhere. But that’s the/my problem. As long as one does not really understand things, one has to ask and try.
I find your sample abstract and can not get my concrete isue to work with it
I understand the dictionary thing with the shadow elements.
But I am not sure what you mean with “some string” and where to put the “divs” existing in my concrete DOM.
Could you please give a more concrete sample, maybe even with the objects from my DOM?
Thanks a lot for any push in the right direction

Ildar_Gabdullin · August 24, 2024, 3:14pm

I cannot reproduce your case - so this MIGHT BE a proper syntax:

type: entities
entities:
  - ...
  - entity: cover....
  - ...
card_mod:
  style:
    hui-cover-entity-row $ hui-generic-entity-row $ ......... $: |
      some_element {
        color: red;
      }
    .: |
      #states {
        ...
      }

and you need to find out a particular path.

OK, try using this:

type: entities
title: xxxxxxxxxx
entities:
  - entity: sun.sun
  - entity: cover.test_garage_door
  - entity: cover.test_garage_door
card_mod:
  style:
    '#states div':
      hui-cover-entity-row $ hui-generic-entity-row ha-cover-controls $:
        ha-icon-button $:
          mwc-icon-button $: |
            .mdc-icon-button {
              width: 32px !important;
            } 
    .: |
      #states {
        background: cyan;
      }

Just a concept demo with glitches like “no round borders” etc.

Mariusthvdb · August 24, 2024, 6:46pm

Any chance someone can help me out setting pointer-events to none on the alarm panel feature mode buttons?
I’ve tried adding it to my existing tile card mods but can’t make it happen.

Only need to use the tile card as monitor for the mode and don’t want interaction ( it may show the tooltip though…)

O and I would love it per button, since the disarm should be reachable…

Dmitry3650 · August 24, 2024, 10:20pm

Hello, please help me, I can’t get rid of the white gauge borders… I tried border: none; but for some reason this doesn’t help me… Maybe someone can tell me how to get rid of white borders?
Hum

  - type: custom:stack-in-card
    cards:
      - type: gauge
        entity: sensor.miata_zigbee_vlazhnost_soil_moisture
        name: Humidity
        min: 0
        max: 100
        needle: false
        segments:
          - from: 20
            color: '#db4437'
          - from: 40
            color: '#ffa600'
          - from: 60
            color: '#039be5'
          - from: 85
            color: '#ffa600'
          - from: 95
            color: '#db4437'
    card_mod:
      style:
        ha-gauge:
          $: |
            svg.text > .value-text {
              fill: green !important;
            }
            svg.gauge > .needle {
              fill: black !important;
            }
        .: |
          ha-card { 
          --primary-text-color: #ffffff;
            border: none;
            background: none !important;
          }
    style:
      top: 78%
      left: 75%
      width: 40%

reste_narquois · August 24, 2024, 10:35pm

Assuming this is not a copy/paste issue, your card_mod section doesn’t appear to be indented far enough.

At the moment it’s effectively at the level of the custom:stack-in-card (and therefore not being applied to anything as far as I can see) rather than the level of the gauge card.

loocd · August 25, 2024, 8:28am

is this what you are looking for?

card_mod:
  style:
    hui-card-features $ hui-card-feature $ hui-alarm-modes-card-feature $ ha-control-select $ : |
      #option-armed_home {
        color: red;
        pointer-events: none;
      }

each button has a unique id, which makes targeting it fairly easy.

however: I don’t have an alarm system available to test this with, so I can’t verify this works.

Michel · August 25, 2024, 10:37am

I am using a tilecard to show the output of the jokes integration. The tilecard will only show 1 line of text by default and cut off the rest like this.

But I could make it display completely with the cardmod addition below. It would wrap the text and the tilecard would extend the height so it would show the complete text.

type: tile
entity: sensor.random_joke
icon: mdi:cow
hide_state: false
state_content: joke
card_mod:
  style:
    ha-tile-info$: |
      .secondary {
        white-space: normal;
      }

However this stopped working with 2024.8. Now it still wraps the text like before, but the tilecard does not extend in height anymore resulting in the text becoming only partially visible.

I tried poking around in the developertools, but I can’t figure out what is causing the height to stay fixed and not autogrowing like it did.

Anyone have an idea on how to control the height of the tilecard?

Hope · August 25, 2024, 1:28pm

This was working for me for “custom:gauge-card”:

  card_mod:
    style: |
      ha-card {
        --ha-card-border-width: 0px;
      }

loocd · August 25, 2024, 1:42pm

div.icon has a height of 36px set:

That’s why you’re not seeing your secondary content grow in size. Set that to auto and you should be good to go.

If you encounter issues like this, all you have to do is open your dev tools, select your troublemaker (in this case the actual text of the joke) and start investigating. I filtered for height css styles and went up level by level until I found an element with a fixed-height. It’s pretty simple, actually

Tadies · August 25, 2024, 3:34pm

This code works fine!..kuddo’s
But i fail to get rid of the icon background…

card_mod:
  style:
    ha-tile-info$: |
      .secondary {
        white-space: normal;
      }
      .info {
        height: auto !important;
        margin-top: -6px!important;
      }
    ha-tile-icon$: |
      .shape {
       background: none !important;
        margin-top: -8px!important;
       }

What im missing?
Change it from none to a color like red works fine…
Ayone an idea?
Thanks…

Michel · August 25, 2024, 3:55pm

It’s pretty simple, actually

I theory yes, but in practice not always
CSS always stays quite mysterious to me.

Anyway, thanks to your help I managed to get the card-mod code updated. While changing from the developertools worked perfectly it did not want to take the value from card-mod initially. It seems it gets overridden somehow as it also showed a strikethough in the developertools on my height:auto. In the end I put “!important” in there and it now works.

type: tile
entity: sensor.random_joke
icon: mdi:cow
hide_state: false
state_content: joke
card_mod:
  style:
    ha-tile-info$: |
      .info {
        height: auto !important;
      }
      .secondary {
        white-space: normal;
      }

Note that the icon seems to be vertically aligned in the middle when the height grows beyond the standard height. The icon used to stay top-left. Will try to figure that out next.

loocd · August 25, 2024, 4:47pm

true

yes, that’s very common if you want to overwrite styles with card_mod - that can have multiple reasons. Either due to specificity of CSS, as you’re normally targeting just a simple html tag, sometimes a class, while HA likely often takes multiple chained classes for styling.
Another reason (probably the case in your situation) is the order of style application - probably card_mod gets injected earlier in the code than the other styles and it will just take the very last style being applied to an element.

The tile card is a flexbox, so you should be golden with:

.icon-container {
  align-self: start !important;
}

This puts just the icon at the top. If you have a use case where the icon is larger than the text, then you could also do align-items: start on the entire flexbox, but that seems unlikely.

Michel · August 25, 2024, 6:35pm

Cool, thanks for the help!
It is back to how it used to be.

Mariusthvdb · August 25, 2024, 7:26pm

Thx! Will try when I return next week. Suppose this also blocks the tooltip when hovering…?
It would be even better if we could only block the action

loocd · August 26, 2024, 6:21am

do you mean the ‘Home’, ‘Away’, etc. tooltip? Yes, that is blocked as well. But I’m sure there’s a way around that. Maybe there’s an alternative to the pointer-events: none; or otherwise this can probably be done with an ::after element as well. You’d then just create your own tooltip to mirror what you’ve had before.

Tadies · August 26, 2024, 7:09am

Nobody has an idea?

loocd · August 26, 2024, 7:57am

I think I remember having issues with background: none as well. Try setting it to transparent instead of none. Does that fix your issue?

Tadies · August 26, 2024, 8:13am

Unfort i did try that aswell…but no go…
Thank You loocd… for trying