SharePoint 2007 Themes - Strategy for customising SharePoint look and feel

by ZebSadiq 17. February 2010 08:30

SharePoint themes are probably one of the most overlooked features of SharePoint. Many developers believe that having a custom master page that contain custom html and custom CSS eliminates the need for themes all together. However, I've recently come across scenarios that challenge such an approach to getting the look and feel required for professional looking sites using SharePoint 2007. Here I will try to illustrate my findings on this matter and hopefully help you make better informed decision about that the approach you should take in applying the look and feel required to a SharePoint site.

The first thing to understand about how themes work is custom themes simply override the default  look of a SharePoint site. However, you are not required to detail every aspect of your custom theme. If a theme does not provide an override for a certain CSS class (or specific combinations of CSS classes), SharePoint will just render it in the default way. This means that you only need to customise what you want to change. The theme file then ends up only being as big you need it to be.

Choices for setup
Usually, developers will choose to either have a custom theme or a custom master page with a custom css file. The choice made here is usually dictated by your specific set of requirements and deliverables. Though it may be more convenient to decide either way, the third possibility should also be considered.
A custom master page with a custom theme can perform the same function as a custom master page referencing a custom CSS file.   In fact, the choice of not opting for a custom theme should be questioned. After all, all a theme consists of a CSS file and some images.  The skills required to generate a theme are the same as creating the look and feel in any other CSS file. Even if there are no existing SharePoint look and feel to be overridden, having a custom theme should still be considered.

Here are some of the benefits of creating a custom theme:
1. The fact that its a supported by Microsoft as any part of SharePoint 2007.
2. SharePoint offers an easy interface for managing themes.
3. Themes get applied to end user pages as well as admin pages.
4. Themes can be installed per site or web basis just like any feature and therefore you can create one custom master page which looks different for two different sites via two different themes.
5. The client can choose to have their look and feel updated often at a lower production cost.

Method and Tools
Just like any other look and feel job, you'll need a front end developer with at least one or two years of front end CSS experience if you are going to create a theme efficiently .  Microsoft's html and CSS for SharePoint look and feel is very granular but complicated. The CSS naming conventions help you understand what it is that you're changing, however may be tricky to work out at times. Some developers dislike the way Microsoft have structures their HTML and CSS but I feel that it needs to be complicated in order to allow maximum customisability in balance with not making the every CSS class specific to a single bit of code.

The  Elumenotion SharePoint Skinner is a great tool that will allow you to customise the look and feel of your SharePoint site without needing to perform a million page refreshes (like you would when writing custom CSS code). The tool has various features to help you create the exact look and feel you need. This applies to custom master pages and out of the box master pages. The tool is designed to help you theme all out of the box controls including:
• Web part chrome
• Calendars
• Blogs and Wikis
• Document Libraries
• Out of the box toolbars and menus.

While SharePoint Skinner does have a few bugs and isn't free, for $50 you are more than halving the time you need to spend customising the look and feel. It also has great options for producing SharePoint theme wsp files, which can easily be deployed to your farm. If you wish for more control, you can create a simple CSS file that contains all your changes.  I would definitely recommend purchasing this tool if you're looking to theme SharePoint professionally.

While SharePoint Skinner will help customise most of SharePoint look and feel, you will still need CSS experience  and occasionally tools like the IE developer toolbar from which you can work out how to add new classes to get the look and feel you need.

Don't reinvent the wheel!
There is a great reference chart that can be used to speed up the front end development even further found here .  This will tell you exactly which classes you need to manipulate to make the change you need. While some parts of SharePoint are not covered by this chart, it will give you a good start in customising most out of the box SharePoint controls.
You can also have a look at the out of the box CSS files for SharePoint. Sometimes, they can provide the answers you're looking for when all else fails.
The rest is down to your own judgement and experience.

Deployment
Although the creation of the theme maybe the your only objective, if you wish to allow troubleshoot-ability after the theme has been applied, you should consider creating a feature for your theme(s) which would apply and remove your theme(s) from a particular site and all its child objects.
This feature is also very simple to create though you'll need to write some compiled code to give it useful functionality. If you use the SharePoint Skinner tool, it can produce the whole installation package for you as a wsp file. The disadvantage of using SharePoint Skinner's created wsp solutions is that it will install its own assembly to the GAC. If your client happens to have a policy by which all assemblies must live in the bin folder and you solution must define a CAS policy file, you'll have to manually extract the solution, create  a new or alter the existing CAS policy (which is not usually a quick job) and then either accommodate everything as part of your deployment package (if you're deploying your solution through recommended methods) or repackage the solution into a wsp. I would suggest that if you already have compiled code, you'll find it easier to create the feature receiver code yourself. This will also allow a great deal of flexibility going forwards.
Here is a simple example of how can apply a theme via a feature.

 

 

Comments

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading



Calendar

<<  August 2014  >>
MoTuWeThFrSaSu
28293031123
45678910
11121314151617
18192021222324
25262728293031
1234567

View posts in large calendar