PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

SharePoint MasterPages CSS Registrations Approaches

Posted by PANVEGA on April 1, 2009

If you look closely to the CSS Registration in the MasterPage Header,  there are tokens here that the system replaces at runtime. Let’s examine one further, looking at the source code and then what is rendered in the browser for an example site:

1. Example

<SharePoint:CssLink runat=”server” DefaultUrl=”/Style Library/yourCSSfile1.css”/>
<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/yourCSSfile2.css %>” runat=”server”/>

Rendered as:

<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/controls.css?rev=EhwiQKSLiI%2F4dGDs6DyUdQ%3D%3D”/>
<link rel=”stylesheet” type=”text/css” href=”/_wpresources/RadEditorSharePoint/4.5.0.0__1f131a624888eeed/RadControls/Editor/CssEditor.css”/>
<link rel=”stylesheet” type=”text/css” href=”/Style%20Library/yourCSSfile1.cs”/>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css?rev=yc7T90GBeB5Wkb4r5wtwNg%3D%3D”/>

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

SharePoint reders the default MasterPage CSS references and your custom CSS as well, when your apply for instance:

<SharePoint:CssLink runat=”server” DefaultUrl=”/Style Library/yourCSSfile1.css”/>

2. Example

If you only have the default Reference in your MasterPage:

<SharePoint:CssLink runat=”server”/>

Rendered as:

<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/controls.css?rev=EhwiQKSLiI%2F4dGDs6DyUdQ%3D%3D”/>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/HtmlEditorCustomStyles.css?rev=8SKxtNx33FmoDhbbfB27UA%3D%3D”/>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/HtmlEditorTableFormats.css?rev=guYGdUBUxQit03E2jhSdvA%3D%3D”/>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css?rev=yc7T90GBeB5Wkb4r5wtwNg%3D%3D”/>

Sharepoint renderes the dafult CSS files for each MasterPage. In the example above it is the Default MasterPage.

3. Example

If just use the  SharePoint:CssRegistration, no CSS file is going to be applied, because SP needs the SharePoint:CssLink in minimum one css reference

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

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

4. Example

Reference in the first example above:

<SharePoint:CssLink runat=”server” DefaultUrl=”/Style Library/yourCSSfile1.css”/>

Rendered as:

<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/controls.css?rev=EhwiQKSLiI%2F4dGDs6DyUdQ%3D%3D”/>
<link rel=”stylesheet” type=”text/css” href=”/_wpresources/RadEditorSharePoint/4.5.0.0__1f131a624888eeed/RadControls/Editor/CssEditor.css”/>
<link rel=”stylesheet” type=”text/css” href=”/Style%20Library/yourCSSfile1.cs”/>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css?rev=yc7T90GBeB5Wkb4r5wtwNg%3D%3D”/>

Conclusion:

Sharepoint:CssLink is the control that actually renders the styles. So, for every style defined by a SharePoint:CssRegistration, SharePoint:CssLink will process all of the runtime tokens like ~language and render the CSS files. Let’s now look at the input again for blackband.master and the output

<head runat=”server”>
[snip]
<Sharepoint:CssLink runat=”server” / >
<!–Styles used for positioning, font and spacing definitions–>
<SharePoint:CssRegistration name=”<% $SPUrl:~SiteCollection/Style Library/~language/Core Styles/Band.css%>” runat=”server”/>
<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/controls.css %>” runat=”server”/>
<SharePoint:CssRegistration name=”<% $SPUrl:~SiteCollection/Style Library/zz1_black.css%>” runat=”server”/>
[snip]
</head>

And the result is…

<head>
[snip]
<link rel=”stylesheet” type=”text/css” href=”/sites/nopub/Style%20Library/en-US/Core%20Styles/Band.css”/>
<link rel=”stylesheet” type=”text/css” href=”/sites/nopub/Style%20Library/en-US/Core%20Styles/controls.css”/>
<link rel=”stylesheet” type=”text/css” href=”/sites/nopub/Style%20Library/zz1_black.css”/>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D”/>
[snip]
</head>

What do you notice here? There were only 3 registered CSS files in the master page. However, 4 CSS files were rendered to the browser. CORE.CSS, you will notice, has been rendered, despite the fact that it is not explicitly defined. What’s more, (and this is the important bit), CORE.CSS is always listed last.

This behaviour is not always a problem, but in many circumstances it can be. Imagine that you have your own overridden styles for example, pimpmysharepoint.master, refers to a style called pimpmysharepoint.css. The source code would look like this.

<Sharepoint:CssLink runat=”server” / >
<!–Styles used for positioning, font and spacing definitions–>
<SharePoint:CssRegistration name=”<% $SPUrl:~SiteCollection/Style Library/yourCSSfile1.css%>” runat=”server”/>

And the output is..

<head>
[snip]
<link rel=”stylesheet” type=”text/css” href=”/sites/Style%20Library/yourCSSfile1.css”/>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D”/>
[snip]
</head>

So CORE.CSS (which is a rather large file with a LOT of styles in it), will override my custom styles.
SP renders the other styles in alphabetical order. So even if I changed the order of the SharePoint:CssRegistration entries in the source, they will always render in alphabetical order. So, the gist of the issue here, is that you do not always necessarily want CORE.CSS to be rendered last.

Solution:

Just use your custom CSS file for your MasterPage:

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

Rendered as:

<head>
[snip]
<link rel=”stylesheet” type=”text/css” href=”/sites/Style%20Library/yourCSSfile1.css”/>
[snip]
</head>

Be careful when using the <Sharepoint:CssLink runat=”server” / > if you do not wonna have the default core.css

Good Luck

About these ads

2 Responses to “SharePoint MasterPages CSS Registrations Approaches”

  1. Drew said

    You’ve directly plagarised content from http://www.cleverworkarounds.com. When “borrowing” another’s intellectual property, you need at least site reference to it.

  2. Tesfaye said

    A big sigh from one confusing sharepoint twists. Thanks for sharing this great information.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: