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.

Find custom.css file


  • 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.

create 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.

Add the file URL to Custom Files(s)

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.

Learn More

This article is from “Getting Started" series. A series that help new users speed up their development process and utilize every feature in JSN Sun Framework.

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Rate this article
(2 votes)