Theming in Volto#

In this part we will:

  • Override the default font

  • See how to apply style rules to custom components

Topics covered:

  • 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 site.variables in theme/globals/ and set your font.

@importGoogleFonts : true;
@fontName : 'Lato';
@emSize: 18px;

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. We use site.overrides as this rule should apply site wide. Create a file theme/globals/site.overrides and set the letter-spacing:

#main {
    letter-spacing: .05em;
}

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.overrides and 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 custom.overrides and custom.variables.

In chapter The Sponsors Component we will create a custom component to show the sponsors of our conference. We style this component in theme/extras/custom.overrides

.ui.segment.sponsors {
  background-color: rgb(177, 192, 219);
}

Relying on the Semantic UI based Pastanaga theme, we use variables such as:

.ui.segment.sponsors {
  background-color: @lightGrey;
}