How can we add CSS in Joomla?

Author:

On a website most of the time we need to change something like the look and feel of the website. So we need to edit the CSS of the template of that website. and website can be based on CMS or framework and all frameworks and CMS have their own file structure. So to add the CSS in Joomla of the website is a different process for all.

In this article, we are talking about the Joomla website. when we use free Joomla Templates or premium Joomla templates in some cases we don’t like something like font size, margin or padding, etc. So we want to change while the website admin doesn’t know about the Joomla File structure then he can also edit CSS or add new CSS in the correct file.

Joomla helix custom CSS

There are many ways to add CSS in Joomla. for example:

  1. Using Joomla Administrator: Go to the Joomla control panel and open Template manager and select your active template. So here you can go through in 2 ways –

a. Click on the template style.

Using Joomla Administrator
Using Joomla Administrator

b. then click on the Customs Code option on the left navigation of Helix Ultimate

custom code joomla
custom code Joomla

Actually, this is a JoomShaper paid template. Most templates are provided the same but some others may be offered different navigation.

c. So after a click on this custom code menu, you will get an input box where you can insert CSS as below-

custom-code-css
Helix Ultimate framework Joomla templated. So this is the best and easy way to add Custom CSS to your Joomla Website.

Click on your template and open the file from the CSS folder file custom.css.

a. Select a current template and click on the link

add CSS from template
add CSS from template

           b. Check to the left side panel and you will get a CSS folder icon so click on it. in this CSS folder, you can see a custom.css file open it.

Add Custom CSS in custom.css
Add Custom CSS in custom.css

c. When you click on the custom.css file link will open right side where you can see existing CSS or blank so you can add your code here.

  1. Using FTP(FileZilla) :

if you have knowledge about file Zilla manager and PHP file editing then you can use FTP to edit custom CSS

using FTP manager. For FTP you need to FTP login detail first then connect FTP and open your correct file path like below:

/public_html/templates/shaper_helixultimate/css/custom.css

add css ftp.png
add CSS ftp.png

After saving the file upload it by FTP. So your code will be saved.