Right and Wrong ways to apply a CSS file to Brand a Publishing Site Collection

Posted on by

So here’s something I ran into earlier this week. A friend of mine made a CSS file to brand a publishing site collection that we are working with. Quiz time: What’s the right way to apply a custom css file to the site collection?

The first way we tried was to add a tag to our custom master page.

In the master page we were working with, it said:

                <Sharepoint:CssLink runat=”server”/>

                <!–Styles used for positioning, font and spacing definitions–>

                <SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/controls.css %>” runat=”server”/>

                <SharePoint:CssRegistration name=”<% $SPUrl:~SiteCollection/Style Library/zz1_blue.css%>” runat=”server”/>

So we added the following line after the above lines.

                <SharePoint:CssRegistration name=”<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/OurCustom.css%>” runat=”server”/>

And that mostly worked. Except for the site actions menu. Why?

Well, when we view source on a resulting page, this is what I see:

<link rel=”stylesheet” type=”text/css” href=”/Style%20Library/en-US/Core%20Styles/controls.css”/>

<link rel=”stylesheet” type=”text/css” href=”/Style%20Library/zz1_blue.css”/>

<link rel=”stylesheet” type=”text/css” href=”/Style%20Library/en-US/Core%20Styles/OurCustom.css”/>

<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D”/>

Did you see that? The <Sharepoint:CssLink> tag was generating the <link> to core.css AFTER all the other css files, even though it came first in the master page. Sneaky!

So this is the WRONG way to apply our CSS.

The right way is … <drum roll /> to use the site settings web pages! On the page that lets you choose a .master page for your publishing site, you can specify one CSS file ( the “Alternate CSS URL”).

(This picture is airbrushed because it came from an environment I am using for a client, and I need to protect client confidentiality.)

If you do this, then when you view source in the resulting pages on the site, the URL for the custom CSS file comes after core.css, and therefore overrides it and behaves as expected.

There are also programmatic, Feature-based ways to apply custom branding that are addressed in Pattison and Larson’s WSS 3.0 book, “Inside Microsoft Windows SharePoint Services 3.0” in chapter 3, especially pages 97 and 98.

–Michael