SharePoint's core.css stylesheet: Put it to where it belongs! « Michael Hofer

SharePoint's core.css stylesheet: Put it to where it belongs!

When rendering CSS stylesheets, SharePoint puts core.css always as the last stylesheet. This post is about how to change this sometimes unwanted behaviour.

OK, why bother with how CSS Stylesheets are rendered? Imagine you create your own Stylesheet overriding a lot of the SharePoint styles defined in core.css (and as you know, there are really "some" styles you might override Cool ). Now, if you follow the SharePoint "standard" approach and add your StyleSheet using the <SharePoint:CssRegistration> webcontrol, you'll always have the problem that the Core.css stylesheet (the one you're actually overriding…) is rendered AFTER your custom stylesheet. Result: All your work is for nothing, since the last one wins when styles will be applied to your web page… So, our friend "core.css" will always be the winner.

There are several approaches how to handle this problem, they are very well documented by Heather Solomon. My approach is somewhat different, though.

I've examined (thanks to .NET Reflector once more), the webcontrols CssRegistration and CssLink. CssRegistration is used to add custom CSS stylesheets using a "standard" approach with WebControls (thus not hardcoding it). CssLink does not accept any input but just renders all registered Stylesheets that are present in the SPContext where the page is rendered. The problem is that most of the methods, properties etc. are only internal and/or private. It is therefore practially impossible to really work with these types in the page declaration – not even in code…

However, there is one nice trick you could do – and in fact it works really well! Let's create a class that inherits from CssLink:

using System;
using System.IO;
using System.Web.UI;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint;

namespace MichaelHofer.SharePoint.PublishingEnhancements
{
    public class EnhancedCssLink : CssLink
    {
        public EnhancedCssLink() : base() { }

Now override the render method and do the "magic": Let the base class render its content, split the rendered "<link>" tags (they are separated by a line-break) and put the last element (= always core.css) on top. But this is not all, you could also do some more stuff. Example? Why not skip rendering of core.css when the current user is an anonymous user who looks at your internet page in "view-only" mode? In these cases, you won't need the core.css most probably… So why not take the overhead away? See this nice blog post for details!

Anyway, back to business, this is the override of the "Render" method:

        protected override void Render(System.Web.UI.HtmlTextWriter output)
        {
            // Let base render the stylesheets
            StringWriter sw = new StringWriter();
            base.Render(new HtmlTextWriter(sw));
            string renderedOutput = originalSw.ToString();

            // Split the styleSheets into an array
            string[] styleSheets = renderedOutput.Split(new char[] { '
' }, StringSplitOptions.RemoveEmptyEntries);
            if (styleSheets.Length == 0)
            {
                output.Write(renderedOutput);
            }
            else
            {
                string[] reorderedStyleSheets = new string[styleSheets.Length];
                for (int i = 1; i < styleSheets.Length; i++)
                {
                    reorderedStyleSheets = styleSheets[i - 1] + "
";
                }
                // core.css is always the last stylesheet –> put it in front!
                reorderedStyleSheets[0] = styleSheets[styleSheets.Length - 1] + "
";
                output.Write(string.Concat(reorderedStyleSheets));
            }
        }
    }
}

That's all! Now compile and deploy (put to GAC and register as safe control, or build a SharePoint solution; see my previous posts for details).

In your master page, declare your assembly. Example:

<%@ Register Tagprefix="PublishingEnhancements" Namespace="MichaelHofer.SharePoint.PublishingEnhancements" Assembly="MichaelHofer.SharePoint.PublishingEnhancements, Version=1.1.0.0, Culture=neutral, PublicKeyToken=7ce575c89ea427a4" %>

And instead of <SharePoint:CssLink> use now your own web control. Example:

<PublishingEnhancements:EnhancedCssLink runat="server"/>

Here you go, all problems with core.css solved, this is what you'll get rendered:

This entry was posted on Sunday, July 15th, 2007 at 5:25 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Michael Hofer – SharePoint Blog

SharePoint's core.css stylesheet: Put it to where it belongs!

Leave a Reply