Home Library Learn Downloads Support Community
Sign in | United States - English | |
21 out of 40 rated this helpful - Rate this topic

How to: Customize Themes

Windows SharePoint Services 3

You can add new themes or customize existing ones for application to Web sites in Microsoft Windows SharePoint Services 3.0. This programming task shows how to customize an existing theme.

To customize an existing theme

  1. Copy one of the theme folders in Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES and give the folder a unique name. In this example, the name is MyTheme. This folder contains cascading style sheets (CSS) files, image files, and other files that define the styles, formatting, and color for the various user interface (UI) elements that are used in the theme.

  2. Find the .inf file in the copied folder, and rename it with the name given to the folder.

  3. Open the .inf file and assign the same name to the title in the [info] and [titles] sections of the file.

  4. Customize the styles defined in the .css files of the copied folder as needed.

    For information about the classes used in Windows SharePoint Services, see Cascading Style Sheets Class Definitions for Windows SharePoint Services.

    The following example from THEME.CSS changes the color that is used for sections of the navigation area.

    Copy 
    .ms-navframe{
background:#009999;
}
.ms-navline{
border-bottom:1px solid #8D4D03;
}
.ms-nav .ms-navwatermark{
color:#008999;
}

  5. Modify the image files in the copied folder by using the business graphics software of your choice.

  6. Add a file for thumbnail and preview images for your custom theme to the Local_Drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\IMAGES directory. In this example, the file is called myPreview.gif.

  7. Add a theme template definition to SPTHEMES.XML, which is the file that determines which themes are available as options on the Site Theme page. This XML file is located in the Local_Drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033 directory.

    The following example specifies a template for the custom theme.

    XML
    Copy 
    <Templates>
   <TemplateID>mytheme</TemplateID>
   <DisplayName>My Theme</DisplayName>
   <Description>Description</Description>
   <Thumbnail>images/myPreview.gif</Thumbnail>
   <Preview>images/myPreview.gif</Preview>
</Templates>

  8. Reset Internet Information Services (IIS) by typing iisreset at the command prompt so that your custom theme appears in the list of options on the Site Theme page and can be applied to SharePoint sites.

Robust Programming

Warning   Changes that you make to SPTHEMES.XML might be overwritten when you install updates or service packs for Windows SharePoint Services, or when you upgrade an installation to the next version.

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
Deactivate the theme then re-Activate it for the new CSS to take affect.
I found I had to Deactivate and then Activate the theme on my site for the new CSS to be applied.


History
re: refreshing browser with changes to theme.css
I ve also encountered the same problem,, and finally got thro... check this post,, ur probem wil be solved..

to know more making your own sharepoint theme with ur design, jus ve a look at this, it ll be very useful

http://santhoz-teaches.blogspot.com/2009/02/sharepoint-themes-unveiled.html

And to download 50+ quality sharepoint themes, go on to www.buytemplates.net

Regards,
Santhosh
History
Firefox Solution Still Not A Solution
WOW! What a horrible implimentation by MS on this one for making it impossible for designers to modify a theme css on the fly. The firefox solution doesnt work when you want to test IE compatability of course.
History
Use the "Web Developer" tool available in Firefox
If you are trying to get a feel for what your changes will look like without editing core.css or reseting IIS constantly, you can use the "Edit CSS" option in the 'Web Developer' add-on for Firefox. The changes take effect in real time. Afterwords, you can copy the changed CSS and merge it into your theme.css file.

Use the "View CSS Information" option in that same tool to determine what CSS element you are modifying. If you need a list of the CSS classes with pictures of what element is affected by a class, try Heather Solomon's blog here:

http://www.heathersolomon.com/content/sp07cssreference.htm


History
Core.css is a good option
You might as well create and/or change all your classes at the core.css file (TEMPLATE\LAYOUTS\1033\STYLES) and then, when you´re ready, move them to a theme using all this crappy process. Works beautifully.
History
not practical

may be the iisreset ist the right way, but thats not practical at all. CSS-Theming goes step by step, so you change a little bit, test it, correct it and so on.

So, in real life, forget the iisreset. We do it by saving pages as html on the hard disk, do the changes there, and adapt the css files finally.

History
correct to have to IISreset
Try to avoid using SharePoint Designer for functions you do not need to, as beginning users will often make changes that un-ghost or customize a site or pages, when they did not need to. The Microsoft supported procedures for applying custom themes are to modify the theme files under the Themes directory and then run a IISreset on the web server. If a site doesn't refresh properly just change its theme to another theme, then change it back to the new modified theme and it will refresh and relink things properly.
History
re: Refreshing Browser with Changes to theme.css

An iisreset is not require for styling and testing!
When you change the theme for a site, you can open the site in SharePoint Designer. Then you see in the folder list: _themes\<theme name> the files which SharePoint has copied to the site. There you see the style sheet theme.css, but editing this file shows no results. But there is also an other css file, named: <part of theme name><nr>-<nr>.css This is the file you can edit. When you change some colors, you will see this after a browser refresh! Changing some images will return also the new images after a browser refresh.

When your site theme is completed you need a tool such as ExamDiff, for comparing the original CSS file and your CSS file. Your CSS file has a lot of more style rules then the original style sheet file. You can copy your CSS content and replace it into the original CSS on the file server. The code which will not be able in the original CSS file is the content of the file: mossExtension.css
When you have done this, an IISReset is required for apply the style for other users.

History