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

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

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

Is it necessary to create a complete new theme? Is there no way to apply the mod in a specific dashboard for the current theme?

8

Nice job, not sure if this is a new selector or what but it works for me! Marked as the solution.

9

What about the outside left and right edge gap?

4 Likes
11

Same question

12

You’ve found solution? New sections view is great, but that side gaps need to be editable…

13

I have not, couldn’t figure it out on my own.

15

You can make your own theme that only includes a single change.

Create a themes.yaml file in your config folder. I call it ImprovedDefault, but you can call it whatever you want:

ImprovedDefault:
  ha-view-sections-column-gap: 8px

Also, the original gap spacing was 8px and other spacings between elements are 8px, so instead of 7px, I’d suggest using 8px.

16

Only If you’re happy with the default theme. You cannot do this mod if you want to use any other theme unless you duplicate it entirely.

17

I managed to remove the gap between the cards by using “ha-view-sections-column-gap: 7px”.

Is it possible to remove the padding on the boarders?

image
image2272×1072 236 KB

1 Like
18

You do not seem to use the new sections view, right?
I think it can be achieved with the “Panel (1 card)” view.

19

I’ve found a solution: https://community.home-assistant.io/t/sections-customize-horizontal-gap-size/713106/11

20

FYI, a very similar solution exists for the vertical gap between sections/rows.

ha-view-sections-row-gap: 7px
22

I have another idea/request - while there are many use cases for which a smaller/larger gap is sufficient, in our case I’d like to rather separate the sections more clearly with a vertical line/bar (in our case this would separate entities in different rooms more clearly).

23

Pplase help me “where” the appropiate varibale name van be found. I have F12 in browser inspect element but dont know what to look for…

My config now is:

frontend:
  themes: !include_dir_merge_named themes