SharePointlessness Rotating Header Image

July 2nd, 2012:

Making a Metro UI for SharePoint 2010

A while ago my friend Eric Harlan approached me asking if I could strip down a master page to its bare bones and make a Metro UI for SharePoint 2010. He had a project he wanted to put in place that would make the landing page of SharePoint look very much Metro.

As we started working on this project, we decided to share it with the community so that others could create their very own Metro UI landing pages.

When I started working on the master page for this project we quickly determined that we would also need a custom page layout to make the page editable in the browser. The project consists of a custom Master Page, a custom Page Layout, CSS and UI images.

We have created a very simple master page that has stripped away all navigation and left just the necessary items in the Ribbon for editing the page. This allowed us to create a blank page for the page layout to handle the web part zones for each of the Metro tiles.

In order to strip down the master page, I utilized an asp:Panel with its display status set to hidden to contain the content placeholders that we did not want to render in our page. Some of the important things to remember when working to strip down a master page is that you should not delete content placeholders from a master page.

Also when working on a master page there are lots of things to test. You should always test for the Dialog boxes as well as for the Web Part Editor. These are two elements of SharePoint 2010 that are important for editing your page properly within the browser.

For now this project is set up for just a landing page within a SharePoint 2010 site.

We will continue to update this project with suggestions or requests. The first is that we are already working with Paul Schaeflein (@paulschaeflein) today to package this as a sandboxed solution.

Please leave us feedback on the Codeplex project. We’d love to hear from you.

  1. Erik Akers – @erikakers
  2. Cathy Dew – @catpaint1
  3. Eric Harlan – @ericharlan