in

SharePoint Blogs

The Best Place for SharePoint-related Blogs

tigirry's SharePoint Blog

Custom Site Theme for SharePoint 2007 (MOSS 2007) and WSS 3.0

The easiest and the fastest way to apply the same look and feel on any SharePoint site is creating a site theme. A SharePoint site theme basically consists of theme.inf, theme.css, and image files. Theme.inf file simply represents the title of the theme. Theme.css is a stylesheet file that defines colors, header images and layouts of a site and image files can be referenced here to display on the page. By creating a custom site theme, you can easily change the style but in fact, writing and editing the stylesheet can be somewhat chanllenging when you have more than a hundred of elements to deal with.

Here is a short procedure of creating a custom site theme named "Ghost":

1. Copy any theme folder in "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES" folder and paste with its name replaced with "Ghost". In this example, copy GRANITE folder.

2. In Ghost folder, rename GRANITE.INF file to GHOST.INF in upper case.

3. Open GHOST.INF file with notepad.

4. Change the value of title under [Info] to Ghost.

5. Replace every word, Granite, under [titles] with Ghost.

6. Open "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML" file with notepad.

7. Add the following lines under <SPThemes> tag:
 <Templates>
  <TemplateID>Ghost</TemplateID>
  <DisplayName>Ghost</DisplayName>
  <Description>Ghost theme.</Description>
  <Thumbnail>images/thghost.gif</Thumbnail>
  <Preview>images/thghost.gif</Preview>
 </Templates>
Notice that preview and thumbnail paths are images/thghost.gif. By default, MOSS 2007 and WSS 3.0 will not have such image files.

8. In order to display thumbnail and preview correctly, you will need to capture the screen and save the file in "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES" folder with thghost.gif name. You can change the .gif file name if you change the thumbnail and preview file names in <Templates> tag.

9. Do an iisrest for the server to recognize the new theme.

Pretty simple procedure. Now you are ready to test your new theme. In Site Settings, you can now choose Ghost theme; however, the theme will not differ from Granite theme. Now, it is time for you to play with theme.css file!

Comments

 

Sharepoint link love 07-03-2007 at Virtual Generations said:

Pingback from  Sharepoint link love 07-03-2007 at  Virtual Generations

July 4, 2007 3:14 AM
 

Sharepoint link love 07-03-2007 at Virtual Generations said:

Pingback from  Sharepoint link love 07-03-2007 at  Virtual Generations

July 4, 2007 3:14 AM
 

Robert Wuhrman said:

Great lesson!  Thanks.  You can also just bounce the application pool in IIS Manager and the new theme will show up.

July 5, 2007 1:58 PM
 

Mike Walsh's WSS and more said:

July 8, 2007 3:02 AM
 

Tomkyn said:

Now, how do you assign a theme to a site / site collection programmatically, using the SharePoint 2007 API?  :/

July 12, 2007 2:00 PM
 

tgrk said:

Thank you for this great post. It really helped my a lot. Please did you try to deploy it using some package or solution?

Thanks

July 19, 2007 2:31 AM
 

pup said:

gr8 idea!!!!!!!!!!

July 19, 2007 7:13 AM
 

Rashmi said:

I tried your way to add a custom theme. but it dint work.

I m getting a Write Error on file _themes\<new theme>.

Please help.

July 26, 2007 4:21 AM
 

tigirry said:

Rashmi,

Make sure you have administrative access to "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES" folder. Why would you want to edit theme.css file in _themes\<new theme>? If you do that, it will only change the theme that has been already applied to your current web. This will not change the original version of your custom theme. In order to change your custom theme, you will have to go to this location ("C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\<custom theme>") and make changes to theme.css file.

July 26, 2007 9:12 AM
 

Rashmi said:

Thanks Tigirry for your quick response, i did change the theme.css same way as you told. The problem resolved as had to give the same security access settings to the new custom theme folder as its parent folder. It worked. Thank you.  

I also need to set this custom theme as default theme. so that entire site and sub sites will have the same theme. Do you have any idea how to go about it....?

July 26, 2007 9:37 PM
 

Tigirry's SharePoint Blog said:

Recently, I have observed that many MOSS 2007 and/or WSS 3.0 administrators want to apply their custom

July 27, 2007 3:07 PM
 

Philippe Sentenac [Usual Coder] said:

Ce post s'intègre dans une série qui évoque la customisation de SharePoint, vous retrouverez le premier

July 30, 2007 2:20 AM
 

thekaran said:

When i switch to my custom theme, i get this error. Any idea?

Write error on file "_themes/MYTHEME1".   at Microsoft.SharePoint.Library.SPRequestInternalClass.ApplyTheme(String bstrUrl, String pVal)

  at Microsoft.SharePoint.Library.SPRequest.ApplyTheme(String bstrUrl, String pVal)

August 7, 2007 10:09 AM
 

percith said:

If by any chance you have a french(other languages?) version, you have to change spthemes.xml under 1036 instead of 1033 on step 6.

Many thanks for this walkthrough!

August 9, 2007 1:01 PM
 

carnk01 said:

How do you get it to be the "default theme" when a new site is created?.  I am having to manually change the Master Page on the site to inherit.

thanks

August 20, 2007 10:21 AM
 

Chris Parker said:

Hi Tigirry,

Excellent article. I've made some drastic changes to the theme.css file and uploaded some custom images and used this theme as the theme for the top level site. Unfortunately, when I try to apply my theme to another site within sharepoint I get the error mentioned above:

Write error on file "_themes/my_theme_name".

I've checked the permissions and security settings in windows explorer and they appear to be identical to those of the other themes. Any ideas on how to fix this?

August 24, 2007 6:38 AM
 

Chris Parker said:

Just for reference, I solved the problem I was having. Turns out that there were some hidden files in the theme folder due to editing the images on a Mac (resource fork files, .DS_Store files). Deleting these fixed the problem.

September 12, 2007 6:32 AM
 

Len Gilbert said:

Hi, I've got the portal looking great thanks you your tips. On the team sites though, I want to copy the default style and make modifications, but that one seems to "live" elsewhere. Any idea?

Thanks for the help!

September 21, 2007 3:46 PM
 

shiva said:

it is one of the good process thank you very much for ur theam idea

September 26, 2007 7:32 AM
 

GN said:

Thanks for the good article. I created a custom theam and it is working fine. But the error pages still show in the default theam. How to change the style of the error pages?

October 8, 2007 8:05 AM
 

tigirry said:

Many are saying that they have write errors to the theme file. Be sure to make sure you're an administrator of both farm server and the site collection. You will need to have full permission to your custom theme folder in the farm server. I do not know what to say more since I cannot replicate the error you guys have.

October 8, 2007 1:06 PM
 

Rebecca said:

Hi there. I created a copy of a built-in theme (from Granite to Ghost, as you specified) and applied it  - all works fine.

However, if I try to customise the images (i.e. renaming settingsgraphic_granite.jpg to settingsgraphic_ghost.jpg and restarting iis, I run into trouble - the images don't seem to pick up. I have also renamed the various links to them in themes.css.

Is there some other area that I'm missing?

October 25, 2007 3:43 AM
 

Alex said:

thanks for the .DS_Store hint Chris.

I might have gone insane trying to solve that one, but instead it just took 2 minutes to find this post.

October 25, 2007 12:26 PM
 

Chrisitan said:

"Hi there. I created a copy of a built-in theme (from Granite to Ghost, as you specified) and applied it  - all works fine.

However, if I try to customise the images (i.e. renaming settingsgraphic_granite.jpg to settingsgraphic_ghost.jpg and restarting iis, I run into trouble - the images don't seem to pick up. I have also renamed the various links to them in themes.css.

Is there some other area that I'm missing?

"

Ive got the same problem as rebbeca! Anyone that can help?

October 29, 2007 10:08 AM
 

sam said:

Hi,

 I tried creating the new theme as you have mentioned, I created using theme Jet, and my new theme name is displaying in the themes list and working, but if I change anything is theme.css file, it will not update the changes in the site.

Any idea why its not updating the changes?? I am using MOSS 2007

Thanks

January 23, 2008 8:32 PM
 

Tatto's Blog said:

SharePoint Links

January 25, 2008 1:04 PM
 

SharePoint 2007 How To List « SharePoint Sherpa said:

Pingback from  SharePoint 2007 How To List &laquo; SharePoint Sherpa

February 12, 2008 7:27 PM
 

Tony said:

Hi, I am a newbie to Sharepoint, created the test theme with your tips but getting the following error message when applying the theme to my site

Cannot open "Ghost": no such file or folder.

I did all the files and changes as stated in your instructions.  Can you help?

Thanks,

Tony.

"

February 15, 2008 2:44 PM
 

BIll Lundgren said:

THis worked great, but I encountered an issue with Theme names. I copied a new theme called NEW01 and it worked fine. I then created a new theme called NEW02 (based on a different theme) and it wouldn't work - gave me an error that NEW02 already existed. Turns out that SP read NEWS01 the same as NEWS02. I changed the second theme to NEWSII and it worked fine.

Bottom line - do not use numbers in theme names

February 26, 2008 2:06 PM
 

Sue Brower said:

This worked great.

One issue -- do NOT use an underscore in the theme name.  I originally tried NEW_THEME and had problems applying the theme.  Once I renamed everything to reference NEWTHEME all was well.

Bottom line - do not use underscores in theme names

March 14, 2008 10:06 AM
 

Rojas1MG said:

I look at (C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES) and see there are far more themes there than actually show up in the portal when looking at the themes.  Is there somthing to modify that'll show these others (CENTRLAD, CLUB, FRESH, etc....)

March 25, 2008 1:13 PM
 

Andrew said:

How I can set "Cardinal" theme by default for sites that will be created?

April 2, 2008 4:10 AM
 

Jade Skaggs said:

I had to restart the application pool to get my changes to theme.css show up.  even iisreset didn't do it.  After that, I needed to select another theme and then go back to my custom one.  it sucks doing that EVERY time i need to make a change

April 2, 2008 4:16 PM
 

Gudni P said:

If you are editing your theme on a regular basis, I´d recommend checking out a method I saw at heathersolomon.com, surprisingly easy.

basically you just use @import xxx.css in the theme.css file.

url:

www.heathersolomon.com/.../SharePoint-2007-Design-Tip-Import-your-CSS-for-SharePoint-Themes.aspx

April 7, 2008 9:45 AM
 

Ali Nawaz said:

yes this is a fine and rapid steps to create SharePoint Theme from existing themes, after that you can easily change colors as per your site theme from CSS

April 8, 2008 5:19 AM
 

Prabhakar said:

How I can set "Cardinal" theme by default for sites that will be created?

April 21, 2008 7:23 AM
 

Steve Manning said:

This works great on the parent site. However, I'm trying to use the same method on a subsite so the subsite can have a different theme than the parent. It's having no effect, the subsite keeps the same theme as the parent. What's up with that?

May 5, 2008 11:39 AM
 

Raymond Chin said:

"Hi there. I created a copy of a built-in theme (from Granite to Ghost, as you specified) and applied it  - all works fine.

However, if I try to customise the images (i.e. renaming settingsgraphic_granite.jpg to settingsgraphic_ghost.jpg and restarting iis, I run into trouble - the images don't seem to pick up. I have also renamed the various links to them in themes.css.

Is there some other area that I'm missing?"

I ran into this issue and it seems that the sites cache the theme in their local director structure in the _themes directory. If you connect to your site using SharePoint designer, you will see the directory. Once you customize the css (ThemeName-65001.css) you can export the css, rename it to theme.css and copy it to your /TEMPLATES/THEMES/ThemName. after doing this, you need to go into the site settings on your site and reselect the theme so that it refreshes its local site theme.css to your newly created one.

May 10, 2008 11:06 PM
 

Tearjerker said:

How can I make my theme the default theme?

May 29, 2008 9:34 AM

Leave a Comment

(required )  
(optional )
(required )  
Add

About tigirry

Title; SharePoint Developer / ASP.NET Developer Certifications: MCPD: Web Developer MCTS: Microsoft Office SharePoint Server 2007 – Application Development MCTS: Microsoft Windows SharePoint Services 3.0 – Application Development MCTS: Microsoft Office SharePoint Server 2007 – Configuring MCTS: Microsoft Windows SharePoint Services 3.0 – Configuring

Need SharePoint Training? Attend a SharePoint Bootcamp!

Posts (c) their respective authors. Everything else (c) 2007 SharePoint Experts