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

OMG, I feel stupid now. I totally missed that arrow to show all the links :see_no_evil:. With that thread I can make something work for sure. Have to look at it tomorrow. Awesome job on all these threads explaining with examples :ok_hand:. Posted this reply at the bottom by mistake.

1 Like

In any case, the secondary _info is spaced correctly again in b3

Yeah, but climate entity is broken :joy:
Fixed here.

Hello everyone. First of all, thank you for the great Card-mod thread. My advice is based on the horizon card and if possible the change of colors of the arc of the sun and the moon. thank you very much in advance.
IMG_0153

1st post ā†’ link at the bottom ā†’ horizon-card

1 Like

Thank you very much for such an accurate and quick response. The colors have already been modified. Another question if it is possible. Could the sun/moon icons be modified? and the line will be replaced by another graph? Thank you first of all.

Suggest to ask in the cardā€™s repo.

1 Like

not only that, Backup is brokenā€¦

as for entities spying, check this broken longer line of state value:

and note the 11:27ā€¦

Is it a custom card or smth standard?
Asking because do not have it.
Anyway, the last fix was not only for climate entities, it should process any ā€œmultilineā€ states.
(still thinking that touching hui-generic-entity-row was a bad idea)

this is an entities card with a sensor datetime

type: entities
entities:
  - entity: sensor.last_boot
    format: datetime

on tight screens like an iPhone.
took the modding out for the entities card and the entity to make it clearer:

wrote up an issue here long wrapping state value taking too much space Ā· Issue #24009 Ā· home-assistant/frontend Ā· GitHub

yes the consequences are huge and not well thought through. Core cards (like above) and custom alikeā€¦

Pre2025.2 and With the latest fix:

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

or narrowed:

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

Who will think about custom cardsā€¦
Not the 1st time.

Again, as every release of HA this keeps on breaking the card-mod things: Introduce "Custom styles / Templates" section in core cards for much easier change of CSS/styling of cards (like bubble card) - #3 by stefan1982
Please vote for this, as this will also make YOUR life easier once you could simply alter the CSS of a card in the card styling section itself.

This way, things keeps breaking, but makes things a lot easier to directly go to the CSS-section that needs attention to fix it.

this will never happen in core I am afraid. theyā€™re simpling frontend down, and adding css will be the contrary.

what is the link for the frontend discussion?
you should add it also to that FR, because now no-one will see it

The last card-mod thing which was broken by HA was ā€œrenderEntityā€.
Other changes in HA frontend are not about ā€œbreaking card-modā€ - they are merely about ā€œchanging frontendā€ which is NORMAL. Users should not expect that their card-mod customizations will work forever.
Of course some changes in frontend are not ā€œlife criticalā€ but break customizations, custom cards etc (as I already said above, that initial fix for generic-entity-row was absolutely not necessary; it makes the row nicer since the row has larger active areas - but may break some customizations & custom cardsā€¦).

1 Like

yeah, and btw, there would be no difference, because when ā€˜theyā€™ change the frontend, you would still have to adjust your css in the card, just as you need to do now.

I was hoping to get some help with a selector. It seems that selecting something in shadow root doesnā€™t really work for me. Hereā€™s where I started to see if this would even work.

views:
  - title: Wall Panel
    path: kiosk
    type: custom:ha-dashboard
    card_mod:
      style: |
        ha-card {
          border-style: unset;
          border-radius: 0;
          background: rgba(255,255,255, 0.5) !important;
          margin: 0 !important;
          flex-basis: 35% !important;
        }
        hui-masonry-view {
          background: white !important; 
        }

The above modification to the background of hui-masonry-view works perfectly fine.

So, knowing that I can successfully select hui-masonry-view and modify that I assumed that I would be able to select child elements of hui-masonry-view as well. Hereā€™s what Iā€™m trying to select:

image

I want to be able to select the <div class="column" and hereā€™s all the things I tried to do that

Attempt #1
hui-masonry-view$#columns>div {
  background: white !important;
}

Attempt #2
hui-masonry-view$: |
  #columns>div {
    background: white !important;
  }

Attempt #3
hui-masonry-view$: |
  #columns: |
    div {
      background: white !important;
    }

Attempt #4
hui-masonry-view
  $: |
    #columns: |
      div {
        background: white !important;
      }

Attempt #5
"hui-masonry-view $ #columns": |
  div {
    background: white !important;
  }

Nothing seems to work at all. If anyone has any suggestions Iā€™d really appreciate it.

Thank you!

Not using this card, but:

  1. This is a wrong code, should be like ā€œhui-masonry-view {ā€ w/o a colon.
  2. ā€œ# this worksā€ is a wrong way in card-mod since you are trying to use ā€œ#ā€ inside a string. Use ā€œ/* this works */ā€ instead.

What is this? :smiley:

Thanks, I edited to fix the mistake. However, that part of the code was working perfectly fine that wasnā€™t really my question. My question was more so how to select child elements underneath of hui-masonry-view. Since I can modify hui-masonry-view my assumption was that selectors of stuff underneath of it would also work but it seems it does not.