November 2009 - Randy Drisgill SharePoint Branding Blog

Starter Master Pages for SharePoint 2010 (Formerly Known as Minimal Master Pages)

In the tradition of those SharePoint branding folks that came before me, I have put together two minimal master pages that can be used to start a SharePoint 2010 Branding project. They contain only very minimal HTML styling in order to accommodate some of the specific needs of SharePoint 2010 and are commented throughout. I hope you find them useful as a good starting point for creating branded SharePoint sites. If you make improvements upon them that could be used to improve the Starter Master Page experience for others, please share the changes with me so that I can potentially roll them into the main distribution.

Note: With SharePoint 2010, Microsoft has actually included their own master page called minimal.master which has a specific use for pages that will have very minimal chrome. Because of this, I am using the term Starter Master Page for my Master Pages instead of the term Minimal Master Page.

Here is the link to download the CodePlex project:

Starter Master Pages for SharePoint 2010

(http://startermasterpages.codeplex.com/)

I have copied and pasted my notes from the CodePlex site here, please read them if you intend to use the Starter Master Pages:

I am placing them on CodePlex and will be releasing updated versions as time goes on
They are currently considered a beta release
Please send feedback (here or on my blog, http://blog.drisgill.com) on problems or changes that you think would help everyone
Use at your own risk!
There are two versions of my Starter Master Pages:
- _starter.master - Specifically for use with SharePoint Server 2010
- _foundation_starter.master - Specifically for use with SharePoint Foundation 2010
These two versions are extremely similar. The primary difference being the navigation and corresponding data sources
The Starter Master Pages should work with all out of the box SharePoint 2010 pages including Application pages (like Site Settings) and Lists and Documents
Replace the word “SiteName” throughout the code with your project site’s name and directory
There are some minimal styles included and are commented accordingly.
All styles and images are loaded from the Style Library with simple “/Style Library/sitename” references. This helps with viewing them in Design View in SharePoint Designer 2010. Some deployment instances may require a more robust path usage (such as branding that is deployed to Site Collections that are not at the root web site). In these cases you can either place your styles and images in the 14 folder on the server (_layouts) or use the $SPUrl variable (more info here: http://msdn.microsoft.com/en-us/library/ee354190.aspx#odcsp2007RealWorldBrand_CreatingBrandinSP)
The SharePoint 2010 standard Ribbon controls are being used. This is the same code as in v4.master and NightAndDay.master only with the addition of some comments
The Starter Master Pages employ the standard SharePoint 2010 technique of forcing the Ribbon to “stick” to the top of the page. This is why the ribbon and main body areas are wrapped in specific div classes
There are two div’s that have custom classes, “customLeftNavHolder” and “customBodyHolder”. These are required to handle the left navigation and main content areas with minimal HTML and also will allow for hiding of the left navigation when SharePoint 2010 Dialogs are in use
There are several div’s throughout that have a class of “s4-notdlg”. This is the standard SharePoint 2010 method of hiding branding (like logos and navigation) from the SharePoint 2010 Dialog windows
I have tried to identify most of the ContentPlaceHolder’s that actually contain content in the out of the box SharePoint 2010 pages and included them in the displayable areas of the Starter Master Pages. All other unneeded (but required) ContentPlaceHolder’s are relegated to the hidden asp:Panel at the bottom of the master page.

Other optional things I have included because I think they are helpful (you can remove as needed, the approximate line number in _starter.master is included):

Line 24 - Favicon code
Line 92 - JavaScript to address the ActiveX Name.DLL issue (See http://support.microsoft.com/default.aspx/kb/931509 for more info)
Line 388 - Class “s4-nosetwidth” is being used to allow for fixed width branding (See http://msdn.microsoft.com/en-us/library/ee539981(office.14).aspx for more info)
Line 393 - An area for a header logo that has a link back to the home (you can replace this with the site icon and title if you prefer. See lines 308-317 from v4.master)
Line 498 - A footer area for a copyright notice
Line 503 - The Developer Dashboard code (which is turned on from STSADM or Powershell).
Line 571 - WarnOnUnsupportedBrowsers is being used at the very bottom of the Starter Master Pages to alert IE6 users that the browsing experience is deprecated

SP2010 Branding Tip #9 – Turn on Anonymous Access

Ok, its not really a branding tip, but I’m on a roll here. In SharePoint 2010 if you want to setup your site to allow anonymous visitors, the process is much like it is in SharePoint 2007 except that the ribbon is now part of of the process. While I have really gotten used to the ribbon, this option I find particularly confusing. Just like in SharePoint 2007 the process begins in Central Administration, either you set the web application to Allow Anonymous access in the initial web application creation screen OR you need to set it afterward. If you are going to set it after, click on Manage Web Applications and select a web application from the list and take a look at the ribbon:

You might be inclined to click Anonymous Policy as I was initially but this does NOT allow you to turn on Anonymous access. Instead click Authentication Providers:

From this menu you select an Authentication Provider:

The from the next menu you can check Enable anonymous access:

After you click save, the web application will allow Anonymous access to be set, but you have to set this from the actual web application. So now, navigate to the top level site collection for the web application and click Site Actions > Site Settings > Site Permissions. From that menu you can click Anonymous Access:

From there select Entire Web Site and click OK:

That’s all you have to do, now the site will be available for browsing by anyone. Really only the first step is confusing compared to SharePoint 2007.

SP2010 Branding Tip #8 – Alternate CSS can crash your site (until its fixed)

This is really less of a tip and more of a temporary gotcha that exists in most of the builds I have tried for SharePoint 2010. As I understand it, this problem won’t be fixed until AFTER the public beta that is scheduled to be released very very soon. When setting the Alternate CSS for your site, be very careful when using the Browse option:

When you use this to select an Alternate CSS the setting will use a full URL like this:

http://portal.contoso.com/Style Library/CustomStyle.css

Unfortunately having the full URL really freaks out SharePoint 2010 (until they fix this) and it tries to use a malformed URL, which in turn breaks your site completely. This is the error that it will return:

Cannot make a cache safe URL for "1033/styles/http://portal.contoso.com/Style Library/CustomStyle.css", file not found. Please verify that the file exists under the layouts directory.

As far as I can tell, if you do this to the top level of your site collection there is no way to fix your site without using some custom code or maybe a Powershell script. I could not find any way to get back to the setting screen and reset the Alternate CSS. For me it was just easier to blow away the site collection and create a new one. Note: if you instead do this to a subsite you can always navigate back to the top level site and reset the Alternate CSS to use the default styles and apply to all subsites.

Until this bug is fixed, instead of using the Browse button you should stick to just typing in a RELATIVE path to your Alternate CSS like this:

/Style Library/CustomStyle.css

You have been warned :)

SP2010 Branding Tip #7 – Using Simple Rendering in SharePoint Navigation

One of the really cool enhancements in SharePoint 2010 is the addition of the UseSimpleRendering property to the <SharePoint:AspMenu> control. When UseSimpleRendering is set to True, the SharePoint navigation menu is rendered using a cleaner unordered HTML list. Here is a sample of what the new HTML looks like when you view source:

<li class="static dynamic-children">
<a class="static dynamic-children menu-item"
href="http://www.google.com">
    <span class="additional-background">
      <span class="menu-item-text">Heading</span>
    </span>
</a>
<ul class="dynamic">
    <li class="dynamic">
      <a class="dynamic menu-item" href="/">
        <span class="additional-background">
          <span class="menu-item-text">Item</span>
        </span>
      </a>
    </li>
</ul>
</li>

As you can see this is much cleaner than the old Table structures that were used in SharePoint 2007. When I set out to style this new HTML it took me a bit to parse through the out of the box CSS to determine the best way to tackle it. Here is a commented version of the CSS classes that I used to style the new simple rendered top navigation:

/* item style */
.s4-tn li.static > .menu-item {
}

/* item style hover */
.s4-tn li.static > a:hover {
}

/* flyout holder */
.s4-tn ul.dynamic {
}

/* flyout item */
.s4-tn li.dynamic > .menu-item {
}

/* flyout item hover */
.s4-tn li.dynamic > a:hover {
}

For the most part you can take your old styles from the SharePoint 2007 navigation and apply them here (with some modification to account for cleaner HTML).

What if you want to hide the little arrows that appear next the navigation items that have flyouts (dynamic display levels)? Here is the CSS I used to hide them:

/* hide arrows for top level items with flyouts */
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal span.dynamic-children span.additional-background{
padding-right:0px;
background-image:none;
}

After some trial and error I was able to duplicate the current SharePoint 2007 top navigation for SharePoint911 using the Simple Rendering:

One last note, if all of this new cleaner HTML scares you and you don’t want to spend the time to convert your old CSS to work with the new Simple Rendering, you can always turn it off by setting UseSimpleRendering=”False” in the <SharePoint:AspMenu> control. With this set to false, the old less clean Table based navigation is used and all of your old CSS styles should work perfectly in SharePoint 2010.

SP2010 Branding Tip #6 – Mobile Browsers

One interesting feature of SharePoint 2010 is that it automatically shows a nice mobile experience when mobile devices browse the site. There is no need to type in the mobile URL (by appending /m to the URL) as you had to in SharePoint 2007. Here is a screenshot of what the SharePoint site looks like on my iPhone, I simply navigated to the usual site URL:

While this is terrific for intranet sites, its less than ideal for public internet sites, especially ones that have a lot of custom branding. In those cases, typically you would want smart phones like the iPhone to see a standard rendering of your site. So, how do we turn off the automagic mobile experience? There doesn’t appear to be a setting for this in the Site Settings or in Central Administration. I had to ask around on this one, and the SharePoint product team was kind enough to point me in the right direction. Turns out you need to edit the “compat.browser” file for your SharePoint site. To find this file, look in your IIS directory for your SharePoint site and look for the App_Browsers folder. Mine file was located at:

C:\inetpub\wwwroot\wss\VirtualDirectories\portal.contoso.com80\App_Browsers\compat.browse

This file has settings for MANY popular browsers, including most mobile browsers. In my example I want to change the mobile setting for the iPhone browser so I found this section:

<browser id="iPhoneSafari" parentID="AppleSafari">
        <identification>
            <userAgent match="iPhone" />
            <userAgent match="Mobile" />
        </identification>
        <capabilities>
            <capability name="isMobileDevice"                    value="true" />
            <capability name="canInitiateVoiceCall"              value="true" />
            <capability name="optimumPageWeight"                 value="1500" />
            <capability name="requiresViewportMetaTag"           value="true" />
            <capability name="supportsTouchScreen"               value="true" />
            <capability name="telephoneNumberDetectionDisabled" value="true" />
        </capabilities>
    </browser>

To turn OFF the automatic mobile version of the site for this phone, we just need to change isMobileDevice from True to False and save the file. With the isMobileDevice set to false, now when I browse my SharePoint site I see the standard branding:

SP2010 Branding Tip #5 – Handling unsupported browsers

If you haven’t heard the news, let me spell it out for you… SharePoint 2010 will support many major browsers including IE7, IE8, FF3.5 and Safari4, but there is one browser that will not be supported by the out of the box SharePoint 2010 experience: Internet Explorer 6! Here’s a shot of some of my SharePoint911 co-workers + one celebrating the news (thanks to Marcy Kellar) for the photo):

After we end our happy dance, its time to find a way to tell our users that IE6 isn’t supported. How can we handle this gracefully? Microsoft again comes to the rescue with a SharePoint Control to help.

<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>

If you place this control at the bottom of your master page, IE6 users will be greeted with a message like this:

That’s pretty nice and easy, but what if you want to do something even more likely to spur a response from these IE6 users? Check out this easy to use JavaScript file for displaying a nice graphical menu for selecting browser alternatives:

http://code.google.com/p/ie6-upgrade-warning/

When applied to my SharePoint site, I get a menu like this:

SP2010 Branding Tip #4 – Easily show a Favicon in SharePoint 2010

If you aren’t aware of what favicons are, they are the little icon that appears in the corner of the address bar of your browser and along with your bookmarks. Here is a shot of SharePoint911’s favicon:

Its really a minor thing, but it makes a surprisingly big impact on a branded page. In SharePoint 2007 we had to mess around with the typical HTML tag for the favicon:

<link rel="shortcut icon" href="/Style Library/sp911/favicon.ico" />

But, in SharePoint 2010 there is a special control for adding favicons:

<SharePoint:SPShortcutIcon runat="server" IconUrl="/Style Library/sp911/favicon.ico"/>

Ok, sure its technically more typing, but since its a control you can easily use things like $SPUrl to help with the paths.

SP2010 Branding Tip #3 – Getting your CSS to be the last to load

In SharePoint 2007 getting your CSS to load last AFTER core.css was one of the major challenges we had to struggle with. This is critical because of the way CSS cascades, generally speaking if everything else is the same about two CSS rules, the last one loaded takes precedence. Well, I have some good news for everyone, in SharePoint 2010, we don’t have to struggle with this any more, now Microsoft has provided us with a property in <SharePoint:CssRegistration> called “After”. You simply tell the CssRegistration tag which CSS file you want to load you custom CSS AFTER, like this:

<!-- loads the ootb core CSS –>

<SharePoint:CssLink runat="server" Version="4"/>

<!—loads our custom CSS AFTER corev4.css –>

<SharePoint:CssRegistration name="custom.css" After="corev4.css" runat="server"/>

Pretty cool, eh? What if you have more than one CSS to load after corev4.css? Well you can list more than one CssRegistration with the After=”corev4.css” but they actually get added beneath corev4.css in reverse order. So if you wanted the CSS to go in this order corev4.css, custom1.css, custom2.css you would list them like this:

<!-- loads the ootb core CSS –>

<SharePoint:CssLink runat="server" Version="4"/>

<!—loads our custom CSS AFTER corev4.css –>

<SharePoint:CssRegistration name="custom2.css" After="corev4.css" runat="server"/>

<SharePoint:CssRegistration name="custom1.css" After="corev4.css" runat="server"/>

Personally, I’m pumped to not have to deal with this anymore!

SP2010 Branding Tip #2 – Custom Master Pages and Dialog Boxes

So you have a nice custom master page and you are applying it all over your new SharePoint 2010 site, what happens when one of the new dialog boxes is loaded on the page (like when you click to edit a list item)? Guess what… your branded master page with logo and footer and everything will also apply to the much smaller modal dialog box that SharePoint pops up, see the screenshot for an example:

How do we fix this? Microsoft had the good sense to give us an easy CSS class to add to our html elements that we don’t want showing in dialog boxes, simply add s4-notdlg to the class, like this:

<div class="customFooter"> would become <div class="customFooter s4-notdlg">

For my design, I added this to the top, header, navigation, and footer div’s in my master page, and BAZINGA I get dialog boxes that have only a hint of my custom branding:

SP2010 Branding Tip #1 – Applying Custom Master Pages to _layouts Pages

I think rather than spend a lot of time posting lengthy blog posts about SharePoint 2010, I’m going to try instead to post several smaller SharePoint 2010 Branding Tips over the next few weeks. They will mostly be things that I have learned while trying to convert existing 2007 sites into SharePoint 2010. Here is Tip #1:

One FANTASTIC feature in SharePoint 2010 is the ability to apply custom master pages to your _layouts or Application pages. Long gone are the days of having to create a custom SharePoint Theme (or god forbid, customize the Application.master) to achieve this. However, as I learned the hard way, as always in SharePoint, “with great power comes great responsibility”. As obvious as this sounds after I say it, I swear this did not dawn on me until I tried it myself… so here it is…

If you are going to apply your heavily customized master page to the _layouts pages, you will probably need to remember to add in some critical content placeholders (as in, make sure you have them in your master page AND you are actually using them, not just hiding them in a hidden panel). Here are a few that I didn’t already have in use (there are probably more that you will need in edge cases, but I tested about 20 pages and these are the key ones that output important information):

SharePoint 2010 W3C xHTML Compliance?

Just wanted to make a quick post to clear up some things that I THINK are misconceptions about SharePoint 2010 and XHTML compliance. First a disclaimer: I don't work for Microsoft so I can't say for certain what the final product will be like, this is just my own assumption based on current knowledge / the current SharePoint Server 2010 that I have as of November 1st, 2009.

I've heard a lot of people inside and outside of the SharePoint Conference talking about WCAG, Cross-Browser, and XHTML in SharePoint 2010. From what I can tell these things are all true for SharePoint 2010:

WCAG 2 Compliant for accessibility needs
More cross browser friendly than before
Mostly table-less layout
Out of the box master pages will be based on the XHTML Strict DocType

Now for what I don't think will be true in SharePoint 2010

HTML source of the page will be XHTML compliant

I believe that SharePoint 2010 will be MUCH more W3C compliant than previous versions but from what I can tell, the resulting HTML page will not validate in the W3C XHTML Validator.

I'm not saying this is good nor bad, but I think people should be aware because I think a lot of folks that are reporting on this are getting confused by: A - The WCAG accessibility compliance & B - The use of XHTML DocTypes in the master pages. They are putting the two together to say that the page will be fully XHTML compliant. For example a lot of people are reporting "SharePoint 2010 is targeting standards based browsers (XHTML 1.0 compliant) including Internet Explorer 7, Internet Explorer 8 and Firefox 3.x". Note that this doesn't say that the page HTML will be XHTML compliant, just that the product team is targeting browsers that are XHTML compliant (as in Not IE6).

Just a heads up, in case you hear more random reports of compliance it usually refers to the WCAG compliance not W3C. Of course, I could be completely wrong, Microsoft could be one build away from shaming me into oblivion.

Ready to upgrade your SharePoint 2007 branding to SharePoint 2010?

Maybe, not quite yet… you are probably still waiting for the public beta to release… but when it does, this will probably be one of the first things you want to look at. While the Visual Upgrade feature in 2010 is going to be a nice way to temporarily see your upgraded site with your old branding, this mode is only meant to be used briefly while you learn how to actually convert the master page and other branding assets to 2010. Thankfully, there is an early release article on the MSDN that covers this process, check out:

Upgrading an Existing Master Page to the SharePoint Foundation Master Page

After reading through this list of steps, you may be wondering why you don’t have to change all of your Register tags at the top from 12 to 14 to point to the new assemblies… well lucky for all of us, Microsoft was kind enough to handle this for us with mappings in the web.config. While I think you should probably go ahead and switch to the 14 assemblies in your code eventually, everything will work perfectly for you if you just leave them pointing to the 12 assemblies for a while… pretty neat!

Randy Drisgill