One of the things that customers appear to want, and will like about SharePoint is the ability to ‘brand’ or ‘skin’ it. For some reason, it’s something that people always get hung up on – what it looks like, not how it works – and I don’t expect we will have many projects that don’t have the question of branding/skinning/customisation. But what does this mean, how does it work, and what are the limitations?

What is branding of SharePoint?

I think the question of what people really mean by ‘branding’ or ‘customisation’ or ‘skinning’ is an essential first question. With so many words for such a wide range of possibilities, there is plenty of room for confusion. Some customers will mean sticking whatever logo they have at the top of each page. Others will mean changing the entire of each page to fit within corporate style guides, and restructuring the elements of pages. Consequently, there are a range of techniques for doing such customisation. I’ll split them into the ‘level’ or ‘type’ of user that would typically make such changes. First though, let’s have a look at some of the technologies used in SharePoint look and feel.

Look and Feel Technologies

Master Pages
Master Pages are an ASP.NET technology, and potentially very powerful. However, in SharePoint they have some limitations. Master pages are a template for things that should go on a page – like the header, logo, navigation controls, etc.. They have ‘content’ controls that display the actual ‘page’. When the ‘page’ is requested, it looks up the master page it should be using, combines the two, and produces the page.

In practice, in a ‘default’ SharePoint system, this means that the (usually white) content area in the lower right of most pages (to the right of the quick navigation menu and underneath the top navigation tabs) is the actual ‘page’. The rest of what you’re seeing comes from the master page – that’s the navigation, title, favourite links, site action button, search box, and so on.

Master pages give you the power to make structural and style changes to the page. For example, if you don’t like the position of the site action button, you can move it. Or if you want to move the quick nav menu to the right of the page, go ahead.

Different Sites can use different Master Pages, and they and be applied to a hierarchy of sites, so you can change a feel for a number of sites simultaneously.

However, SharePoint has master pages for 3 different ‘types’ of content page:

• Normal pages- These master pages affect normal pages that users would typically see, such as viewing a document library or task list.
• Publishing pages – These are used by the publishing features, and can be very ‘non-SharePointy’. They’re designed for the Web Content Management facilities in MOSS, so really they’re designed to let you publish your page exactly how you think it should look.
• Application pages – Such as the Site Settings page, or the ‘Spinny-thing’ you see while SharePoint is busy

It is worth noting that Application pages use a system-wide master page which cannot be changed without development (i.e. it can’t be changed simply as an administration task). (There are some links regarding doing this here )

A good description of what a master page at Heather Solomon’s blog. (In fact, if you really want to know about branding, subscribe to her blog and visit her site now).

Themes
Themes allow you to change the styles applied to a page, and thus allow you to make stylistic but not structural changes to a page. You can use themes to change colours, fonts, background images, etc.. However, this is not to say that changing the style of a page is easy. To put this in perspective:

If you have attempted to override the styles on an out of the box SharePoint site, you know that it isn’t a very easy thing to do.

• The core.css file that contains the basic rules has 979 different style rules.
• The core.css file uses a palette of 132 colors and 143 images.
• The default page of a newly provisioned team site uses only 61 of those rules.

So, unless you have branded a lot of SharePoint sites and are intimately familiar with core.css and the default master pages and page layouts, just figuring out where to start modifying can be a daunting task.

This is before you consider that there might be overriding styles being applied by the master page and, of course, the theme you’re using. If someone tells you it is ‘easy’ to change the styles of a SharePoint page, ask them to try it – the core.css file is huge.

However, one of the worst things about themes, in my opinion, is that you can’t make them inherit, or apply them to a hierarchy.

More information on themes (in SharePoint 2003 – but the same things apply in 2007) at Heather Solomon’s blog, again.

Web Parts
I find that it’s worth remember that Web Parts are a way of customising your page, and although they don’t control the ‘chrome’ of you SharePoint site (i.e. the styles), they can be used to control the structure of a page. There is a huge array of Web Parts, and SharePoint is designed to let you add more; discussion of all of them is beyond the scope of this document.

Themes or Master Pages?
Which should you use, and when? A good analysis at Heather Solomon’s blog. (See a pattern anywhere?)

The synopsis:

If you are using the SharePoint site intact with the navigation that comes with the site, and you just need to update the colors and images and add a header to the site, a theme can handle all of that for you.

With master pages you can implement your own navigation systems, custom code and design elements, move elements around on the page or hide SharePoint components you don’t want to use. It is a more complete solution for totaling changing the way SharePoint looks.

Levels of User – and Customisation

(Note – this doesn’t include the designer, who would typically not be a site administrator or developer. A technically accomplished designer might also be the ‘Web Designer’ role, or this role might be filled by a developer. Just don’t let techies design look and feel, okay?)

There are 3 levels of customisation and these match up with 3 different types of users quite well. In increase order of control and effort, they are:

Site Administrator
It’s worth bearing in mind that part of the point of SharePoint is that Site administration can be pushed down to Business Analysts or Power Users, while the Farm administrator looks after the SharePoint infrastructure. Thus, a Site Administrator could be anyone from the Farm Admin down to the user in charge of organising the company fun day. To this end, Microsoft have exposed a number of ways of changing the look and feel of a site to Site Admins. They can:

• Change the logo
• Change the items shown on the navigation elements (within some limits)
• Add or customise Web Parts
• Apply an existing Theme
• Apply an existing Master Page

Web Designer
Designers will mainly be using SharePoint designer to customisation to SharePoint. This allows them to make changes to the master pages and styles within SharePoint, which is great. Also, such changes are stored in SharePoint directly, and consequently they’re under version control!

Most serious SharePoint branding and customisation will happen at this level.

However, what isn’t so great is that customisations made to a master page this way are not so easily transferred from system to system, as they aren’t features.

Developer
Developers can use SharePoint designer to create their custom master pages, and then take the custom page and package it up into a feature. This is described well here. Once you’ve done this, you can then install your master page as a feature on many systems.

Developers can also create features for the ‘Delegate controls’ – essentially they can build features to replace things like the navigation or search controls. Also, if you want to change the master page use for your Application pages then you’ll need to do some development.

Conclusion

SharePoint does provide a wide scope for customisation of it’s structure and style, but with multiple techniques available you really need to identify early what it is you want to do, so that you can then figure out the route you’re going to take. Try to consider what it is you’re trying to achieve, and determine the value of what you’re doing – reskinning a SharePoint site for the sake of it is wasteful.

If you want to familiarise yourself with some of the themes and master pages, try changing them on a system using the Site administration pages. It is quite informative!

Links

Branding SharePoint, parts 1 and 2

CSS Reference for styles in SharePoint 2007 – note: doesn’t cover all of the CSS classes used, but is a good starting point.

Minimal (i.e. Base) master pages – Yes, Microsoft do their own, but Heather’s is, apparently, a more minimal ‘minimal’