Customization

Learn how to write your own custom styles without changing the theme's core files so that you can take advantage of future updates.

SCSS Method - user.scss (highly recommended)

We highly recommended to make edits and additions to the template CSS is to use the provided user-variables.scss and user.scss files located in the template/assets/scss folder.

  • user-variables.scss will contain each variable you want to edit. Simply copy the variables you need to edit from the main _variables.scss and paste it into this file. It will automatically override the default values with the new ones.
  • _user.scss will contain CSS/SCSS you want to add or edit.

Compiling changes

In order to see the changes, running Gulp command is required. To learn more about Gulp go the gulp section.

Note:When you update Folio, make sure you have backup of your files and not to override the user’s custom file, that may contain styles you have created already.

CSS Method - custom.scss

If you prefer to work with Folio as a static source without Gulp and Sass, you will need to add custom CSS through a separate CSS file.

You just need to link custom.css at the end of <head> tag of each page and start adding CSS you want to add or edit. See example below:

<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />