Saturday, May 21, 2011

Introduction to SharePoint 2010 Branding and WCM

Introduction

Before I came to Microsoft I was a consultant and when working with branding in SharePoint 2007 it could be hard to do high-end branding. If you go to http://www.wssdemo.com/livepivot/ you can find a ton of cool SharePoint 2007 sites however the level of effort could be high.

I have to say now with SharePoint 2010 it is so much easier. It really is. I am now able to do some high end branding in a day or two. Now albeit I take an existing; somewhat simple html/css template and apply it to SharePoint 2010. But at the end of the day, it is not rocket science.

Here are two quick examples of ones I was able to set up in a day. I will openly admit that I learned all my knowledge from the SharePoint 2010 Branding book by Wrox (book). This book is awesome and all of the code samples 100% work.

Here are two samples of HTML templates I was able to download and put directly into SharePoint.

clip_image001

This is the example we will be building.

clip_image003

I was able to download the HTML and CCS from sites like - http://www.freelayouts.com/websites/html-templates. Then using the instructions in the book I was able to create the following all with SharePoint Designer 2010. Impressive isn’t it given I am not a graphic artist and SharePoint now looks awesome.

In this blog I am going to describe the process of:

  1. Obtaining an HTML template.
  2. How to create a master page with the HTML template.
  3. Some little tricks that I learned along the way.
  4. How to create page layouts to be used with the master page.
  5. How to create content query web parts.
  6. Package the solution up in WSP solution in Visual Studio.

Hopefully at the end of the day you will be able to take this and get your SharePoint 2010 branding initiated for your projects.

Disclaimer - I will also say that my approach is not 100% perfect implementation. This was because I have not put this through a production testing. I already know you will find other SharePoint site templates or situations where you will have to do more work to the CSS, Master Pages, etc. So understand that this blog will help you get started on how to do branding and it is not a production ready example nor will it be supported. I wrote this strictly to help the community learn how to do branding.

2 comments:

Unknown said...

Hello Jason,

Could you kindly upload/mail me a copy of the CSS+Images used in the blue ocean theme as the www.freelayouts.com link is no longer functioning?

I would appreciate this greatly!

Jason Apergis said...

Hi Chris,

Yeah - I saw they took the site down. Unfortunaly I no longer have the code sitting around to post out like that. There are tons of other web sites out there that provide free templates. Hopefully this blog will give you enough direction....

Thanks,
Jason