6

I have been using EasyScript to load custom CSS on a website using the Protostar template:

EasyScript Custom CSS

This works well and allows me to override the template styling and also third party extension styling (e.g. AcyMailing, CoalaWeb Social Links and Smart Slider in this particular case) as the custom CSS code is loaded last.

Since Joomla 3.5.0, the Protostar template loads custom CSS code from the file at /templates/protostar/css/user.css, if the file exists.

Unfortunately, the custom CSS is loaded immediately after the Protostar template.css file so I am not able to use this feature to override the third party extension styling:

Protostar User CSS

As I am keen to minimise the number of third party extensions I need to load, how can I make user.css load after the third party extension stylesheets?

3

One option is to use a stronger selector. With this the position the order of the css doesn't matter.

if you would like to modifiy to orginal css

    .theComponent .theSelector {
    color:red;
    }

use

    html .theComponent .theSelector {
    color:blue;
    }
3

What is @Pierre suggesting is called CSS Specificity, and is important part in determining which CSS Selector is stronger.

It can be easily calculated with Specificity Calculator, but the strongest selector html he is suggesting, will always work to override previously applied attributes.

  • Thanks , the Specificity Calculator is a useful resource I wasn't aware of. – Neil Robertson Mar 28 '16 at 11:01
  • 1
    You are welcome. It really comes handy, doesn't it. – user8036 Mar 29 '16 at 9:59

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.