Sections - Customize horizontal gap size

[jugulator]

Could you tell me where do we add this?

[TheBigNeo]

To adjust the ha-view-sections-column-gap setting, you need to create a new custom theme in Home Assistant. Follow these steps:

1. Open your configuration.yaml file.
2. Add a new theme under the frontend section.
3. Reload your YAML configuration to apply the changes.
4. Apply the new theme on your dashboard.

Here’s an example configuration:

# Load frontend themes from the themes folder
frontend:
    themes:
        MySection:
            ha-view-sections-column-gap: 8px

For more information about Home Assistant theme configuration, refer to the official documentation.

[sender]

Yes, this removes the gap betweenthe sections (after selecting the theme).

But this also remove the defautl Home Assistant theme and thus the ability to select Dark mode:

How to solve that?

[sammyke007 (Sammy V)]

Genius, tnx!!!

[sammyke007 (Sammy V)]

Don’t change the theme systemwide, change it per view:

[sender]

Very Good!

[A_Jey]

You may wanna vote for it here:

WTH I need to install a theme to change the ha-view-sections-column-gap

The column gap of the new sections layout shouldn’t be only changeable through the yaml of a theme. Please transfer it to the view-settings of a tab with sections-layout. Alternatively transfer it to the yaml of this view. Advantage: the column-gap can be changed on standard theme which I would expect as normal.

[danupshaw]

Piggy backing on this thread: is there a way to reduce the margins between the tops and the bottoms of the cards within the sections? I haven’t been able to find a thread that shows this.

I was able to create a theme like the one described in this thread and remove the spacing between the columns, but not the spacing between the cards.

Thank you for your help!