Joomla Extensions, Components, Modules, Plugins

Add Custom CSS v.2.0.1

Override existing CSS styles with your CSS code.

Joomla! 4.x, 5.x Module

  LIVE DEMO    DOWNLOAD

  • You are here:  
  • Home
  • Joomla Extensions
  • Add Custom CSS

Add Custom CSS

Load your custom CSS styles and override the styles of the template and the other extensions (modules & components).

Almost every Joomla site needs adjustments to be made to the appearance of the template and extensions. This extension loads your custom CSS code after the regular template CSS files and extensions (except in special hard-coded cases), allowing you to make any style change you want.

By using this extension to make CSS customizations, you don't need to change the code of the template and other extensions. This way you are free to apply updates when an update is available from the developer without worrying if your custom changes are going to be lost.

This extension can't override inline styles and templates that intentionally load their CSS and Javascript files last. You have to use higher specificity selectors or !important for these cases.

Free Download
This extension is free for download.

  • Download Add Custom CSS
  • Demo of Add Custom CSS
  • Documentation of Add Custom CSS
  • Technical Information of Add Custom CSS
  • Change Log of Add Custom CSS

Override existing CSS styles with your CSS files.

DownloadAdd Custom CSS

Read More

The button below will redirect you to another website demonstrating the extension.

Demo

Read More

Installation

  1. Download Add Custom CSS.
  2. In the Joomla control panel select: System > Extensions in the Install section.
  3. In the Upload Package File section click "Or browse for file" and locate the "add-custom-css-2.0.1.zip" file.
  4. Then click Open to upload the file and complete the installation.

Configuration

In order to configure Add Custom CSS go to the Joomla control panel and select: Content > Site Modules. Locate "Add Custom CSS" in the list and click it. You can see the Parameters of the extension as below:

Add Custom CSS Parameters

Parameters

The Add Custom CSS extension has the following parameters:

  • CSS Code: Fill in your custom CSS code.
  • Remove Comments: Remove the comments from all the custom CSS code.
  • Minimize: Minimize the custom CSS code.

Don't forget to:

  • Publish the module.
  • Set the module position. It is recommended to use a position at the end of the template (e.g. the Debug position).
  • To select the pages the custom CSS code will load, in the "Menu Assignment" tab.

Uninstall from Joomla

  1. Select: System > Extensions in the "Manage" section.
  2. Locate the line with name "Add Custom CSS" in the list.
  3. Check the line and click "Uninstall".

Notice

Please have in mind that some templates and extensions may have special code customizations that affect the normal operation of Joomla and this may not allow your custom CSS code to load last. In this rare case, you have to do other actions to override the small parts of code that are loaded after your custom CSS code (e.g. use !important or use higher specificity selectors).

Full Customization

If you need full customization of your website then you can use all the following free extensions:

  1. Add Custom PHP
  2. Add Custom CSS
  3. Add Custom Javascript
Read More
  • Extension version: 2.0.1
    (This version is not compatible with the previous version 1.3.0 which works only in Joomla 3.)
  • Extension type: Module
  • Extension technologies: PHP
  • Compatible Joomla version: 4.x, 5.x
Read More
  • 2.0.1:
    • Fix to the font color of the code editor.
  • 2.0.0: 
    • Compatible with Joomla 4.x and 5.x. It is not compatible with Joomla 3.x.
    • Changed to module (it was plugin).
    • The CSS code is written inside the extension's code editor and not in a separate file.
  • 1.3.0:
    • Compatibility fix for Joomla 4.
  • 1.2.1:
    • Compatibility fix for PHP 7.
  • 1.2.0:
    • Auto update support.
    • More options.
    • Simpler configuration for the user.
  • 1.1.1:
    • More fields added for custom CSS files.
  • 1.1.0:
    • Code improvements to ensure that the custom CSS file is loaded last.
    • Option for maximum interoperability between the localhost server, the official server and SEF urls.
    • Useful instructions.
  • 1.0.0:
    • First release of Add Custom CSS.
Read More