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

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?

I think youā€™d need to traverse shadow-roots to make that work.

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.

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

1 Like

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:

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

1 Like

@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.

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>

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.

Maybe something like

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

Instead of using a 10px gap card.

1 Like

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;
              }

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.)

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

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

was on 0.116.4ā€¦
How would I do the code for traversal?

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

Weird shit! It is now working as before. How oddā€¦

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

1 Like

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

no 116 was perfect