Branding SharePoint

Your organization has successfully deployed SharePoint, and you and your colleagues have learned all about its document-management, collaboration and content-management features. But somehow you just can’t shake the feeling that the look of such a powerful product leaves a little to be desired. Apparently management feels the same way, because now it’s time to apply a little bit of style to SharePoint to spice it up a little, and maybe give it a look that’s a little more in line with your organization’s branding. So how do you go about this?

There are a few options for branding a SharePoint site, ranging from the simple to the complex. In the simplest terms, you can apply a company logo to the SharePoint portal and call it a day. For some organizations, this may be enough to keep management happy, but what are the other options available?

There is the theme engine, which essentially applies a color skin to the out-of-the-box SharePoint site. If none of the themes that ship with SharePoint work for you (and there’s a good chance they won’t), you can always create a custom theme using Office 2007 or 2010 and upload it, but even that might not get you the end results you want.

Finally, you can dive in and do some custom branding yourself. This in itself is a bigger topic than a single article can cover, but the theory behind this point is the main focus of this article.

Generally speaking, when you start branding SharePoint, you want to have an end goal in mind; that is, you should have an idea of what your branded site will look like. The best way to start thinking about this is to look at your organization’s branding and think about how it can be applied to SharePoint. Think about the colors you generally see on company letterhead, the company’s public website, the company logo, and other branded applications you may use on a day-to-day basis.

Once you have a good idea about the color scheme, spend a little time surfing the Web for some additional inspiration, and if your boss catches you doing this, at least you can honestly say you’re working! Maybe there are a few sites that have a certain look that you want to replicate. If this is your first time branding SharePoint, it’s best to not get too crazy with your design, but whatever strikes your fancy can generally be replicated one way or another.

#!
Now that you have your inspiration, the next step generally is to create a mockup of what the end site will be. This will be helpful later for saving off any custom image files you want to use in the design. Think about the major components of SharePoint: You’ll need to account for the ribbon interface; a header area, the top navigation and the left navigation; a place for the search box; and finally the main body area for content. You can use whatever image software you feel most comfortable with.

This article assumes you have done your design and have enough CSS and HTML knowledge to get going. If you have experience with Web design in the past, some of what you know will come in handy, but SharePoint can sometimes be a tricky beast to style. This is because there is a lot going on behind the scenes to render the final HTML output you see in your browser window. Tracking down each little piece to which you’ll apply your custom styling can sometimes take a little extra work, but the end result will be well worth it.

Most of the look of SharePoint is driven by three things: the master page, a page layout, and cascading style sheets. The master page acts as the skeleton of the page, and holds the position of the major components, such as the navigation areas, search, and the ribbon, and controls where the main content of the page will go. The page layout fits within a master page and controls how the main content of the page will look. Finally, CSS is used to add images, colors, text styles, and some positioning to the elements in the master page and page layout.

When you are ready to start your custom branding, you will generally be using SharePoint Designer 2010 to create your custom master page, page layout and CSS. But where should all these components live? Master pages and page layouts live in the Master Page Gallery, which is accessed from the Site Settings Screen (Site Actions > Site Settings > Master Page and Page Layouts). CSS files, along with any custom images that accompany it, go in the Style Library (Site Actions > View All Site Content > Style Library), generally within a folder within the library to keep everything nice and tidy. If possible, you should try to do your branding in a development environment and deploy everything to the production server later.

In SharePoint Designer, you’ll start by creating a new master page. You can either start by copying one of the out-of-the-box master pages—v4.master or nightandday.master as a starting point for your new design—or you can create one from scratch. SharePoint requires several placeholders and controls to be present on a master page in order to render properly, so if you are starting from scratch, it is generally recommended to use a starter master page developed by members of the SharePoint community.

For example, SharePoint MVP Randy Drisgill has an excellent starter master page with all the necessary placeholders already on the page. You can wrap these placeholders in your custom HTML and styles.

#!
As you build out the custom HTML in the master page, you will generally simultaneously build out the custom CSS that will determine the look and feel of the site once it renders in the browser. Once this is all finished, you can start building out any custom page layouts that you need, such as creating pages with different column layouts for various types of content. With a handful of images and some CSS knowhow you can really change the look of SharePoint pretty quickly.

Two valuable tools you may end up using extensively are the IE Developer Tools (built into Internet Explorer), and Firebug, an add-on for Firefox. These tools can be very helpful to use when trying to track down a specific style to override within your custom CSS.

Once you dive deeper into branding, you might start to work with content types and site columns, which allow you to add various fields to your pages. You can also add Web zones and Web Parts directly to your page layouts for even more customizations. The possibilities are nearly endless.

When your design is done, the master page and page layouts work together, and you are happy with the final result, the next step would be to get the design applied to your production site. There are a few ways to do this: You could manually upload the master page, page layouts, CSS and image files, or the other (and more preferred) option is to have a developer package the files up into a solution file (a WSP file) and deploy it to the server. This topic is also out of scope for this article, but there is plenty of information out there on the Web.

Hopefully this gives you a good start to planning out and implementing your custom SharePoint design when the boss comes around and asks you to give the SharePoint site more pizazz. Until next time, happy branding!

Ryan Keller is a consultant with SharePoint911.