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.scss files located in the
user-variables.scsswill contain each variable you want to edit. Simply copy the variables you need to edit from the main
_variables.scssand paste it into this file. It will automatically override the default values with the new ones.
_user.scsswill contain CSS/SCSS you want to add or edit.
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" />