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 8

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

SharePoint 2010 W3C xHTML Compliance? 5

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

Ready to upgrade your SharePoint 2007 branding to SharePoint 2010? 1

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

Editing SharePoint pages with IE8 driving you crazy with warning popups? 2

One thing I noticed right away when editing my SharePoint pages with IE8 was an annoying popup message that showed every time you navigate away from editing a page. “Are you sure you want to navigate away from this page?”: Want to know an easy fix for turning this message off? Check out this post: http://www.chakkaradeep.com/post/2009/07/11/IE8-to-SharePoint-e28098Are-you-sure-you-want-to-navigate-away-from-this-pagee28099.aspx