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

Need some help if possible:

since the recent badges change i seem to not be able to use card-mod with badges.

This was my old code, how would i make the badge images bigger

Thanks

entity: person.ryan
name: null
card_mod:
  style: |
    :host {
      --ha-label-badge-size: 120px;
      --ha-label-badge-title-width: 120px;
    color: white;
    --label-badge-text-color: red;
    --label-badge-red: #1c1c1c;
    --label-badge-background-color: yellow;
    --ha-label-badge-label-color: white;
    }

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:

image

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

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.

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 :frowning:
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

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.

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ā€¦

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%

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.

1 Like

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.

1 Like

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.

image

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.

image

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?

This was working for me for ā€œcustom:gauge-cardā€:

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

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 :slight_smile:

1 Like

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ā€¦

Itā€™s pretty simple, actually :slight_smile:

I theory yes, but in practice not always :slight_smile:
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.

true :smiley:

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.

2 Likes

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

image

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

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.

1 Like

Nobody has an idea?

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