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
Choose a theme to re-purpose (something that closely resembles your desired look)
For our example, we are using “Wheat”
Choose a name for your new theme
For our example, we will use “LewTek”
Copy the chosen theme in the themes folder in 12 Hive
"C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES"
Paste this folder and rename it to your chosen new name
Step 2 – Edit Setup Information File
In your new theme folder, rename OLDNAME.INF file to NEWNAME.INF (Wheat to LewTek)
– Ensure its upper case
Open NEWNAME.INF with notepad or your favorite text editor (LEWTEK.INF)
Change the value of title under [info] from Oldname to Newname.
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.
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"
Next you need to add your new template. Add the following lines under the
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"
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
No comments:
Post a Comment