user.css file and bootstrap-rtl.css file

Question

Joomla 3.6.5 default template (protostar), attaches the file 'bootstrap-rtl.css' before the file 'user.css'(the file that user can add their customizes styles there to be override in template.css) by default.

This makes some problems for me, there is only one solution and that is loading user.css before bootstrap-rtl.css. How can I force protostar to do this? (I think there are something needed to be changed in 'index.php')

Answer 1

It probably makes most sense for ProtoStar to load user.css last but there are a few ways to work around stylesheet load order issues without hacking the core.

1. jQuery Easy

jQuery Easy can be used to remove the stylesheets and then add them back in the desired order.

2. Specificity

Make custom CSS changes specific enough so that they override the other stylesheets regardless of the stylesheet order.

Reference: https://joomla.stackexchange.com/a/15853/120

3. Use a Third Party Extension to load your custom CSS file

Instead of using user.css for your custom CSS, try some third party extensions which may load custom CSS files in a different order compared to the ProtoStar user.css stylesheet. For example, EasyScript loads a custom CSS file e.g. custom.css last.

Reference: How can I load the new Protostar custom CSS stylesheet last?