Important note: You should only add your custom CSS in custom.css file because when the template gets update, all other CSS files will be reset to the default. Only custom.css file remains.

Method 1: Add to custom.css file

In every JoomlaShine template, custom.css file created by default. Once, you have add the custom code, it will make the change to your site

Step 1: Go to Extensions → Templates → Templates → JSN Template Gen-2 → CSS → custom.

Step 2: Add your CSS code to custom.css file. And save the setting.

Note:

• If you find your site doesn't change, make sure you have clear cache.
• In some templates, you have to add the file URL: custom/custom.css to Custom Files(s) field in Sun Framework (See method 2)

Method 2: Add to newly created file

If you prefer to add to a new css file, you can follow this guide:

Step 1: Go to Extensions → Templates → Templates → JSN Template Gen-2

Step 2: Click New File to create a new CSS file

+ Under CSS folder

+ File type: css

Step 3: Add your CSS code to your new CSS file.

Step 4: Add the file name/ file URL into the Custom Files(s)

For the demonstration, I have create a CSS file name "New" under CSS/Custom. So I have to add custom/new.css to the field.

Edit Custom CSS File(s) with Sun Framework

By clicking the Edit icon on the right, you will have a shortcut to edit your custom.css file.

Note: Only works if the file is already existed.