Gaining control over theme & script loading in the head - Sitefinity - Ideas & Feature Requests

All Replies

Posted by Community Admin on 05-Oct-2012 00:00

Currently themes and the generator tag are automatically inserted just before the </head> tag. This however causes any javascript file referenced in the head section to be loaded BEFORE the stylesheets.

I'd like to have more control over at what point the themes get inserted into the head section to ensure proper & optimized loading.

Reason #1:
A quote from the Modernizr website:
Drop the script tags in the <head> of your HTML. For best performance, you should have them follow after your stylesheet references. The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the <body>, and if you’re using any of the CSS classes that Modernizr adds, you’ll want to prevent a FOUC. http://modernizr.com/docs/

Reason #2:
A quote from Google Insights:
Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time. developers.google.com/.../rtt

---
Currently the system just appends to the header tag.

Ideally the system would in the future do the following:
1. Iterate down to find </head> tag.
2. Iterate up to find the first </meta> tag
3. Append theme snippet after that.

or even better:

1. Look for <asp:PlaceHolder id="theme" runat="server" />

2. If present, insert
3. If not present use current behavior.

Both solutions will ensure the most optimal way of loading and provide even users with IE7/IE8 a nice looking and working website...

Jochem.

Posted by Community Admin on 05-Oct-2012 00:00

+10 for more control

Yeah you always want the css above the scripts so that the pages css at least becomes available to the markup before the script blocking

Posted by Community Admin on 06-Oct-2012 00:00

Hmmm...this is where I ended up after searching around for a way to do this. Not good :)

I built a user control that spits out CSS links but all the styling is being overridden by the defaults (loaded directly beneath them).

Anyone gotten anywhere with this?

Posted by Community Admin on 07-Oct-2012 00:00

Hey Tim,

If you don't mind resorting to dirty tricks...
For Javascript you can toss them after the </head> tag and before the <body> opening tag. Kills any validation but works across the board funny enough.

For CSS (i haven't tested it) adding the links by jQuery instead of using a RegisterScriptblock should do the trick no?

Theoretically

$('head').append('<link rel="stylesheet" href="custom-style.min.css" type="text/css" />');

should add it after Sitefinity has added the theme files, but like i said, inline-javascript to render out 1 or 2 stylesheet links feels dirty.

Perhaps its easier to just not apply a theme to your masterpage, but have the theme css-files included by your custom controls, that way you could even combine them into a single load...

Jochem

Posted by Community Admin on 07-Oct-2012 00:00

Jochem,

Great tips! If it were my own site I'd be cool with that stuff but I'm going to release this in the marketplace; I'm trying to keep it squeaky clean.

I switched gears and am currently doing some hacking around with the cssLoadOrder.xml. Seems promising.

Posted by Community Admin on 08-Oct-2012 00:00

Hey Tim,

Just as a heads up:
cssLoadOrder.xml doesn't work properly if you have multiple .css files with double extension like sfproject.css and sfproject.min.css. You can just name sfproject.min.css in your .xml file but sfproject.css will still get loaded,

And secondly, their doing funny business with the .xml when using a Thunder Website Template project, so good chance when there's some css file referenced there that's not present it will get stripped if you open it in Visual Studio, due to non-existing path reference...

Jochem

Posted by Community Admin on 08-Oct-2012 00:00

Jochem,

Also, don't try to reference a file that isn't in the Global folder. I was trying to slip a reference to a file that was in a subdirectory of Global...no dice. It didn't like references to files outside of Global either...

I ended up just dumping my generated file inside Global and hoping :)

Posted by Community Admin on 08-Oct-2012 00:00

@Tim,

You've spent some quality time on it I see :)

Sounds like a smart route, but how are you avoiding synchronization issues? When I re-publish with Thunder, that file would get wiped no? And if I downloaded it into VisualStudio, it would become a 'static' file no?

Given the fact that 'layout_transformations.css' is also being loaded prior to the theme stylesheets I'd say we <stupidmatrixquote> shouldn't try to think outside-of-the-box but realize there is no box</stupidmatrixquote>

J.

Posted by Community Admin on 09-Oct-2012 00:00

This is the type of discussion that would be neat on mvpeeing.com FYI ;)

Anywho, clearly this even being an issue means we would GREATLY appreciate some work by the Big T to allow us to properly structure our sites the way we want and place things where we want in our mark up. Everyone who's dealt with sitefinity and external masterpages <strong><b>has</b></strong> script issues...

I like the placeholder idea personally. Telerik would just need to look for it, and insert whatever into there. Means we can tell SF where the auto-gen bits go.

Like Peter\telerik have a new script control to put things in the headers\footers, but it's not a native thing to sitefinity where it should be...and it doesn't give us back that control. Now if it integrated with the above placeholder type idea...NEAT! But I find myself hitting jquery\plugin\kendo errors way more often than I like in sitefinity, so PLEASE just do something guys :/

Steve

This thread is closed