15. Theming in Volto

To develop our theme, we can use Semantic UI. There are two cases:

  • Some attributes like the overall font that are covered by Semantic UI variables.

  • The other case is styling of for example listing news that needs some 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.

@fontName : 'Lato';

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 an empty 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 these two files theme/extras/custom.overrides and theme/extras/custom.variables. Use these tp style everything that does not belong to default Volro, e.g. not belonging to the header, navigation, breadcrumbs, etc.. It’s a convention to put styling of your 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. We style this component in theme/extras/custom.overrides

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

You should use the power of less and use variables such as:

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

15.1. Exercise

Change the font for the toolbar menu to Lato.

Solution

change theme/extras/custom.overrides

#toolbar {
  .pastanaga-menu-list {
    li {
      a,
      button {
        font-family: @fontName;
      }
    }
  }
}

You see the nested less rules.

#toolbar is added to override the default style.

15.1.1. Changing the favicon

Find the favicon.ico in public/ and replace it with a custom favicon.

Note

As you already know, the Node app Volto needs to be restarted after adding new files.