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:

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:

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:

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…

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..

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:

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

Good Luck

About these ads

This entry was posted on April 1, 2009 at 2:46 pm and is filed under CSS, MasterPage, MOSS. Tagged: CSS, MasterPage, MOSS. 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.

2 Responses to “SharePoint MasterPages CSS Registrations Approaches”

Drew said

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

Reply
Tesfaye said

November 26, 2010 at 7:50 pm
A big sigh from one confusing sharepoint twists. Thanks for sharing this great information.

Reply

PANVEGA’s Blog

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

Tag Cloud

Blog Stats

Archives

Blogroll

Recent Posts