Gantry 5 Tutorials - Documentation

If you need to override existing styles, add extra codes or style files for a template/theme/particle- we recommend to follow instructions below. By following this way, your overrides and custom styles won't affect with the template/theme update later.

Create a custom.scss file

1. On  Joomla!, create directories and files by following ROOT/templates/DEFAULT_TEMPLATE/custom/scss/custom.scss 
    
2. On  WordPress, create directories and files by following ROOT/wp-content/themes/DEFAULT_THEME/custom/scss/custom.scss 
    
3. On  Grav CMS, create directories and files by following ROOT/user/data/gantry5/themes/DEFAULT_THEME/scss/custom.scss 
   using an FTP client like FileZilla or using your cPanel File manager.
    
4. Open custom.scss file you just created
    
5. Add 

   @import "dependencies";

   at very top of the custom.scss file and add any other codes under this line.
    
6. From now on, you can add all your customization codes on the custom.scss file.

Adding a new style file

If you need to add a new style file-

1. Go to custom  scss folder you just created above and create or upload your file with the format _filename.scss 
    
2. Open custom.scss 
    
3. Now add 

   // My new file _filename.scss
   @import "filename";

4. Make sure @import "dependencies"; line stays on top of everything.

Clear Cache and Recompile CSS

If you site is in Production mode or if you can't see changes for your custom codes-

1. Go to Gantry Admin
2. Click on Styles tab
3. Click on Extras > Clear Cache from top right corner.
4. After successfully clearing cache, click on Recompile CSS button.