CSS Load Order

Hello -

   I'm trying to create a new project in Sitefinity 4.1 and I have 5 different .css files that need to be loaded in a certain order.  I have the theme registered under the administration > settings > etc.  I also wrote a cssLoadOrder.xml and have that placed in App_Themes > Theme > Global folder.  However my layout is still off, and when I view the page source the .css files are being loaded alphabetically.  How can I fix this?  I performed the same steps for 4.0 and everything worked just fine.

Thank you,

Steph

Hello Stephanie,

Please excuse us for the inconvenience caused by this issue. This is a bug introduced with Sitefinity 4.1.1339 and it is already fixed in the internal builds. Sitefinity 4.1 Service pack will be available in the coming days with this issue officially removed.

Greetings,
Stanislav Velikov
the Telerik team

Stanislav,

     Thank you for the prompt reply.  I will be looking for the service pack coming soon!


Thank you,

Steph

Stanislav,

   I have downloaded the service pack for version 4.1 and upgraded my project to it, however, the CSSLoaderOrder.xml is still not working as it did in version 4.0.  The different style sheets are still being loaded alphabetically and not in the order I declared in the xml.  Please advise.  Or is there another way to add the stylesheets in the correct order to have my layout work?

Thank you,

Steph

Hi Stephanie,

It appears there is some problem at your end because I tested it again and it works. Let me walk your trough the steps.  Step 1 create a theme folder structure in your project visual studio solution as described in documentation      /App_Data/Sitefinty/WebsiteTemplates/YourTemplate/App_Themes/YourTheme. note that this folder structure is very important in order for your theme to apply. Step 2 add the css files you need and the cssLoadOrder.xml where you specify the load order. Step 3 register your theme in Sitefinity backend as described in the documentation. For my test I created two css files 1 named "acss" and "bcss" I put

Hi Stanislav,

    I created a new project.  I have added 2 css files in the App_Themes folder as explained in the documentation.
I have a red.css and blue.css.  I copy and pasted your css code from below for the body element, I changed the background-color to each respective color name of the file.  I registered my theme in the backend as explained in the documentation.

In the cssLoadOrder.xml I stated I wanted the red.css file to show first (in case it was still loading alphabetically), thus giving me a red background.  When the page loads it still gives me a blue background.

Using firebug the below code is what I get.  It is showing the correct order, but not until it loads a Telerik stylesheet first.  How do I get my stylesheets to show before that?

Hello Stephanie,

Thank you for your explanation. The Telerik style sheet that is loading first is the stylesheet that contains style only to your currently dragged widget ( for example navigation widget ). Sitefinity themes apply css to the page layout and display. The purpose of the load order is to overwrite some css rules and  the last loaded css rule is applied ( if the css rule is applied to body element the last css documet that specifies color to body will be applied ) NOTE: if the element body is specified like

I need to specify the specific media types that my CSS applies to e.g. print, screen etc.  Does the cssLoadOrder.xml have provisions for letting me specify that or should I toss the whole lot out and just reference in in the head?

thanks,
Steve

Hi Steve,

The CssLoadOrder.xml will allow you to specify the loading order of the css files in your Theme so you can overwrite styles and achieve the desired results if you have multiple repeating styling of one element.
The head section in a master page as you mention will be the place for media types. If you reference your css files from the head section in a master page you will not need the CssLoadOrder.xml as your css documents will be loaded with the order you reference them and will not be part of the theme.

Greetings,
Stanislav Velikov
the Telerik team

The documentation says I can put the App_Themes folder in the web app root, historically the place it belongs.  When I do this, Sitefinity does not respect the order specified in the cssLoadOrder.xml file.   Why can't I have the App_Themes folder anywhere I want?  If the theme is registered in Sitefinity, then it obviously knows where the Global folder is, so it should be able to load the cssLoadOrder.xml file, and do the right thing with the order of the CSS, no matter where the theme folder actually resides.

Frankly, I don't like having the App_Themes buried so deep in the folder structure.  If I need to refer to something in that folder structure, such as an image, the path is painfully long, and I have to depend on the internal mapping to the Sitefinity folder so that the URL doesn't include App_Data, which has been problematic at times. Moreover, this deep folder structure does me no good at all.

Can you fix the issue with cssLoadOrder.xml?  This restriction seems silly, especially since I have to manually create the WebsiteTemplates folder structure myself anyway.