Custom Styling

Custom Styling#

Semantic UI#

For styling our website in Volto we use Semantic UI. It uses LESS as the underlying technology. By default Volto uses the Pastanaga theme but any theme can be used. A theme has the following folder structure:

  • assets

  • collections

  • elements

  • globals

  • modules

  • views

Variables and overrides files#

The assets folder contains all the images and fonts. The other folders contain LESS files. Those less files are separate for each UI component. For example we have separate files for buttons. Each UI component has 2 files: a .variables file and an .overrides file. The .variables file contains all the predefined variables which you can override in your theme. If you want to do more specific customizations you can use the .overrides file to write your own LESS.

Tip

You can find the default definitions for all the available variables in the default theme components (the site component in the example) in two ways, by using the source code: node_modules/semantic-ui-less/themes/default/globals/site.variables or by checking it out on Github: Semantic-Org/Semantic-UI-LESS

Tip

Similarly, you can take a look at the default styling on the default definitions, by using the source code: node_modules/semantic-ui-less/definitions/globals/site.less or by checking it out on Github: Semantic-Org/Semantic-UI-LESS

In the globals folder we have the site.variables and site.overrides files which contain the site wide styling. If you want to customize something in the site component, you should create the globals folder and place inside one (or both) files (including the matching folder structure) in your theme folder.

Pastanaga UI Theme#

Volto implements Pastanaga UI theme, a new theme for Content Management Systems created and designed by Albert Casado. For more info:

Volto look and feel is a Semantic UI theme that implements Pastanaga UI, called pastanaga and can be found in the Volto theme/themes/pastanaga directory.

Tip

You can find it in the source code: node_modules/@plone/volto/theme/themes/pastanaga or on Github: plone/volto

Pastanaga Theme is an example on how to customize the default Semantic UI look and feel.

Examples: Changing Base Font#

We start by creating the file theme/globals/site.variables. In this file we can override any value. We do not need to copy the whole file from Volto core. We can add variables we would like to change. When we want to change the base font, we add the following:

@fontName : 'Comic Sans MS';

The font 'Comic Sans MS' needs to be either installed on you machine or provided with your app.

To provide the font with your app, the following steps are necessary:

  1. Get your font and copy the files to /theme/assets/fonts/<font name with space replaced by _>.

  2. Usually the font provider gives you ready made font-face instructions. Copy these font-face code lines to /theme/typography.css. There are a lot of font providers. If you choose Google fonts, check google-webfonts-helper to generate font-face CSS code and download font files to include in your project.

  3. Add to the end of /theme/theme.config a function to load your font-faces:

    .loadThemeFonts() {
    @import "./typography.css";
}

  4. Call this load function in /theme/globals/site.overrides:

    .loadThemeFonts();

  5. In /theme/globals/site.variables you can now override both, the font for headings (h1, h2, h3, …) and the font for the rest.

    // Do not override @fontName!
// @fontName: 'Raleway', 'Helvetica Neue', Arial, Helvetica, sans-serif;

@pageFont: 'Raleway', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@headerFont: 'Rubic Microbe', 'Helvetica Neue', Arial, Helvetica, sans-serif;

Voilà. Start your Volto app if you created new files.

Tip

For testing purpose you can refrain from installing the font and from providing the font with your app if the font is a Google font. With the following two lines you tell Volto to load the font "Montserrat" from fonts.google.com.

@fontName : 'Montserrat';
@importGoogleFonts : true;

Changing The Breadcrumbs#

Change the breadcrumbs so that the divider is pink in theme/collections/breadcrumb.variables:

@dividerColor: @pink;

Using Overrides#

For features which are not supported in Semantic UI through the variables, we can use the overrides files. Update the breadcrumbs so that the links are underlined, then in theme/collections/breadcrumb.overrides:

.ui.breadcrumb a {
    text-decoration: underline;
}
Contents