Simple Branding on a SharePoint 2007 Site Collection

Branding can often be an anathema to technical types.  We often think that we can’t do anything with it unless we have a designer working with us.  I proved to myself recently that it’s not actually that complicated.  Here’s how it went.  All of the changes I outline below happened in Microsoft SharePoint Designer 2007 (the successor to Frontpage) or in SharePoint itself; no complicated file system work.

We built a SharePoint 2007 Site Collection (to a normal person, a Web site) for one of our clients.  As we got to the final stages of the implementation, we wanted to apply some simple branding so that the sites wouldn’t just look like SharePoint out of the box.  The client told me which things on the pages should change and what colors and images to use.

I made a copy of default.master in the /_catalogs/masterpage folder.  My rule is to never alter the defaults if it can be avoided; you never know when you might need to revert back.  The only change I needed to make to the master page itself was to replace the Microsoft little people image (as we’ve started calling it) in the upper left of the page with the client-supplied image.

I created a new CSS (Cascading Style Sheet) file in the /_styles folder and attached it to my master page.  As I identified the CSS classes that I wanted to alter, I did a New Style Copy from core.css (the default CSS file for SharePoint) into my CSS file and made the changes there using the Modify Style option.  This made it easy to understand what changes I needed to make; no need to look at the actual CSS code unless I wanted to.  These changes overrode the core.CSS classes.

Identifying the CSS class that you want to change can seem horribly difficult (core.CSS contains hundreds), but my new best friend the trusty Internet Explorer Developer Toolbar makes it easy.  Using Internet Explorer, navigate to the page that has the element that you want to change and open the toolbar. Do a Find/Select Element by Click.  As you move your cursor over the page, the toolbar highlights elements with a blue outline.  Find the element that you want, click on it and look in the Attribute window to see what class is applied to it.

To attach my master page to the sites, I went to the site itself and chose Site Actions/Site Settings/Master Page and changed the Site Master Page (for publishing sites) and System Master Page (for all other sites) to my master page.  Since I wanted this change to affect all of the sites below, I checked both the "Reset all subsites to inherit this Site Master Page setting" and "Reset all subsites to inherit this system master page setting" boxes.

In this particular case, most of the pages had one set of branding rules, and a small subset needed to have a slightly different color scheme.  To do this, I simply made a new copy of my master page and CSS file, made the color changes in the CSS, and attached this new master page to the sites that needed to have the different color scheme as above.

Though it took me three or four hours to work out the details of all of this, now I realize how simple it is.  I could probably do it all in a half hour the next time!  Of course, if the branding is going to be quite complicated, I’m still going to turn to my designer partners; I don’t kid myself in thinking that I understand how to do good design.