Creating a Custom Vista Theme for SharePoint

There are plenty of resources for learning how to create themes for SharePoint.  A theme is a pre-packaged set of styles and images that make your SharePoint site look a little less…well…”SharePoint-y”.  Themes are limited in the respect that they don’t really modify the layout and positioning of your pages, but rather change the colors and background images applied to elements.  You can still get pretty fancy with just a theme, but recognize that it’s not enough to completely eliminate the default look and feel.

That said, let’s take a look at theme I put together for the purposes of this blog.  It is loosely based on Vista’s black and aqua stylings, and is aptly named “Vista Theme”.  Before I get into the details about how I approach theme development (since it’s probably not the way you’re used to), let’s take a look at some screenshots of what the finished theme looks like.  In addition, I’m feeling extra generous today and have provided my completed theme for your enjoyment Image may be NSFW.
Clik here to view.

Home Page:
Image may be NSFW.
Clik here to view.

Calendar:
Image may be NSFW.
Clik here to view.

Reports Subsite:
Image may be NSFW.
Clik here to view.

Document Library:
Image may be NSFW.
Clik here to view.

Search Center:
Image may be NSFW.
Clik here to view.

Site Actions Menu:
Image may be NSFW.
Clik here to view.

Theme Development 
Ok…now that I’ve [hopefully] gotten your attention, let me discuss what it took to develop this theme.  As you probably know, themes are stored in the following SharePoint directory:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\

In here you’ll find all of the themes that ship with SharePoint out of the box, including GRANITE, SIMPLE, JET, etc..  To create your own theme, the easiest way is to start with a theme you like, copy the folder, and rename it something unique.  In my case, I named it VISTA.  Once you have created your custom folder, it’s imperative you locate the .INF file inside your theme folder, and rename to the name of the folder.  Again, in my case, VISTA.INF.  Next, open it up and change every occurrence of the previous theme’s name, and update it with the name of yours:

Image may be NSFW.
Clik here to view.

The next part is a little unorthodox, and I originally saw this approach described by Heather Solomon, and it has proven extremely useful and efficient.  The idea is to separate the actual theme artifact files (CSS and images) from the theme definition.  The theme definition, which includes every file in the theme folder, is cached whenever the theme is applied to the site.  This means that the only way you can make changes and see them appear is by updating the files in the file system, setting the site’s theme to another theme other than your own, and finally applying your theme again.  Trust me, this is nowhere near ideal when it comes to CSS, as I guarantee you’ll have to try something, test, try something, test, and so on.  The other option is to use SharePoint Designer and modify the cached files, in which case you must remember to update the actual file system files before it gets cached again. The beauty of Heather’s approach is that a single CSS file is cached, and the only thing it contains is a link to a file and the images on the file system in another location which aren’t cached.  This will allow you to make changes directly to the files on the file system and immediately see your changes.

Here is the structure of my Visual Studio solution.  NOTE: The VISTA folder is collapsed due to space, but inside it are all of my images and style sheets:

Image may be NSFW.
Clik here to view.

The next steps are typical – create an entry in the SPTHEMES.XML file that identifies your theme, reset IIS or recycle the application pool, and apply your theme.  If all was successful, you should see the following in your site’s theme settings page:

Image may be NSFW.
Clik here to view.

One thing I would like to explicitly explain – how to create custom web part headers.  If you pay close attention to the above screenshots, you’ll notice all of my web parts look like this:
Image may be NSFW.
Clik here to view.

This is achieve relatively easily as long as you can create decent-looking header images with your editor of choice (mine is Photoshop).  Basically you need 3 images: a background, a left side, and a right side. Zoomed in, my custom images look like the following:

wp-header-bg.gif:
Image may be NSFW.
Clik here to view.

wp-header-right.gif
Image may be NSFW.
Clik here to view.

wp-header-left.gif
Image may be NSFW.
Clik here to view.

The CSS styles are fairly simple:

/* Web Part Header Styles */
h3.ms-WPTitle { 
    background: url('wp-header-left.gif') top left no-repeat; 
    font-size: 8pt;
    padding: 3px 0px 4px 6px; }    
    
h3.ms-WPTitle, h3.ms-WPTitle a, h3.ms-WPTitle a:link,
h3.ms-WPTitle a:hover, h3.ms-WPTitle a:visited{
    color:#181818;}    
    
.ms-WPHeader TD {    
    border-bottom:1px #297c95 solid;
    background: url('wp-header-bg.gif') top left repeat-x; 
    padding-right: 0 !important; }        

.ms-WPHeader .ms-HoverCellInActive, .ms-WPHeader .ms-HoverCellActiveDark { 
    background: url('wp-header-right.gif')  no-repeat right 0px;
    margin-top:0px;
    margin-right:0px; }
    
H3.ms-standardheader SPAN {    
    color: #181818;}

/* Web Part Header Hover Image Styles */
.ms-HoverCellInActive, .ms-SpLinkButtonInActive{
    padding-right:5px;
    padding-top:2px;
    margin-bottom:0px; }
    
.ms-HoverCellActiveDark{
    border:none;
    padding-right:4px;
    padding-top:2px; }
    
.ms-HoverCellActiveDark img{
    border:1px black solid;
    background: #5E5E5E;}     

The only drawback to including these styles in a theme is these are applied to each and every web part in your site. It may not be appropriate to style all of the web parts, but rather web parts on a single page.  If you only want web parts on a single page to be styled, then you could add the CSS classes to a Content Editor Web Part, or link to the style sheet on the page’s page layout.  The important thing to note is that all web parts on a single page will by styled the same.  There’s no easy way to apply a style to one web part and not the other.  For simplicity sake, I’ve just included these styles in my theme.

You can download this theme and install it via the following farm-scoped feature.  NOTE:  The feature receiver I’m using relies on classes from the .NET 3.5 Framework (you’ll see why in my next post), but this will fail if you try to install it on a farm that doesn’t have 3.5.  If you’re just interested in the source files and style sheets, change the .WSP extension to .CAB and extract the stuff you want.  As I mentioned, I will be explaining how to install a theme via a feature in my next post.  Stay tuned!