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 Add Custom CSS 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 will be helpful.

  • Add your custom CSS into a file called mycustom.css
  • Upload that file to your site. In this example we’ll upload the file to this location, but it could be anywhere: templates/mytemplate/css/mycustom.css

Step 2: Download and Install

Go to the extension page for “Add Custom CSS” and click the download button.

The zip file you downloaded needs to be uncompressed to find the installers.

You will see two folders containing a module and a plugin. For this tutorial let’s use the plugin marked below:

  • Login to your Joomla administrator area.
  • Go to Extensions > Extensions Manager.
  • Click Upload a Package File and browse to find the plg_addcustomcss.zip file.
  • Click the Upload and install button.

Step 3: Setup the plugin

  • Go to Extensions > Plugin manager.
  • Search for “System – Add Custom CSS”.

  • Open the plugin for editing.
  • In the “Custom CSS File Path 1” option, enter the path to your CSS file. In this example we chose: templates/mytemplate/css/mycustom.css
  • Enable the plugin.
  • Click on the Save & Close button.

Step 4: Check the result

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