SP2010 Branding Tip #3 – Getting your CSS to be the last to load 8

In SharePoint 2007 getting your CSS to load last AFTER core.css was one of the major challenges we had to struggle with. This is critical because of the way CSS cascades, generally speaking if everything else is the same about two CSS rules, the last one loaded takes precedence. Well, I have some good news for everyone, in SharePoint 2010, we don’t have to struggle with this any more, now Microsoft has provided us with a property in called “After”. You simply tell the CssRegistration tag which CSS file you want to load you custom CSS AFTER, like this:

  • Reply Randy Drisgill Nov 6,2009 11:18 am

    One nice thing is the server does some caching, so most connections won’t notice a flash of old css. At least I haven’t had clients complain about it yet.

  • Reply pinkpetrol Nov 6,2009 11:21 am

    How are you finding the out of the box css with all overflow-x/y settings?

    Took me ages last night to get it workable state and to work/look nice without them all. Again so much rubbish inserted into a product!

  • Reply Glenn Haworth Nov 6,2009 4:35 pm

    TBH I never found this much of a problem as I tended to use the additionalPageHead delegate control to load any custom CSS.

  • Reply whodatrd Nov 6,2009 4:54 pm

    Namely the big thing in 2007 was SharePoint:CssRegistration would put the CSS in alpha order before core.css. If you declared your own after it (in additionalpagehead or wherever, you were golden) but it still tripped people up.

  • Reply Tonyp Dec 24,2009 5:34 am

    That’s very useful!!
    Keep the tips coming, they are very useful.

  • Reply flippnbits May 7,2010 3:24 pm

    I’ve been reading your articles about branding, very informative, thank you very much.

    I’m trying to theme-enable a custom stylesheet. I’m using the starter master page from codeplex and I have customized portions of it. I created a custom CSS file. I have tried the following to no success. In my master page, I reference the CSS in the Style Library using the following:

    Unfortunately no link tag is rendered in the output HTML and that IS the correct address. However, when I change the location of the CSS to be in the _layouts folder and point the Cssregistration tag there it does render the link tag:

    Any idea where I am going wrong?

  • Reply Randy Drisgill May 7,2010 4:18 pm

    Flippnbits, can you send me an email from the contact on my blog. The code you used got stripped and I think I have an idea for you. Make sure your CSS is in the Themable folder AND that it is PUBLISHED.

  • Leave a Reply