Customize gap between new "sections" dashboard layout

Configuration Frontend
1

Looking at the page CSS you can see the gap between sections is controlled by the --grid-gap CSS variable. Changing that from the default of 32px allows for a smaller gap between sections so there is more room for content.

But what is the correct way to change that variable value, or simply overwrite the selector, with a theme? After reading Home Assistant frontend docs, my configuration yaml below should work but it’s not doing anything.

frontend:
  themes:
    skinny:
      grid-gap: 16px

Any ideas?

Here is the source of the new sections code setting the grid-gap for reference

7 Likes
2

I have the same question
How to edit --grid-gap

1 Like
3

I also have the same question. I tried to move over my existing 3 column layout over to sections but the content looks very squished and some of the cards become unreadable. The 32px gap is wasting a lot of room in blank space and would love to have the ability to take it to zero.

4

No. I tried 0px, its looks horrible. Need ~7px

5

I was wondering as well:

frontend:
    themes:
        my_theme:
            ha-view-sections-column-gap: 7px

I used Inspect Website Elements in Chrome on the gap to find appropriate variable name.

Then edit View Configuration and select your theme. (quick reload config before doing so, and if you’d like to make other changes - quick reload is the way to go, there is no need to fully restart HA).

3 Likes
6

Thanks a lot!
If some one needed standart dark theme with this param:
here link:
https://github.com/DieMetRik/hassio_dark_theme

1 Like