Volto theming: styling custom components and listing block templates. Where to place styling rules (and variables)

Development Plone 6 UI (Volto)
1

Beside some overrides in theme/elements/container.variables and .../container.overrides and /theme/globals/site.variables and .../site.overrides I have components and listing block templates that should get some styling.

Styling with additional theme/customtheme/customtheme.less and
theme.config
@customtheme: 'customtheme';
@import "./@{customtheme}/@{customtheme}.less";
works well, styling is applied.

As soon as I use global variables like @mobileGutter the compilation fails.

./node_modules/@plone/volto/theme/themes/pastanaga/extras/extras.less (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--8-3!./node_modules/@plone/volto/theme/themes/pastanaga/extras/extras.less)  

  padding-left: @mobileGutter;

Variable @mobileGutter is undefined      
  Error in /Users/ksuess/Volto/Schweikert/schweikertruth/theme/customtheme/customtheme.less (line 53, column 16)

I wonder where to place styling rules that are not related to any default Volto components.

And yes, the upgrade recommendations for moving to /theme/sites to be prepared for add-ons is another topic. I'll come back to it later.

Any best practice tips?

2

Goal: Smaller content area.

Given the situation that I have to override a less variable of container.variables and use it in custom.overrides I stumbled across the fact, that only less variables of site.variables are available in other .overrides. So to avoid a redundant declaration of @largeMonitorWidth in custom.overrides I import container.variables in custom.overrides.

myproject/theme/site/extras/custom.overrides

@import (reference) "@{siteFolder}/elements/container.variables";

Problem solved.

1 Like