Quick intro to creating custom SharePoint (MOSS, WSS) site themes

I will give a quick run through of how to create a site theme in Microsoft Office SharePoint 2007 and Windows SharePoint Services 3.0. Themes are a quick way to change the appearance of SharePoint. It is applied to each site (individually I’m afraid).
To me this is the easiest solution to creating the look you want. But this does not change layout. You will need to edit master pages and page templates for that.

Styling SharePoint is not hard, but it is very time consuming. For me it was also frustrating, so good luck . Well I have not really touched styling before, so maybe that is why it was so time consuming for me.

Let’s get started.

1: Find theme that resembles your vision the most.
First of all find the theme that mostly resembles what look you are after.
Remember the themes only change the look of the site, not the actual layout. That will be covered some other time.

To look through the themes go to the site you wish to change theme for, and then go to Site settings.
Click Site Theme under Look and Feel, and click the themes one at a time until you find the one that looks closest to the look you are after. You will problably not find one that is close to what you want, but every bit helps.

2: Create your own theme folder
When you have found your theme, go to C:\Program Files\Common Files\microsoft shared\Web Server Extensions\12\TEMPLATE\THEMES
and do a copy of it.
Name your folder what you wish for your new theme to be called. I named mine DLH

3: Edit the .inf file
Open up your new folders and edit the setup information file (INF). It will be called whatever your copied theme is called. In my case I copied vintage, so mines called vintage.inf

Replace all occurences of the copied themes name. In notepad hit CTRL+H. I replaced all Vintage occurences with DLH.

Rename the inf file to reflect your theme name. Mine is now called dlh.inf.

4: Edit the SPTHEMES.XML file
Open the folder C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033

Edit SPTHEMES.XML. TemplateID must match the name of the folder and inf file, but displayname and description is up to you. Displayname is what the theme is called in the list you select the theme in “Site theme”.

DLH
DLH Theme
DLH Theme.

images/dlhtheme.gif images/dlhtheme.gif

Now we need to check if the theme shows up before we start editing it.

5: Reset IIS
Do an issreset or even better an application pool recycle (http://code-journey.com/2009/07/01/recycle-application-pool-in-windows-server-2008/)

6: Apply the new theme
To get started with the styling first go apply your newly created theme. Yes I know, it still looks like the copied theme.

I got this error:
A theme with the name “DLH 1011″ and version already exists on the server.

To get rid of this error open up sharepoint designer and delete the folder _themes, then do an IISRESET.

7: Edit the css
Next you need to edit your template.css file.
Be warned, styling sharepoint is really really anoying .

I would direct you to Heather Solomon who has done a mammoth job of listing most of the useful css tags, and small screenshots.

Once the theme is applied start up SharePoint Designer. It will make the process faster and easier, even though I am really not a big fan of SPD.

Load the site with your theme. Find _themes folder and open up your own theme from that folder. There will be a css file named after your theme and some numbers.
Open that one.
You can now edit it.

First let me give you a WARNING. And listen to this.
Do not change theme when you edit this css file. This is a temporary file, and if you change theme your changes are LOST.
There is also no need to change theme. If you make a change in the css file, click save, and then just refresh the browser window you have loaded the site in.

The changes will be visible right away. That’s the power of editing it in SPD. If you change your theme in the 12 hive folder, then you need to do an IISRESET and reapply the theme.

There are several ways to go about doing the actual editing of the css.

A: Delete everything in the css file, and go through Heather Solomons list and place snippet after snippet in the css file until you are satisfied.

B: Load up SharePoint Skinner and use that.

C: Create the css by using this online simplified theme generator.

D: Just go through it yourself and go nuts. You can use developer plugins for your browser to find which css lines to change.

For me the experience was frustrating. Partly because I am in no way a frontender, and this is the first job I have had where there were no designers or frontenders to help out with this task. also I got frustrated about the sheer amount of css that makes up SharePoint. the core.css is about 4000 lines long, and that’s just one of the css files. You don’t need to go through it, but it’s just to illustrate that the css for sharepoint is huge.

I wanted to just place a gradient across the entire top part of the screen. Behind the logo and search fields as well. That was not easy for me . Actually I ended up not even using that gradient at all.

Go grab a cup of tea and sing “Always look at the bright side of life” and get cracking!