WSS3.0 Creating a new theme

Copy the chosen theme in the themes folder in 12 Hive and rename folder to new theme name

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



In your new theme folder, rename OLDNAME.INF file to NEWNAME.INF (Wheat to LewTek) Ensure its upper case!

1. Open NEWNAME.INF with notepad or your favorite text editor (LEWTEK.INF)
2. Change the value of title under [info] from Oldname to Newname.
3. Change all values under [titles] from Oldname to Newname.

Make theme available in sharepoint

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 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>

Preview Thumbnail

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!
   
   

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.