+1-888-365-2779
Try Now
More in this section

Forums / Suggestions / Gaining control over theme & script loading in the head

Gaining control over theme & script loading in the head

9 posts, 0 answered
  1. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    05 Oct 2012
    Link to this post
    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. https://developers.google.com/speed/docs/best-practices/rtt#PutStylesBeforeScripts

    ---
    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.
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    05 Oct 2012
    Link to this post
    +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
  3. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    06 Oct 2012
    Link to this post
    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?
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    07 Oct 2012
    Link to this post
    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
  5. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    07 Oct 2012
    Link to this post
    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.
  6. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    08 Oct 2012
    Link to this post
    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
  7. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    08 Oct 2012
    Link to this post
    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 :)
  8. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    08 Oct 2012
    Link to this post
    @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.
  9. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    09 Oct 2012
    Link to this post
    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
9 posts, 0 answered