Add Custom CSS
Custom CSS code enable you to have your own customize styles. In this guide, we will show you how to do it with Sun Framework.
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.
- 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.