Custom.css load order - Forum | JoomShaper
Solved SP Page Builder

Custom.css load order

Asked by SPD 4 years ago Last activity 4 years ago

Hi,
I had want to change the colors on the button classes so wanted to add that to my custom.css file but when it did work I use Inspect and can see that it is being loaded before a few sp page builder .css files.

https://drive.google.com/file/d/171ObPS7bBP7XpjjfNwQxki7cFeblyPv1/view?usp=sharing

Just wanted to see if that is expected behaviour as i would have thought that custom.css would be loaded last.
Cheers.. I am still using SP PB 3 btw

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff

Hi SPD,

custom.css file order is fully OK, why becuase that file is from template and it's loaded as the last css file from template. And this is natural order.
If you want to load your custom CSS below all the components styles - it request extra but easy step.

  1. Rename custom.css file into override.css
  2. Inside Template Options > Custom Code > Before end of < head >

add below line

<link href="/templates/shaper_helixultimate/css/override.css" rel="stylesheet" />

Then that file will be loaded after all styles from template, and components etc.

That's all. Yes, you can still edit that file from Joomla Template Editor.

3 more replies

Mehtaz Afsana Borsha Staff

Hi

Thanks for contacting us. Could you please give me your site URL and also screenshot of your issue?

-Regards.

SPD Asked this

Sorry I assume the position of the custom.css in the shot I provides was enough. I am new to CSS but doesn't the order listed have an effect on on 'which definition wins'

If the above is true (.CSS load order is important) and the list is in the expected order then I guess there are some classes which can be overriden via custom.css. If you do need a screenshot of the unchanged then I will have to get back with you because I have changed stuff back for now
Thank you

SPD Asked this

Once again, just what I was looking for. Thanks again Paul!

Log in to reply.