Customization
Learn how to write your own custom styles without changing the theme's core files, so you can take advantage of future updates.
SCSS Method - user.scss (highly recommended)
We highly recommend making edits and additions to the template CSS by using the provided user-variables.scss and user.scss files located in the template/assets/scss folder.
user-variables.scssthis file will contain each variable you want to edit. Simply copy the variables you need to modify from the main_variables.scssfile and paste them into this file. It will automatically override the default values with the new ones._user.scssThis file will contain any CSS/SCSS you want to add or edit.
Compiling changes
To see your changes, you need to run the Gulp command. For more information on using Gulp, refer to the gulp section.
Note:When you update Folio, make sure you have backup of your files and do not override the user's custom files, which may contain styles you have already created.
CSS Method - custom.css
If you prefer to work with Folio as a static source without using Gulp and Sass, you can add custom CSS through a separate CSS file.
Simply link custom.css at the end of <head> tag of each page and start adding the CSS you want to include or modify. See the example below:
<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
FAQs
1. What happens if I make changes directly to the core SCSS files?
Modifying core SCSS files directly can lead to loss of changes when the theme is updated. It's best to use user.scss and user-variables.scss to preserve your customizations across updates.
2. How can I debug issues with my custom styles?
Check your browser’s developer tools to inspect elements and see which styles are being applied. Ensure that your custom styles are being loaded by verifying the custom.css file or the compiled output of user.scss.
3. Can I add new variables in user-variables.scss that are not in the original _variables.scss?
Yes, you can add new variables in user-variables.scss. However, make sure these variables are properly defined in your SCSS files to be used effectively.
4. What if my changes are not reflecting after running the Gulp command?
Ensure that there are no syntax errors in your SCSS files and that Gulp is correctly configured. Try restarting the Gulp process or checking the terminal for error messages.
5. Is there a way to preview changes without running Gulp each time?
Unfortunately, Gulp needs to be run to compile SCSS into CSS. However, you can use tools like live reloading or browser sync to automatically refresh your browser when changes are made.