14. Theming in Volto#
In this part we will:
Override the default font
See how to apply style rules to custom components
Small customizations of the default theme Pastanaga via CSS
While developing a theme with Semantic UI, two cases appear:
Some attributes, like the overall font, are covered by Semantic UI variables.
Other attributes need custom CSS rules.
We start with the first case and change the font to another Google font, Lato.
The overall font is defined in Volto and can be found in
omelette/theme/themes/default/globals/site.variables. So create an empty file
theme/globals/ and set your font.
@importGoogleFonts : true;
@fontName : 'Lato';
Volto expects the font files to be present in our app.
While developing we tell Volto to load Google fonts from Google with
@importGoogleFonts : true;.
Semantic UI does not provide a less variable for increasing the letter-spacing.
So we add a CSS rule for it.
site.overrides as this rule should apply site wide.
Create a file
theme/globals/site.overrides and set the letter-spacing:
We can use variables and theme overrides to achieve our theme, or we can use Volto’s
custom.overrides, or we can mix elements of both as needed.
There is no right or wrong way of doing it, and we will be using the Semantic UI theming engine in both cases.
There are two files
theme/extras/custom.variables for everything not belonging to default Volto, e.g. header, navigation, breadcrumbs, etc..
It's a convention to put styling of additional non-default components in
In chapter The Sponsors Component we will create a custom component to show the sponsors of our conference.
We style this component in
background-color: rgb(177, 192, 219);
Relying on the Semantic UI based Pastanaga theme, we use variables such as: