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.