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 making edits and additions to the template CSS/SCSS 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.
CSS Method - custom.css
If you prefer to work with theme 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" />
Note:When you update theme, make sure you have backup of your files and not to override the user's custom file, which may contain styles you have created already. We also recommended to checking how to Updates theme section.