{"id":141,"date":"2009-12-29T16:15:45","date_gmt":"2009-12-30T00:15:45","guid":{"rendered":"http:\/\/singchan.com\/?p=141"},"modified":"2010-03-01T13:50:47","modified_gmt":"2010-03-01T21:50:47","slug":"branding-sharepoint-2010-collaboration-sites-part-2-in-a-series","status":"publish","type":"post","link":"https:\/\/singchan.com\/wordpress\/2009\/12\/29\/branding-sharepoint-2010-collaboration-sites-part-2-in-a-series\/","title":{"rendered":"Branding SharePoint 2010 Collaboration Sites – Part 2 in a Series"},"content":{"rendered":"

In part one<\/a> of this series on branding SharePoint 2010 collaboration sites I posted a bit about how the new Theming engine works in SharePoint 2010. In this post, we’ll be going over the new and improved CSSRegistration<\/strong> control in SharePoint 2010.<\/p>\n

A history lesson; the CSSRegistration control in SharePoint 2007<\/h3>\n

The CSSRegistration control in SharePoint 2007 basically has one property you can set, the Name<\/strong> is the Url to the CSS file that you want to register. When you register a style sheet through the control, it adds the CSS file to an alphabetically sorted<\/em> list.<\/em> The style sheets in this list are then emitted as HTML <link> elements by the CSSLink<\/strong> control.<\/p>\n

If you required one CSS file to be emitted before another, you would need to name them accordingly. For example:<\/p>\n

<SharePoint:CSSRegistration Name="foo.css" runat="server" \/>\r\n<SharePoint:CSSRegistration Name="bar.css" runat="server" \/><\/pre>\n
Even though I registered foo.css<\/em> before bar.css<\/em>, the HTML on the rendered page would look like so:<\/p>\n
<link rel="stylesheet" type="text\/css" href="bar.css"\/>\r\n<link rel="stylesheet" type="text\/css" href="foo.css"\/>\r\n<link rel="stylesheet" type="text\/css" href="\/_layouts\/1033\/styles\/core.css?rev=..."\/><\/pre>\n
bar.css<\/em> would come before foo.css<\/em> and what’s this core.css<\/em> doing here? Somehow, someone at MS decided that the core.css containing ALL of the base CSS rules for WSS should override any custom CSS!<\/p>\n
As a workaround, you could set the DefaultUrl<\/strong> property for the CSSLink control to point to a single CSS file that would come after core.css, and then use @import to link to any additional custom CSS files.<\/p>\n
The fact that core.css was emitted after any style sheets registered using CSSRegistration made the CSSRegistration control all but useless in 2007.<\/p>\n
The shiny new CSSRegistration control in SharePoint 2010<\/h3>\n
So things are much better in the SharePoint 2010 world. If you examine the documentation for the SharePoint 2010 version of the CSSRegistration control<\/a>, you’ll find the addition of the following properties, which currently have no descriptions to their usage in the SDK:<\/p>\n
RevealToNonIE (boolean)<\/h4>\n
I assume this property would allow you to register IE-only style sheets.\u00c2\u00a0 This doesn’t seem to be working in Beta 2 though as it doesn’t matter whether I set this to true or false, the CSS files would get emitted regardless of the browser I was using.<\/p>\n
ConditionalExpression (string)<\/h4>\n
Another assumption that this would allow us to set certain conditions in order for the style sheet to appear in HTML. Nothing at all in the way of documentation nor could I find any examples in the 14 Hive as of Beta 2.<\/del><\/p>\n
This property is an Internet Explorer Conditional Comment<\/a>. For example, if we wanted to link to a style sheet specific to IE 7 or greater, we can do this:<\/p>\n
<SharePoint:CSSRegistration Name="foo.css" ConditionalExpression="gte IE 7" runat="server" \/><\/pre>\n
The following markup would be emitted:<\/p>\n
\r\n<!--[if gte IE 7]>\r\n<link rel="stylesheet" type="text\/css" href="foo.css"\/>\r\n<![endif]-->\r\n<\/pre>\n
After (string)<\/h4>\n
This property is what was sorely missing in 2007. We can now tell the CSSLink control to emit the registered style sheet after another CSS file. You can either define just the leaf filename, ie bar.css<\/em> or the path to the CSS file, ie \/foo\/bar.css<\/em>. If you don’t use the After property, style sheets will still be emitted by alphabetical order. For example:<\/p>\n
<SharePoint:CSSRegistration Name="bar.css" After="foo.css" runat="server" \/>\r\n<SharePoint:CSSRegistration Name="foo.css" runat="server" \/><\/pre>\n
bar.css<\/em> is emitted after foo.css<\/em> because we specified the After<\/strong> property when we registered bar.css<\/em>:<\/p>\n
<link rel="stylesheet" type="text\/css" href="foo.css"\/>\r\n<link rel="stylesheet" type="text\/css" href="bar.css"\/>\r\n<link rel="stylesheet" type="text\/css" href="\/_layouts\/1033\/styles\/Themable\/corev4.css?rev=..."\/><\/pre>\n
corev4.css IS STILL emitted after everything else for whatever reason, unless you use the After=”corev4.css”<\/strong> property when registering AND there are a few gotchas that you need to be aware of.<\/p>\n
Gotcha 1: You’re never sure of the sort order<\/h5>\n
As of Beta 2, there’s some weirdness when you register multiple style sheets that all require to be after the same CSS file. They are no longer sorted alphabetically but in most cases they end up being last in first out:<\/p>\n
<SharePoint:CSSRegistration Name="1.css" After="corev4.css" runat="server" \/>\r\n<SharePoint:CSSRegistration Name="2.css" After="corev4.css" runat="server" \/>\r\n<SharePoint:CSSRegistration Name="3.css" After="corev4.css" runat="server" \/><\/pre>\n
I was expecting 1, 2, 3… but instead I get 3, 2, 1…<\/p>\n
<link rel="stylesheet" type="text\/css" href="\/_layouts\/1033\/styles\/Themable\/corev4.css?rev=..."\/>\r\n<link rel="stylesheet" type="text\/css" href="3.css"\/>\r\n<link rel="stylesheet" type="text\/css" href="2.css"\/>\r\n<link rel="stylesheet" type="text\/css" href="1.css"\/><\/pre>\n
Gotcha 2: I need something AFTER another thing…<\/h5>\n
The other thing to take note on is when you need to define nested After. For example, I need to make sure that the style sheets are emitted in the order 1, 2, 3, 4:<\/p>\n
<SharePoint:CSSRegistration Name="1.css" runat="server" \/>\r\n<SharePoint:CSSRegistration Name="2.css" After="1.css" runat=\u00e2\u20ac\u009dserver" \/>\r\n<SharePoint:CSSRegistration Name="3.css" After="2.css" runat="server" \/>\r\n<SharePoint:CSSRegistration Name="4.css" After="3.css" runat="server" \/><\/pre>\n
We don’t get what we would expect the result to be, instead it comes out as 1, 4, 3, 2:<\/p>\n
<link rel="stylesheet" type="text\/css" href="1.css"\/>\r\n<link rel="stylesheet" type="text\/css" href="4.css"\/>\r\n<link rel="stylesheet" type="text\/css" href="3.css"\/>\r\n<link rel="stylesheet" type="text\/css" href="2.css"\/><\/pre>\n
It looks like as a general rule of thumb, you should register the style sheet which comes after another one FIRST. So in order to get 1, 2, 3, 4 we need to define our registration like so:<\/p>\n
<SharePoint:CSSRegistration Name="4.css" After="3.css" runat="server" \/>\r\n<SharePoint:CSSRegistration Name="3.css" After="2.css" runat="server" \/>\r\n<SharePoint:CSSRegistration Name="2.css" After="1.css" runat="server" \/>\r\n<SharePoint:CSSRegistration Name="1.css" runat="server" \/><\/pre>\n
EnableCssTheming (boolean)<\/h4>\n
Remember those “Themable folders” and compile time directives in the CSS files I mentioned about in Part 1? The EnableCssTheming property tells the SharePoint 2010 theming engine to recompile the style sheet using any directives found within the registered CSS file if the file’s location is in one of those “Themable” folders. EnableCssTheming is “true” by default, you have to explicitly set it to “false” if you do not want the registered style sheet to be parsed and re-compiled.<\/p>\n
For example:<\/p>\n
<SharePoint:CSSRegistration Name="<% $SPUrl:~sitecollection\/_layouts\/1033\/Styles\/Themable\/foo.css %>" runat="server" \/><\/pre>\n
If we don’t have a theme selected, the HTML emitted will be:<\/p>\n
<link rel="stylesheet" type="text\/css" href="\/_layouts\/1033\/Styles\/Themable\/foo.css"\/><\/pre>\n
But if there’s a theme applied to a site, it will be in one of two locations, where [1234567] and [12345678] are hex values that represent the theme name and CSS file paths. The ctag QueryString parameter is a simple integer counter used for cache invalidation. It increments up every time a web’s theme gets changed.<\/p>\n
If the theme was applied through the web UI:<\/p>\n
<link rel="stylesheet" type="text\/css" href="\/[WEB PATH]\/_themes\/[COUNTER]\/foo-[12345678].css?ctag=[COUNTER]"\/><\/pre>\n
Or, if the theme was set programmatically using the ThmxTheme<\/a> class and shareGenerate was defined as “true” it will be located here:<\/p>\n
<link rel="stylesheet" type="text\/css" href="\/_catalogs\/theme\/Themed\/[1234567]\/foo-[12345678].css?ctag=[COUNTER]"\/><\/pre>\n
Just to re-iterate, the two<\/del> three locations where the “Themable” folder can be located are:<\/p>\n
    \n
  1. In the “14 hive” at %ProgramFiles%\\Common Files\\Microsoft Shared\\Web Server Extensions\\14\\TEMPLATE\\LAYOUTS\\[LCID]\\STYLES\\Themable<\/em>;\n
    Where [LCID] is the Locale ID. In North America, the default is “1033<\/strong>” for English (US).<\/p>\n<\/li>\n
  2. In each web’s Style Library\/Themable<\/em>. These CSS files only affect the specific web and all languages.<\/li>\n
  3. In each web’s Style Library\/[LANG]\/Themable<\/em>.\n
    These CSS files only affect the specific web and a specific language. In North America, the default is “en-US<\/strong>“<\/p>\n<\/li>\n<\/ol>\n
    You can place your CSS files inside sub-folders of Themable for neatness but not the other way around… \/Style Library\/Themable\/foo\/bar.css<\/em> will be recompiled by SharePoint 2010’s theming engine while \/Style Library\/foo\/Themable\/bar.css<\/em> will not.<\/p>\n
    In the next episode\u00e2\u20ac\u00a6<\/h3>\n
    Whew! We’ve now gone through how to register a style sheet so that it’s compatible with the new SharePoint 2010 theming engine.<\/p>\n
    My next post will be how to get our custom style sheets onto the out-of-the-box collaboration sites without having to create custom site templates or master pages. We’ll revisit an old friend (or new acquaintance to some), the Delegate Control<\/strong>!<\/p>\n
    UPDATE:<\/strong><\/p>\n