Joomla Extensions, Components, Modules, Plugins

Add Custom CSS v.1.3.0

Override existing CSS styles with your CSS files.

Joomla! 3.x, 4.x Plugin

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 in every Joomla site there is need to do customizations to the appearance of the template and the extensions. This extension loads your custom CSS file after all other CSS files (except special hard coded occasions), allowing you to do any styling change you want.

Using this extension for doing CSS customizations there is no need to change the code of the template and the other extensions. That way you are free to apply updates, when an update from the creator is available, without worrying if the 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 (e.g. Warp Framework).

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 buttons below will redirect you to another website displaying demos of the extension.

Demo 1

Read More

Joomla Installation

  1. Download Add Custom CSS.
  2. In the Joomla control panel select: Extensions > Install/Uninstall.
  3. In the Upload Package File section click Choose File and locate the "add-custom-css-1.3.0.zip" file.
  4. Then click Upload & Install to upload the file and complete the installation.

Configuration

In order to configure Add Custom CSS go to the Joomla control panel and select: Extensions > Plugin Manager. Locate "System - Add Custom CSS" in the list and click it. You can see the Parameters of the extension as below:

Joomla Parameters

Parameters

The Add Custom CSS plugin has the following parameters:

  • Custom CSS File Path 1: The relative path, starting from the Joomla installation folder, to your custom CSS file. Example: 'templates/my-template/css/custom.css'.
  • Load File 1 In: Defines where the first custom CSS file will be loaded. Front-end is the normal website. Back-end is the Joomla administration.
  • Custom CSS File Path 2: The relative path, starting from the Joomla installation folder, to your custom CSS file. Example: 'templates/my-template/css/custom.css'.
  • Load File 2 In: Defines where the first custom CSS file will be loaded. Front-end is the normal website. Back-end is the Joomla administration.
  • Custom CSS File Path 3: The relative path, starting from the Joomla installation folder, to your custom CSS file. Example: 'templates/my-template/css/custom.css'.
  • Load File 3 In: Defines where the first custom CSS file will be loaded. Front-end is the normal website. Back-end is the Joomla administration.
  • Remove Comments: Remove the comments from all the custom CSS files.
  • Minimize: Minimize the code of all the custom CSS files.

Uninstall from Joomla

  1. Select "Extensions > Manage > Manage".
  2. Locate the line with name "System - 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).

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

It is recommended to put these extensions in the order specified and after all other extensions in the list.

Read More
  • Extension version: 1.3.0
  • Extension type: Plugin
  • Extension technologies: PHP
  • Compatible Joomla version: 3.x, 4.x
Read More
  • 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