I'm using an extension and would like to make some CSS changes, however I don't want these changes lost when I update the extension.
How would I go about performing a CSS override?
Joomla Stack Exchange is a question and answer site for Joomla! administrators, users, developers and designers. It only takes a minute to sign up.Sign up to join this community
You firstly need to ensure the developer has used the correct approach for importing the CSS file, using
JHtml, like so:
JHtml::_('stylesheet', 'mod_module/style.css', ['relative' => true]);
The key to this, is the
true argument. If this isn't defined or is
false, then the override isn't possible.
true argument means the path is relative to the
/media directory and when importing the file, it will check the template's CSS directory first, to see if an override exists.
So lets take mod_login as an example. To perform the override, you need to create a folder called mod_login in the following directory:
so the result will be:
One done, copy the extensions CSS file from the
media/ folder into your newly created directory, so you will end up with:
You can then start editing this file as you wish.
Lodder's answer is great and presents the available possibilities in Joomla for extension's css overrides. But as he mentioned in his question, not all extensions are supporting this method for css overrides.
Another convenient way to apply your own styles for extensions is to put all your custom styles inside a custom.css override file in your template.
Usually most commercial templates provide an easy way to add your own css overrides. A very common practice is to create a custom.css file inside the css folder of the template.
This Q/A here: How do I override the CSS styles in my template? demonstrates the way on how to do this and has references for most popular template frameworks.
If you are building your own custom template, then you can simply add your extra css in your template's css file, or link an extra css file for your extensions overrides.