SharePoint Out-of-Box Themes

If the blue and white default theme for SharePoint does not fit your style, you can choose another theme in WSS 3.0 or MOSS 2007.  SharePoint provides 18 themes out of the box.

To change the theme of a site

1. Select Site Settings under Site Actions

2. Click on Site Theme under Look and Feel

3. On the Site Theme page, you can select different themes and you’ll see a preview of that theme on the left. Once you have decided on a theme, click the Apply button.

Viola! Your site now has a new look and feel.

Create a Custom Theme to apply

But what if you don’t want to use an out of the box theme? Create your own!! To create a custom theme for applying to sites, you need to re-purpose an existing theme. It’s quite easy with a few modifications. If you can copy/paste, you can do it!

Step 1 – Copy existing theme

1. Choose a theme to re-purpose (something that closely resembles your desired look)
   • For our example, we are using “Wheat”
2. Choose a name for your new theme
   • For our example, we will use “LewTek”
3. Copy the chosen theme in the themes folder in 12 Hive
   • "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES"
     
     
     
4. Paste this folder and rename it to your chosen new name
   
   

Step 2 – Edit Setup Information File

1. In your new theme folder, rename OLDNAME.INF file to NEWNAME.INF (Wheat to LewTek)
   1. – Ensure its upper case
2. Open NEWNAME.INF with notepad or your favorite text editor (LEWTEK.INF)
3. Change the value of title under [info] from Oldname to Newname.
4. Change all values under [titles] from Oldname to Newname.
   
   

Step 3 – Edit SPTHEMES.XML

Next we need to edit this file so that we can actually choose our newly created theme. This will make it available in the list of themes on the Site Theme page.

1. Open SPTHEMES.xml in notepad or any other text editor for editing. It is located in the following directory:
   • "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML"
2. Next you need to add your new template. Add the following lines under the <SPThemes> tag (you may find it easier to just copy and paste the tags for an existing theme, and then changing it):
   
   <Templates>
        <TemplateID>LewTek</TemplateID>
        <DisplayName>LewTek</DisplayName>
        <Description>Type a description for your new theme.</Description>
        <Thumbnail>images/thlewtek.gif</Thumbnail>
        <Preview>images/thlewtek.gif</Preview>
   </Templates>

1. The thumbnail and preview tag reference an image. This image does not exist yet and you’ll need to create it. Once your theme is complete, you can take a screenshot of it and then resize it.
   • This will be the preview image on the Site Theme page.
   • Ensure that the size of the image is 375 x 231 pixels.
   • Once you create the image, place it in the following directory:
     • "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES"
       
       
       
2. Now if you navigate back to the Site Theme page and refresh it – you’ll see your custom theme available to apply to the site. You’re done!
   
   

Edit Your Custom Theme

The good news is that you created a custom theme to apply to sites. The bad news? Well, it looks just like the old theme that you copied.
There are many ways to edit the theme that you have created, so I won’t go into much detail on that here. However, here are some tips and resources I recommend.

Theme Editing Tips

• The file theme.css in your theme folder contains all of your styles
  • Edit this style sheet to make changes to your theme’s look – change the colors, change the font, etc...
• Images in your theme folder can be edited / replaced.
• After making any changes to your theme, reset IIS prior to reapplying the theme.
  • The theme is stored in the database when you apply it, so you must refresh.
  • You reset IIS by Start > Run: iisreset
    
    
    
• Make incremental backups of your Theme folder as you are working. Somewhere along the way you WILL mess up and need to revert.

Theme Editing Resources

• MOSS CSS style reference:
  • http://www.heathersolomon.com/content/sp07cssreference.htm
• Image Editing Software (free)
  • http://www.getpaint.net/index.html
• Theme generator (great for consolidating colors in a style sheet)
  • http://hermansberghem.googlepages.com/themegenerator.htm
• IE Developer Toolbar (nice tool for viewing styles on a page in real time)
  • http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en#Overview
• Notepad2 (enhanced notepad features – good for text editing if you don’t have an editor)
  • http://www.flos-freeware.ch/notepad2.html

UPDATE 6.16.08: Here's a great solution for changing all of the fonts http://forums.microsoft.com/TechNet/ShowPost.aspx?PostID=3476039&SiteID=17 

- Dan Lewis