Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I'm developing a web part which needs some custom CSS files. So I'm using the CssRegistration class to add them to the page header.

The code registers 4 CSS files which got deployed to the layouts folder by the web part feature. A fifth CSS files is optionally registered when there's a path to it set in the web part's property AdditionalCss. The CSS files should be inserted in the header after all SharePoint CSS files and should be sorted in the order they were added by code.

The code I used is the following:

var contentCss = new CssRegistration 
                 { Name = "/_layouts/MyWebPart/css/content.css", 
                   RevealToNonIE = true };

if (SPContext.Current.Web.UIVersion == 4)
     contentCss.After = "corev4.css";
else
     contentCss.After = "core.css";

Controls.Add(contentCss);

var customCss = new CssRegistration 
                { Name = "/_layouts/MyWebPart/css/cn_custom.css",
                  After = contentCss.Name, RevealToNonIE = true };
Controls.Add(customCss);

var styleCss = new CssRegistration 
               { Name = "/_layouts/MyWebPart/css/styles.css", 
                 After = customCss.Name, RevealToNonIE = true };
Controls.Add(styleCss);

var colorsCss = new CssRegistration 
                { Name = "/_layouts/MyWebPart/css/colors.css",
                  After = styleCss.Name, RevealToNonIE = true};
Controls.Add(colorsCss);            

if (!string.IsNullOrEmpty(AdditionalCss))
{
    var webPartCustomCss = new CssRegistration 
                           { Name = AdditionalCss, 
                             After = colorsCss.Name, 
                             RevealToNonIE = true };            
     Controls.Add(webPartCustomCss);
}

When I add the web part to a page all CSS files are added to the page as expected. Except the files are sorted in the wrong order.

Without the custom CSS file the order is: (link's rel- and type-attribute were removed for a better overview)

...
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>

With the custom CSS file the order is:

... 
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/sites/mysite/Style%2520Library/de-de/test.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>

As you can see both cases provide a totally different order and the CSS files were never sorted in the order they were added by code.

With this strange behavior the whole CssRegistration class is not very useful as you cannot relay that the CSS files are always in the same order. This makes designing with CSS nearly impossible.

share|improve this question
1  
Does anybody have insights into this issue? I have 5 css file. When rendered the last 2 CSS files flip positions. Is this a MS bug? –  user2434 Feb 17 '11 at 4:31
add comment

3 Answers 3

I've also observed what you have; beyond ensuring that your CSS comes after core.css/corev4.css, the CSSRegistration.After property plainly doesn't work. I've extensively tested CssRegistration by using it to link 10 different CSS files into one user control, and it completely ignored the dependencies I specified. Furthermore, the ordering seems completely arbitrary - I couldn't discern any sort of pattern.

I'm thinking of rolling my own version of CssRegistration which actually works.

share|improve this answer
add comment

Have a look @

http://singchan.com/2009/12/29/branding-sharepoint-2010-collaboration-sites-part-2-in-a-series/

Thanks,

Ashish

share|improve this answer
    
Thanks, I know this page. But none of the tips helped me. Even applying the CssRegistration objects in reverse order didn't help. Then the order is: content.css, styles.css, cncustom.css, colors.css. So again the order is not the one I would expect. –  Flo Nov 23 '10 at 13:30
add comment

Remember when you use the css registration tag, you have a "after" property.

meaning if u got 5 css files called: 1.css, 2.css, ..., 5.css you can set the after property on the registration of 2.css to "1.css". This will execute the second css file after the firts one has been loaded...

If you want the thirth file to be executed after the second file u just put the after property on the 3.css file to "2.css".

share|improve this answer
    
As you can see in my code snippet above, I'm already using the After property. –  Flo Nov 23 '10 at 13:27
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.