🔹 Card-mod - Super-charge your themes!

[arganto]

As said. It’s not the scrollbar of the custom sidebar, it is the right browser scrollbar.

[Mariusthvdb (Marius)]

right, I misread that dom path you posted, sorry.

fwiw, that theme variable should also apply to the window scrollbar:

src/resources/styles.ts

but even that is no longer applied, even directed via a theme (so not card-mod theme, but HA theme)

[arganto]

@Mariusthvdb

fwiw, that them variable should also apply to the window scrollbar:

Don’t think so. This is a class. And this is only applied in main style to the nevigation bar and not to body or whatever else. But might be, that I’m wrong.

[arganto]

@arganto

::-webkit-scrollbar {
  background: red;
}

OT: I’m doing it now via custom js added in config.

const style = document.createElement('style');
style.textContent = `
  ::-webkit-scrollbar {
    background: #212121 transparent;
    width: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background:rgb(255, 0, 0);
    border-radius: 5px;
    width: 10px;
  }
  ::-webkit-scrollbar-button {
    background:rgb(200, 255, 0);
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background:rgb(33, 131, 8);
    width: 10px;
  }`;
  document.head.appendChild(style);

[Mariusthvdb (Marius)]

beware that in 2025.6 the card-headers where changed, and if you mod those, you need to adjust them.

internal padding decreased, and I had to change my classes from

        :host(.class-header-margin) ha-card .card-header {
          background: var(--background-color-off);
          color: var(--text-color-off);
          font-weight: 400;
          font-size: 20px;
          padding: 0 12px;
          margin: 0 0 16px 0px;
        }

to

        :host(.class-header-margin) ha-card .card-header {
          background: var(--background-color-off);
          color: var(--text-color-off);
          font-weight: 400;
          font-size: 20px;
          padding: 4px 12px; /* added the 4px here for top and bottom padding */
          margin: 0 0 16px 0px;
        }

[Mariusthvdb (Marius)]

so ultimately I am trying to create a new class for the weather-forecast cards, which in 2025.6 have been redesigned to show even more whitespace…

It’s not making it easier to read for bad eyes like mine (the fonts etc are not changed), it’s only introducing more lost space.

Trying to mod the card is going well:

          style: |
            ha-card {
              height: 80% !important;
            }
            .forecast {
              padding: 0 !important;
            }

which makes it look like

however, there is another element to that card I cant get hold of:

Of course I need to delete/resize that bottom piece of the weather-forecast-card too, but setting the 80% height to is only makes the rest of the card shrink also, and keeps the gap…

this is Inspector

Maybe anyone of you can help me here, to target that main structure?
And re-writei it to a class…

btw the card behaves differently when in Masonry, see the unchanged card being more compact than the top card I posted

we can add:

        layout_options:
          grid_rows: 4

but that doesn’t really help, and still messes with the new and costly styling