Easy way of Editing Customized Theme in MOSS 2007

Recently, I have observed that many MOSS 2007 and/or WSS 3.0 administrators want to apply their custom theme to site collections. In my opinion, this is a good practice because you never want to edit the "core.css" file - it is just stupid For those who still want to modify the "core.css" file in spite of my advice, the file is in "C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS1033STYLES folder".

When using SharePoint Portal Server 2003, you could easily test and apply your customized .css file by inserting a html tag after

in section of .aspx files. "Ows.css" file in SharePoint Portal Server 2003 was the "core" stylesheet file and by inserting a new stylesheet link tag after this line, any style attribute in "ows.css" file gets overwritten by your customized .css file.

HOWEVER, you cannot do this in MOSS 2007 and WSS 3.0. By default, there exists no stylesheet link tag for "core.css" in the section of any .aspx file. "Core.css" will be applied automatically at the end of any tag in the section.

Here I will explain how to edit and apply your custom theme in SharePoint Designer 2007 and this is the easiest way to modify your custom theme.css file.

1. First create a custom theme; you can refer my other post: /tigirry/archive/2007/07/03/custom-site-theme-for-sharepoint-2007-moss-2007-and-wss-3-0.aspx

2. Go to "Site Actions" -> "Site Settings" -> "Site Theme" in your SharePoint site collection and choose your custom theme and apply. Let us assume that the site collection's url is http://mycustomsite.

3. Now launch SharePoint Designer 2007 and go to "File" -> "Open Site..." and type http://mycustomsite in "Site name" field. Click "Open" to open the site.

4. In the left side, you should see "Folder List". If you don't see this, press ALT & F1 or go to "View" and select "Folder List".

5. In the "Folder List", browse to "_themes" folder. You should have a subfolder which is your custom theme folder. Let us assume that the name of the custom theme applied is "CustomBrown" and the subfolder name is "CustomBrown" as well. Editing this subfolder will not change your original theme folder at "C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMESCustomBrown". What you see in the "Folder List" is the copy version of your custom theme folder.

6. In "CustomBrown" folder, look for the "Cust1011-65001.css" file. This file is created by the site collection when you apply any new theme and it is copied over to overwrite the site collection's "core.css" file. This file does not physically change "core.css" file but this file will be read after the "core.css" file. The format of this file is always "****1011-65001.css" and first 4 characters are always the first four characters of your custom theme name.

7. Make changes to this "****1011-65001.css" file as needed and you can also add/edit .jpg and .gif files as you make changes to the "****1011-65001.css" file.

8. When you want to apply and review the custom theme, simple save the .css file and you will see the changes you have made. If you don't see any change, click F5 to refresh or go to "View" and select "Refresh".

9. After you have finished modifying the .css file, copy its content and replace the content of "C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMESCustomBrown heme.css" file with it. You also want to copy and paste any image file you have added or edited to this local folder.

10. Apply a different site theme to your site and apply the "CustomBrown" theme back to the site. You should see all your changes.

Hope you enjoy customizing!!