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?

2 Answers 2


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 {


    html .theComponent .theSelector {

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. Commented Mar 28, 2016 at 11:01
  • 1
    You are welcome. It really comes handy, doesn't it.
    – user8036
    Commented Mar 29, 2016 at 9:59

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.