How to Add Custom CSS to Your Joomla Site

How to Add Custom CSS to Your Joomla Site

Many people install off-the-shelf Joomla templates or extensions and then want to modify their design.

If you want to add custom CSS to your Joomla site without hacking any existing files, we recommend the "Add Custom CSS" plugin.

In this tutorial, we'll show you how to use the Add Custom CSS plugin to safely tweak your site's design.


Step #1: Create your CSS file

The most important is to know which CSS code you want to add. If you are not familiar with CSS, we have a CSS class that you will find helpful.

  • Add your custom CSS into a file called mycustom.css.
  • Upload that file to your site. In my example, I'll upload the file to my templates' CSS folder templates/mytemplate/css/mycustom.css, but you can place this file anywhere you wish.

Step #2: Download and Install

  • Go to the extension page for "Add Custom CSS" and click the download button.

download the add custom css plugin

  • Login to your Joomla administrator area.
  • Go to Extensions > Manage:

go to extensions manage

  • Click Or browse the file:

click or browse the file

  • Find the plugin installation file on your hard drive and click twice on its name to start its installation.

Excellent! You just installed the plugin you need to create your own custom CSS styles for your Joomla site.

Now it's a good time to configure it.


Step #3: Setup the plugin

  • Go to Extensions > Plugins.
  • Search for "System - Add Custom CSS".

open the plugin to edit it

  • Click on the plugin title to open the plugin for editing.
  • In the Custom CSS File 1 Path field, enter the path to your CSS file. In this example, as I mentioned at the beginning of this tutorial, we chose the templates/mytemplate/css/mycustom.css path.

enter the path to your custom CSS file

  • Enable the plugin.
  • Click Save & Close button.

Step #4: Check the result

  • Refresh your site and confirm if your new CSS code is being loaded.