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

[majdzik84]

One more question. Can I use the above style in some way for entities in the entire card or should each entity be styled separately?

[KTibow (Kendell R)]

I think you’d need to traverse shadow-roots to make that work.

[BradAU (Brad Anderson)]

Hi @ASNNetworks could you please post the whole yaml for your sticky header card? I’ve added the style above to a horizontal-stack and it still moves when scrolling.

[ASNNetworks]

That’s because you’re probably using it directly in a horizontal-stack. Card mod does not work on horizontal-stack cards (and others) like the docs explain. You need to use mod-card (different than card mod, but part of it so don’t need to install separately.)

Please read the docs of card mod, at the end it explains that with code example: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md#mod-card

This way you will fully understand why and how it works

[BradAU (Brad Anderson)]

OK thanks, I’ll check that out.

edit:
I’ve tried using mod-card but it still moves when scrolling, this is what I have so far;

  type: custom:mod-card
  style: |
    ha-card {
      --ha-card-background: transparent;
      background: var(--background);
      border-radius: 0px !important;
    }            
    .card-content {
      padding: 0
    }
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      top: 0;
    }
  card:
    type: horizontal-stack
    cards:

[ASNNetworks]

Strange, this is mine:

          - type: custom:mod-card
            style: |
              ha-card {
                --ha-card-background: var(--ch-background);
                background: var(--ch-background);
                border-radius: 0px !important;
              }            
              .card-content {
                padding: 0
              }
              :host {
                z-index: 999;
                position: sticky;
                position: -webkit-sticky;
                top: 0;
              }
            card:
              type: horizontal-stack
              cards:
                - template: name
                  type: 'custom:button-card'     
                - template:name
                  type: 'custom:button-card'
                - template: name
                  type: 'custom:button-card'
                - template:name
                  type: 'custom:button-card'
                - template: name
                  type: 'custom:button-card'
                - template:name
                  type: 'custom:button-card' 

Perhaps clear cache or restart HA again? Make sure you have card mod updated just to be sure.

edit: @BradAU make sure you are not running this inside Layout-card. That doesn’t work, I had that issue myself so I split the card. Check out: Homekit Infused (HKI) Framework v3.4.1

[ASNNetworks]

Card-mod - Add css styles to any lovelace card

My CSS skills are lacking, so I Googled a bit. So it turns out this is the standard behaviour of sticky items: https://css-tricks.com/couple-takes-sticky-footer/ However, there are ways to go around this by using flexbox. See this: https://stackoverflow.com/questions/4575826/how-to-push-a-footer-to-the-bottom-of-page-when-content-is-short-or-missing I copied some code mentioned there and applied it, but that didn’t work. I think other things need to be set up first in order for the css code to…

@KTibow do you have any insight in this? For now I have a hacky workaround by using gap-card at the bottom of pages that are shorter, so the sticky item goes to the bottom of the screen. But I was hoping there is a way to use flexbox and force the sticky to be at the bottom of the user display, instead of the page.

[KTibow (Kendell R)]

Try using card-mod theming to add a margin at the bottom. I don’t think flexbox will work, because instead of like (approx):

<wrapper>
  <content/>
  <footer/>
</wrapper>

Home Assistant has a structure of (approx):

<wrapper>
  <columns>
    <column>
      <card/>
      <card/>
      <card/>
    </column>
    <column>
      <card/>
      <card/>
      <card/>
    </column>
  </columns>
</wrapper>

[ASNNetworks]

Thanks! Would I apply this to the card I want to sticky, or a different theme variable? Do you have an example for me, if you find the time/chance.

[KTibow (Kendell R)]

Maybe something like

  card-mod-view: |
    "hui-masonry-view$#columns" {
      margin-bottom: 10px;
    }

Instead of using a 10px gap card.

[DrKing]

I figured it out with a nudge from Thomas.

Here’s the result if anyone else needs the help. Embedding the badge-card in a mod-card exposes an ha-card element that can then be styled with card-mod. I think this is the correct explanation. Correct me if I’m wrong.

Thanks for your help Thomas.

          - type: custom:mod-card
            card:
              type: custom:badge-card
              badges:
                - entity: person.initials
                  name: persons_name
                - entity: sensor.cellphone_wifi_connection
                  name: Wi-Fi
            style: |
              ha-card {
                border: solid 1px #DEDEDE;
                border-radius: 20px;
                padding 100px;
              }

[KTibow (Kendell R)]

All mod-card does is wrap the ha-card. Sometimes if I want to style stuff inside of a card without an ha-card, I wrap it in a mod-card and traverse the hui- shadow root. That’s pretty much how it works. (Although you could directly style the badges if you’re okay having them at the top.)

[DavidFW1960 (David)]

Has the markdown card changed? Mine are no longer displaying in 0.117.x

          - type: markdown
            style: |
              h2 {
                display: block;
                letter-spacing: -0.012em;
                line-height: 32px;
                font-size: 24px;
                margin-block-start: 0.83em;
                margin-block-end: 0.83em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
                font-weight: normal;
            content: >
              ## Reload Components

Worked fine before…

[KTibow (Kendell R)]

What did you upgrade from? You might need shadow-root traversal.

[DavidFW1960 (David)]

was on 0.116.4…
How would I do the code for traversal?

[KTibow (Kendell R)]

Could you send a screenshot of the inspect element panel while inspecting the markdown?

[DavidFW1960 (David)]

Weird shit! It is now working as before. How odd…

[DavidFW1960 (David)]

ok not quite as before. It’s ignoring the font size etc…

The font size and weight are ignored. I also tried !important
The markdown text Reload Components should be the same size/weight as the theme switcher text…

[KTibow (Kendell R)]

Looks like either it’s not being applied, or it’s way down. Same issue on 0.116?

[DavidFW1960 (David)]

no 116 was perfect