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

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

SP2010 Branding Tip #9 – Turn on Anonymous Access 6

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

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

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

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

One of the really cool enhancements in SharePoint 2010 is the addition of the UseSimpleRendering property to the control. When UseSimpleRendering is set to True, the SharePoint navigation menu is rendered using a cleaner unordered HTML list. 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 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 11

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

SP2010 Branding Tip #5 – Handling unsupported browsers 5

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

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

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 8

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 called “After”. You simply tell the CssRegistration tag which CSS file you want to load you custom CSS AFTER, like this:

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

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 1

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