Justin James
mvp_badge
MVP
Rank: #7
894Views
5Comments
Solved
How to control CSS load order?
Question

I am adding a link to a stylesheet with the "AddStylesheetTag" Action. I noticed that this puts the link tag before any of the link tags for the Web Block. However, in my use case, I need it to override the CSS in the Web Blocks. So... what are my choices to get this to load after the CSS from the Web Blocks? Is this a time to use jQuery or JavaScript? I really, REALLY do not want to inject the styles directly into the page, it is a big sheet and caching needs to be my friend here...

Thanks!

J.Ja

0
0
on 2016-11-08
Copy link to comment
Remco Dekkinga
mvp_badge
MVP
Rank: #26
Solution

Hi Justin,

The order of the stylesheets, afaik, is the following:

1. AddStylesheetTag
2. Webblock
3. Root Theme, (and other parents)
4. Current Theme
5. Screen
6. Inline

You can try to include your CSS in the Current Theme or try to include at the end of the body using JQuery

Kind regards,

Remco Dekkinga

1
0
on 2016-11-08
Copy link to comment
Justin James
mvp_badge
MVP
Rank: #7

Remco -

Thanks! this is about what it looked like to me as well. JQuery it is! This is dynamically generated CSS.

J.Ja

0
0
on 2016-11-10
Copy link to comment
Jessica Lee
Rank: #896

Please advise how to import local css file by JQuery.

0
0
on 2020-11-30
Copy link to comment
Jessica Lee
Rank: #896

I have tried to use @import url("\{module\filename.css"); in the css editor of my traditional application but not work. Hence, this post give me some hints to use jquery for generating CSS dynamically. 

Please advise how to do it.

0
0
on 2020-12-01
Copy link to comment