5

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?

Improve this question

2 Answers 2

Reset to default
9

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.

The 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:

templates/YOUR_TEMPLATE/css/

so the result will be:

templates/YOUR_TEMPLATE/css/mod_login/

One done, copy the extensions CSS file from the media/ folder into your newly created directory, so you will end up with:

templates/YOUR_TEMPLATE/css/mod_login/style.css

You can then start editing this file as you wish.

Improve this answer
8
  • 3
    Another option is to just use the custom css your theme hopefully allows for and just add your "overrides" to that. I do this all the time with small changes, just add them to the same file I'm using to override the design of my template.
    – Brian Peat
    Commented Oct 15, 2015 at 12:29
  • @BrianPeat - Good point. I personally prefer not to do this as I like to keep styling for each extension separate, however your method is better for performance. Definitely write it as an answer if you have time ;)
    – Lodder
    Commented Oct 15, 2015 at 12:36
  • 1
    It's interesting though, that my way ADDS extra CSS, and your way bypasses the old CSS and uses the override. Are you saying using overrides in general adds a bit of a performance hit?
    – Brian Peat
    Commented Oct 15, 2015 at 13:17
  • 1
    Oh sorry, I realised I got it muddled up after reading your comment. You're way will impact performance a little more (I think) as it's not only importing the CSS files for the extensions, but also importing an additional custom.css file from the template. My way, as you said, bypasses the extension CSS files, so it doesn't need that import that additional custom.css file. That said, I'm not sure of the performance of the JHtml class with the functions required for this.
    – Lodder
    Commented Oct 15, 2015 at 13:26
  • 1
    In my case, the custom CSS is always there anyway, because I don't like hacking up a theme itself (then I can upgrade it). This isn't an issue if you're building your own theme, but if you're using a commercial theme, use a custom css file is the best way to keep the theme unaltered. BUT, I have been doing overrides for a few years and NEVER tried the CSS folder thing you suggest. Learned something new :)
    – Brian Peat
    Commented Oct 15, 2015 at 16:19
1

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.

Improve this answer
3
  • None of these allow overriding !important rules that some overzealous dev might use. This looks to be only possible by editing some random component CSS file directly each time an extension is updated. Am I wrong?
    – Destroy666
    Commented Jul 7 at 9:34
  • Overriding a CSS rule with !important is a different topic, and it's out of the scope of the original question and the answers posted here. But, yes, using !important rule in CSS is generally considered a bad practice (there are cases where !important might be acceptable). As with all bad practices cases, things become trickier and less efficient. @Destroy666
    – FFrewin
    Commented Jul 7 at 15:44
  • @Destroy666: Usually, you can still override an !important CSS rule, by using another !important rule with more specificity. Well, not ideal... but at least you can achieve your desired result. And in order to add your own styles you would use one of the methods that are described in the answers above in this thread.
    – FFrewin
    Commented Jul 7 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.