This post is about the CSS properties to be modified.

When customising an existing theme, the main file to edit is ‘THEME.CSS’ located in the folder containing your theme (created during part 1 of this series). Any changes made to the THEME.CSS file will only affect that theme. The other file you may need to edit is ‘CORE.CSS’ located in C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\Template\Layouts\1033 . However any changes made to CORE.CSS will affect all themes so use with caution. In most cases, the easiest solution is to create the same properties in the THEME.CSS.

The presentation embedded below contains descriptions of the main properties you will likely want to modify on a standard SharePoint 2007 site. Most properties apply equally to Microsoft Office SharePoint Server (MOSS) 2007 and Windows SharePoint Services (WSS) 3.0.

Click to view in Full Screen mode if details look blurred.

Please note that this presentation is based on existing materials created by Heather Solomon and Microsoft. References are in the presentation and also included at the end of this post. If you are modifying the theme for a web publishing site, Heather’s site will provide far more information than is included here. This presentation is related to a table detailing all properties within a standard THEME.CSS file (the Classic theme) that we use when modifying themes for customers – see Related Links below.

Related Links:

• Create your own SharePoint theme (blog post, August 2008)
• Sample THEME.CSS file with details (table on web site)
• SharePoint CSS Properties Presentation (PDF of the presentation embedded above)

References:

• Heather Solomon’s CSS Reference Chart
• Customising the Look and Feel of SharePoint Sites by Mike Ammerlan (European SharePoint Conference, 2007)

When you install SharePoint, it comes with a range of themes to pick from. Each theme determines the style and formatting of pages within a site. Themes are applied per site. Navigate to a site, click on Site Actions – Site Settings (Modify all settings). Under the second column ‘Look and Feel’, click on Site Theme

You can click on each of theme and see a preview of what it will look like. Select one, click Apply and your site will adopt the new theme.

The chances are, one of themes may look vaguely similar but will not be a match for your own colour scheme. There are various solutions to create your own style and formatting for SharePoint. We will start with the easiest option – create a new theme by modifying an existing one.

Note: This method works with both MOSS 2007 (SharePoint Server, the licensed product) and WSS 3.0 (SharePoint Services, the bit that is free with Windows Server)

Step 1: Identify the theme that is closest to the one you intend to create

1. Go to a SharePoint site and open Site Settings, click on Site Theme
2. Scroll through the list of themes and identify which one is closest to what you intend to create
3. Note: this does not necessarily mean the main colours such as links and text. The hardest elements to adjust are the backgrounds because they use a lot of images. Look closely at the colours used for the shaded area just beneath the tabs on the page and the background behind the Quick Launch navigation, and how Site Admin appears (we won’t be changing much here)
4. If in doubt, I tend to start with ‘Classic’ which uses few images and has a plain background that is quite easy to adjust. It also has a simple colour scheme for admin that doesn’t need changing. ‘Simple’ is another one but I tend not to use it as it throws up a dialogue box (‘display unsecured items…’) on certain browsers. Both require extra effort on the Quick Launch navigation (quite easy to sort, that’s coming in part 2)

Step 2: Copy an existing theme into a new folder

1. Navigate to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\THEMES
2. Create a new folder for your theme. I recommend calling it a short word, e.g. MyTheme, this will become the name of your new theme (referred to here as newtheme)
3. Open the folder for the theme you are planning to copy (chosen in step 1, e.g. Classic) and copy its entire contents into your new folder
4. Within your new folder, open the file ‘oldtheme.inf’ in notepad (where ‘oldtheme’ is the name of the theme you just copied)
5. Under the [info] tag, change the title to match the name of your new theme
6. Under the [titles] tag, change the title to match the name of your new theme for each of the locales listed (the numbers represent the different languages supported by SharePoint)
7. Save and close the file
8. Rename the file from ‘oldtheme.inf’ to ‘newtheme.inf’ (where ‘oldtheme’ is the original theme you copied and ‘newtheme’ is the name of your new theme)

Step 3: Add the new theme to the list of themes displayed under Site Settings – Site Theme

1. Navigate from the \THEMES folder to the \LAYOUTS folder (both are listed under C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE)
2. Within \LAYOUTS, navigate to \1033 (note: this is the default language for SharePoint – US English)
3. Within \1033, open the file ‘SPTHEMES.XML’ in NotePad. This file determines the list of themes displayed under Site Settings – Site Theme
4. Within SPTHEMES.XML, you need to add a ‘templates’ reference for your new theme. Copy the entire contents of an existing template (starts and ends with the ‘templates’ tags into a new row within the file, and amend the properties to reflect your new theme
5. The tag ‘templateid’ must match the name of your theme
6. The tag’displayname’ is what will appear in the Themes list (can be more than one word)
7. Rename ‘thumbnail’ and ‘preview’ to ‘images/’newtheme’.gif’. Where ‘newtheme’ is the name of your new theme Note: You haven’t created this file yet, that’s coming in Part 2.
8. Save and close the file
9. Open a command line and run ‘iisreset’ to restart IIS and SharePoint
10. Open a browser and navigate to a site within your SharePoint deployment. Go to Site Settings Site Theme and your new theme should now be listed (with a missing image for preview and thumbnail)

That’s it. The first stage is complete. You have a fresh theme waiting to be modified to include your own style and formatting. The next stages are to modify the .css files, specifically theme.css (within your new theme folder) and core.css (affects all themes within your SharePoint deployment)

References:

• Custom site theme for MOSS 2007 and WSS 3.0 (site down at time of writing)
• Creating a custom theme for SharePoint 2007 (includes publishing version specific to MOSS 2007)

I fell into IT back in 1991, when Word Perfect led the word processing world (on DOS) and Lotus 1-2-3 was the spreadsheet to use (on Windows 3.x). In those days, a WYSIWYG menu was easier to access from the keyboard than the mouse. As a bit of a spreadsheet queen, I could update a formula, format the results and send the file to the printer in less time than it would take to move your hand over to the mouse. When I discovered macros, it just got easier You entered the commands once inside curly {} brackets, assigned a short-cut key and hey presto! Those were the days…

As desktop applications developed, it became more difficult to stick with the keyboard – so many extra key strokes were required, it was easier to just use the mouse. But the mouse was still not as efficient as those early days with the keyboard.

Radically changing the UI of such a well known application is a brave move. I’m still a bit of a spreadsheet nut, and when I first saw the O12 UI demonstrated… well… I hated it. Sure, the actual demos using data then looked very cool, but my initial reaction, when Excel was first opened, was Yuk! I was pretty disappointed with myself – I’m normally the one advocating change and here I was, hating the thought of it… So, with an Excel 12 phobia rapidly developing, I installed the code last week (note: the code is not publicly available, I work for Microosft). With trepidation, I launched Excel…. yup, same reaction. I absolutely hated looking at it. Bring back my menus I thought, I want my customised toolbar. I started to enter some data, started experimenting with formulas to play with the new visualisation capabilities (very slick), but still there was some serious animosity towards the new ribbon that has replaced my beloved menus… and then I closed Excel. I just didn’t want to play with it any more. This is the worst reaction I have ever had to a new software feature.

Why am I writing about all this? For one simple reason. I will learn to love the new UI, and when I do, I’ll find it easier to work with Excel than before, and I’ll wonder why I had such a problem with it in the beginning. But I need to remember and record this initial reaction, because I know I’m going to see it again, in the not-to-distant future. I’ll be analysing my own learning curve hopefully to make it easier amd smoother when others react like I did. Conveniently, my mom’s a bit of spreadsheet queen too, so I’ll have a volunteer to test the process on.

Back to those early days… In 1993, the company I was working for decided to switch to none other than Microsoft Word, and I was tasked with migrating the secretaries from Word Perfect (v5, still running on DOS – that’s the old blue screen version, for those who remember it). Well… Hell hath no fury like a secretary losing a customised Word Perfect menu system. You would have thought I was forcing them to switch to stone tablets. They absolutely hated Word, with a passion. I remember spending an entire weekend migrating their blessed menus, macros and short cuts to the nearest equivalents I could muster in Word. And my name was still mud for at least 6 months! I couldn’t go near one of them without receiving a lecture about why I was ruining their ability to work, how much longer it was taking them to do anything, how awful this weird GUI thingy was, yade, yade, yade. The list went on and on… But they did finally get used to it, and then they started to do stuff they couldn’t do before. When, 2 years later, it was everyone else’s turn (email had arrived and the need to swap files led to standardising on Microsoft Office – let’s not start that argument), they were the advocates who helped train everyone. Oh how they would laugh if they could see my reaction today. I seem to recall I wasn’t too sympathetic to their cause at the time…

Moral of the story: When we don’t think or realise a system is broken, we will be incredibly reluctant to change it for something unfamiliar, no matter how reasonable the argument for change is. Understanding that feeling makes working through it a whole lot easier…