Which to use, the plugin or the module?
In general you should use the plugin if you want your custom CSS code to be loaded to all pages of your website and you should use module if you want to load the cutom CSS code in specific pages.
But have in mind that plugins are loaded after the modules. This means that the plugin version of Add Custom CSS will be loaded after the module version.
Caution: If you use the plugin you have to place it at the end of the plugin order in the Plug-in Manager.
Notice: Don't forget to unzip the downloaded file. In there you will find one plugin and one module, both working for Joomla 2.5.x & 3.x.
- Download Add Custom CSS and unzip it.
- In the Joomla control panel select: Extensions > Install/Uninstall.
- In the Upload Package File section click Choose File and locate the "plg_addcustomcss.zip" file if you want to use the plugin or "mod_add_custom_css.zip" if you want to use the module.
- Then click Upload & Install to upload the file and complete the installation.
In order to configure Add Custom CSS go to the Joomla control panel and select: Extensions > Plugin Manager for the plugin version or Extensions > Module Manager for the module version. Locate "System - Add Custom CSS" in the list and click it. You can see the Parameters of the extension as below:
The Add Custom CSS plugin has the following parameters:
- Custom CSS File Path 1: The absolute or relative path, starting from the Joomla installation folder, to your first custom CSS file. Example: 'templates/my-template/css/custom.css'. Note: The relative path will work to the localhost and the official server, so it is recommended.
- Custom CSS File Path 2: The absolute or relative path, starting from the Joomla installation folder, to your second custom CSS file. It will load after the first custom CSS file. Example: 'templates/my-template/css/custom.css'. Note: The relative path will work to the localhost and the official server, so it is recommended.
- Custom CSS File Path 3: The absolute or relative path, starting from the Joomla installation folder, to your third custom CSS file. It will load after the second custom CSS file. Example: 'templates/my-template/css/custom.css'. Note: The relative path will work to the localhost and the official server, so it is recommended.
- Remove Comments: Remove the comments from the CSS file.
- Minimize: Minimize the code of the CSS file.
- Full Absolute Paths: This parameter is useful for the image paths that are used to some css properties (e.g. 'background', 'background-image', 'border-image', 'list-style-image'). It converts the short version of the absolute paths (e.g. '/templates/protostar/images/background.jpg') to the full version (e.g. 'http://www.domain.com/templates/protostar/images/background.jpg' or 'http://localhost/domain.com/templates/protostar/images/background.jpg'). Enable it for maximum compatibility between the development server (http://localhost/...) and the official server (http://www.domain.com/...). Remember that if you enable it, it will work only if you use short absolute paths starting from the Joomla installation folder (e.g. /images/backgrounds/bg.jpg').
- More fields added for custom CSS files.
- 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.
- First release of Add Custom CSS.
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).