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

Forums / Designing & Styling / CSS Load Order

CSS Load Order

10 posts, 0 answered
  1. Stephanie
    Stephanie avatar
    19 posts
    Registered:
    16 Mar 2011
    10 May 2011
    Link to this post
    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
  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    30 Nov 2016
    12 May 2011
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Stephanie
    Stephanie avatar
    19 posts
    Registered:
    16 Mar 2011
    12 May 2011
    Link to this post
    Stanislav,

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


    Thank you,

    Steph
  4. Stephanie
    Stephanie avatar
    19 posts
    Registered:
    16 Mar 2011
    16 May 2011
    Link to this post
    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
  5. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    30 Nov 2016
    16 May 2011
    Link to this post
    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
    body
    {
      background-color:Red; !important;
    }
    in the "bcss.css" file and this rule should be applied if they were loading alphabetically. In the xml file I specified "bcss.css" to be loaded before "acss.css" which has a red background color. Page loads blue, when I remove the cssLoadOrder file the page loads red.

    Please write back if you have more problems with this issue so we can find other ways to resolve it.

    Regards,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Stephanie
    Stephanie avatar
    19 posts
    Registered:
    16 Mar 2011
    16 May 2011
    Link to this post
    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?

    
    
    <meta name="Generator" content="Sitefinity 4.1.1395.0 PU" /><link href="/Telerik.Web.UI.WebResource.axd?compress=0&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2011.1.413.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen%3a71598907-ed61-48cf-848a-7bcbb14d6dd6%3a92753c09%3a7d245c43%3bTelerik.Sitefinity.Resources%2c+Version%3d4.1.1395.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen%3ac58a2477-603d-4b5e-87a2-ca44c02d9ecd%3a44911412%3ab5bf473e%3acc007e78" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/cssTesting/App_Themes/cssTesting/global/red.css" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/cssTesting/App_Themes/cssTesting/global/blue.css" type="text/css" rel="stylesheet" /></head>
     
    Also, in your code you added  !important;  to the background color, do I actually need this?  In my real project I have 5 different stylesheets that need to be loaded.  I don't know what I would put !important; on, nor do I want to go through all 5 files and put !important; on every element.

    Thank you,

    Steph
  7. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    30 Nov 2016
    17 May 2011
    Link to this post
    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

    body#myid { color: blue; }
    body.MyClass { color: red;}
    body {color: yellow;}

    the first one will be applied because it is most specific. In your case maybe blue is positioned in your load order as last and therefore it is applied. I added !important just to illustrate the !important rule will be overwritten and ignored if in  the load order !important rule in not last.

    Please review the information provided and if you have any more problems with this issue we will be happy to review your project.

    Greetings,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Steve
    Steve avatar
    16 posts
    Registered:
    14 Jul 2010
    01 Jul 2011
    Link to this post
    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
  9. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    30 Nov 2016
    04 Jul 2011
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Mike
    Mike avatar
    208 posts
    Registered:
    10 Dec 2007
    25 Jun 2012
    Link to this post
    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.
10 posts, 0 answered