Sharepoint Themes & Customizing them !

Posted: October 5, 2008 in CSS Style Sheets, Customization, SharePoint
Tags: , ,

You know that themes and css style sheets have a great effect on the design of  your website and how it look. In a sharpoint site, themes and theirrelative style sheets have a same effect on design of your site.

But it’s important to know that every theme in sharepoint have it’s own css style sheets. ( you may have noticed that, when you applied a new them to your site and wonder that why the parent css styles have not applied to the current site )

The directory that contains themes is located on your server at this address : C:\program files\common files\microsoft shared\web server extensions\12\template\themes\

In this address you see the folders of each theme. if you are using WSS 3.0 you see only one css file named “theme.css”. in MOSS 2007 you see two css files named : “theme.css” & “mossExtension.css” . theme.css contains the majority of the style rules, and mossExtension.css contains a smaller set of additional rules
and also there are some pictures that uses in background and icons…

when you apply a theme to a site what happens is the mossExtension.css is appended to the bottom of your theme.css and a new file is formed “1011-65001.css” which is then applied to your site. So you can change this file if you want to customize it.

You can make changes to the theme.css file directly, but those changes typically won’t be picked up until an IISreset occurs. The temporary file, ending with “1011-650001.css” is actually used by the server as the “live” CSSfile for the theme. As mentioned this file is built from the combination of theme.css and mossExtension.css after an IISreset or the restart of appropriate SharePoint services.

If you are using SharePoint Designer to edit the theme, the temporary file is actually available for editing. In Designer’s Folder List, you’ll find sub-directories named “_themes/“and, within there, a list of the files found at the previous path we specified, but now including the temporary file. The beginning of the filename comes from the name of the theme; Updating the temporary file with your changes will make them available immediately upon refreshing the page, no IIS reset required.

However, after you have made significant changes to the temporary file, copy the contents back into theme.css and mossExtension.css. Sometimes you’ll notice changes you’ve made missing from the version you’re reviewing in the browser; that’s an indication the server has rebuilt the temporary file from the old information in the existing files. Regardless of how you’re editing the files, it’s always a good idea to keep a backup of your latest changes to the theme files somewhere outside the MOSS directories so they won’t get overwritten.

In the CSS files among SharePoint’s included themes, the majority of the styles are referenced only by class. Almost every element or container has a class assigned. Heather Solomon’s CSSReference Chart for SharePoint 2007provides a guide to all the standard SharePoint page elements and their respective classes.

This post was an elite and summery of some great and useful posts. You can find more here :
1 – http://404uxd.com/2007/09/18/sharepoint-bound#discuss
2 – http://www.graphicalwonder.com/?p=567

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s