4

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?

7

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.

  • 2
    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 Oct 15 '15 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 Oct 15 '15 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 Oct 15 '15 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 Oct 15 '15 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 Oct 15 '15 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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