By Eric Harlan
Published: July 2, 2012
Updated: July 2, 2012
Print    Email

I wanted to introduce you all to a new project out on CodePlex. The MetroUI8 project is now live at http://sp2010metro.codeplex.com . The project really started from a desire to merge the new Windows 8 Metro look into a SharePoint 2010 master page. 

With the desire to have a “Splash” or landing page for  another project that will be launching soon (more on that shortly) with the decided to create our own.  Since this is a just a landing page meant to funnel viewers further into the SharePoint site and to specific content that is highlighted on the landing page, the master page and layout are fairly static. That said there is obviously a great deal more we can do with this project. Based on the feedback we get along with cool new features we have in mind like animated tiles and deployable via a WSP we will be making updates as we go along.

The project consists of five main areas:

• MetroUI Master Page
• MetroUI Css
• MetroUI Layout page
• Zip file of Metro Icons and background image
• Sandbox solution
  

The installation of the master page follows the standard process of deploying a SharePoint artifact to a SharePoint site collection:

1. Copy the MetroUI8.master file to your site collections Master page & layouts gallery. Make sure you approve and publish the file.
2. Copy the MetroUI8.aspx (page layout. Make sure you approve and publish the file.
3. Copy the MetroUI8.css file to your style library make note of which directly you drop it in (or if you create your own directory i.e. "custom" take note of that.)
4. Upload a background image you want to use for the backdrop of your master page to a  specified folder (like site assets folder)
5. Edit the master page line 25 and change the path to the MetroUI8.css file you uploaded to your style library
6. Edit the CSS at line 17 (body class) to reference the new image file you uploaded to site assets as your background.
7. In your "Pages" folder (or where every you've chosen to store your pages) create a new page using the MetroUI8 Layout page template.
8. Edit the page and add your content editor web parts to each Tile location. Obviously it doesn't have to be CEWP's but that’s what we've chosen to use with our tile icons.
9. Go to site Site Actions > Site settings > Welcome page and choose the new page you've just created as your landing page.
10. Enjoy

Hopefully this will allow you to create a nice looking Metro Style landing page for your SharePoint 2010 site.

Enjoy

Thanks to the others who helped build this project!

Erik Akers http://www.erikakers.com @erikakers

Cathy Dew http://www.sharepointcat.com @catpaint1

Paul Schaeflein - http://www.schaeflein.net/blog/default.aspx - @PaulSchaeflein

Submit Article

154978 Views - View Comments (0)