SharePoint Site Creation – Step-by-Step (Part 12) : Theme Setup and Customization

Step One: Create a new theme:

The best way to create a new theme is by duplicating and renaming an existing one.

Themes are located on the server in the following location:

c:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\THEMES

To begin, visit the location above on your server.

First
Duplicate an existing theme by Copy and pasting one of the folders to the same location.

Second:
Rename the folder you just duplicated to whatever you wish to name your theme. (Tip: Keep it simple no strange characters and no spaces)

Third:
Next go into the folder and rename the .INF to the same name you just called your theme.

Fourth:
Then open the .INF file and change the line title=whateverthemeyoucopied to read title=whateveryoucalledyourtheme

Step Two: Making the server know it’s there

You need to edit the SPTHEMES.XML file in order to make your theme applicable via the browser.

First:
Open (EDIT) the SPTHEMES.XML file located here:
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\LAYOUTS\1033

You’ll notice each theme is broken down into template blocks of code:

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

Duplicate an entry like the one above and edit it to reflect the name of your theme. Give it a relevant description and display name.

The thumbnail and preview images can be left as they are but if you cannot control yourself you can find them here:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES


Step Three: Applying your theme to a WSS Site.

That was easy, now you just need to apply the theme to a site so that you can make the modifications you want.

Assuming you created a dummy site in WSS, go to http://yoursite and click on Site Settings up top. Then find and click “Apply a Theme to Site”. Locate the theme you just created and apply it.

Step Four: Editing your theme.css file to reflect the colour scheme you want.

One way to edit your theme is via FrontPage. Don’t worry about unghosting your site, this is a dummy site created solely to edit your theme. Once we are done the theme will reside on the server and be able to be applied to any sites you create without any issues w/ unghosting.

Open FrontPage 2003 and select file, then open site and type in the URL to your SharePoint site.

In your folder list, locate the _THEMES folder inside you will find your newly created theme. If your folder list is not turned on the screenshot below will help you turn on the folder pane.

The customization from here on is completely CSS based.

Let’s take a look at some of the most common selectors you will have to edit and some tips on making theme customization easy. This is based on a WSS Site.

Important Tips:

When you apply your theme to a site and then begin editing it by connecting to that site you are NOT editing the master theme. You are editing a copy of that theme. DO NOT re-apply your theme via the browser during editing. When you are finished what you will have to do is save the theme.css file out to your desktop and then copy it over the theme directory on the server overwriting the master theme. Then and only then will your theme be complete and applicable to all sites from there on out.

Take baby steps when customizing themes. You don’t want to edit 10 classes and then go back to see what changed. If you change something check right away.

Add a CSS comment in your stylesheet next to everything you’ve changed. Add a small description of what it changes and to really streamline for the future add your first name so that a) everyone knows who changed it and b) you can search the stylesheet in the future for your name and quickly skim through the classes you know have to change. A CSS comment looks like this: /* comment */

The most common styles usually edited for a theme are:

Note: To stop you from having to scroll for 2 days I have removed the properties appleid in the classes and left only the classnames which you would want to customize using your own creative ideas.

The Top Banner (Bar)

/*
Background color of the TOP NAV BAR – Shane
*/
.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree{
}

/*
Text Color in the TOP NAV BAR (the order fixed to LVHA – Shane
*/
.ms-banner{
}

/*
Linked Text Color in the TOP NAV BAR (the order fixed to LVHA – Shane
*/
.ms-banner a:link{
}

/*
Linked Text Color in the TOP NAV BAR (the order fixed to LVHA – Shane
*/
.ms-banner a:visited {
}

/*
Linked Text Color in the TOP NAV BAR (the order fixed to LVHA – Shane
*/
.ms-banner a:hover{
}

/*
Linked Text Color in the TOP NAV BAR (the order fixed to LVHA – Shane
*/
.ms-banner a:active {
}

/*
Border under the Top Bar (banner) – Shane
*/
Div.ms-titleareaframe{
}

/*
Search Box – Shane
*/
.ms-searchform{
}

/*
Search Box Corner – Shane
*/
.ms-searchcorner{
}

/*
Divider line across top of the page under the title/page area – Shane
*/
.ms-titlearealine{
}

/*
The Watermark on the SIDE NAVIGATION (You “should” techincally use display:none; but that will leave you with space. It’s your choice . – Shane
*/
.ms-navwatermark{
visibility:hidden;
}

/*
Linked Header text in the Side Nav. You may find ms-input here grouped with these classes. If you do and you make this text WHITE, ms-input needs to be broken into it’s own class because it controls the text that is inputted into forms and if it’s white – well you wont see it :)- Shane
*/
.ms-navheader a:link, .ms-navheader a:visited, .ms-navheader a:hover, .ms-navheader a:active{
font-weight:bold;
}

/*
Regular links in the side nav on mainpage – Shane
*/
.ms-nav a:link{
}

/*
Regular links in the side nav on mainpage – Shane
*/
.ms-nav a:visited{
}

/*
Regular links in the side nav on mainpage – Shane
*/
.ms-nav a:hover{
}

/*
Regular links in the side nav on mainpage – Shane
*/
.ms-nav a:active{
}

/*
Background color of items selected in the SIDE NAV – Shane
*/
.ms-selectednav{
}

/*
Background color of items UN-selected in the SIDE NAV – Shane
*/
.ms-unselectednav{
}

*/
The right border on the left nav bar (quick launch bar) – Shane
*/
.ms-navframe{
border-color:#F2F2E2;
}

/*
Background of the TOOLBAR (ie: Create Bar for Documents and Lists) Wasn’t complete, moved all attributes from OWS over here.- Shane
*/
table.ms-toolbar{
}

Background Toolbar – Shane
/*
.UserToolbar{
}

/*
Text on the TOOLBAR (ie: Create Bar for Documents and Lists) – Shane
*/
.ms-toolbar {
}

/*
Linked Text on the TOOLBAR (ie: Create Bar for Documents and Lists) – Shane
*/
.ms-toolbar a:link {
}

/*
Linked Text on the TOOLBAR (ie: Create Bar for Documents and Lists) – Shane
*/
.ms-toolbar a:visited{
}

/*
Linked Text on the TOOLBAR (ie: Create Bar for Documents and Lists) – Shane
*/
.ms-toolbar a:hover {
}

/*
Linked Text on the TOOLBAR (ie: Create Bar for Documents and Lists) – Shane
*/
.ms-toolbar a:active {
}

/*
Background Color, and Text Color on the Web Part ToolBar – Shane
*/
.ms-WPTitle{
}

/*
Linked Text Color on the Web Part ToolBar – Shane
*/
.ms-WPTitle a:link, .ms-WPTitle a:visited{
}

/*
Linked Text Color on the Web Part ToolBar – Shane
*/
.ms-WPTitle A:hover{
}

/*
Dashed Border when a webpart is selected/being modified – Shane
*/
.ms-WPSelected{
}

/*
Text in the body of a web part – Shane
*/
.ms-WPBody{
}
.ms-WPBody table, .ms-TPBody table{
}

/*
The border around a Web Part (When turned on) – Shane
*/
.ms-WPBorder{
}

/*
The Background Color (behind the arrow) when modifying a webpart on mouseOver – Shane
*/
.ms-HoverCellInActive {
}

/*
The Background Color (behind the arrow) when modifying a webpart on mouseOver – Shane
*/
.ms-HoverCellActive {
}

/*
The Background Color (behind the arrow) when modifying a webpart on mouseOver – Shane
*/
.ms-HoverCellActiveDark{
}

/*
A lot of links/text are controlled with ms-VB and VB2 – Shane
*/
.ms-vb a:link, .ms-vb2 a:link, .ms-GRFont a:link, .ms-vb-user a:link{
}

The styles listed above area almost always customized when creating themes. There are lots more and this is not to be taken as gospel but it should definately get you on your way.

Remember once you have edited all your styles and you have something that you feel looks good you have to export (File, Save as) your stylesheet to your desktop and then copy it over to the theme folder you created.

You have to do this in order to apply the theme to other sites. The one you have been working on is only a copy of that theme, it’s the way personalization was dealt with.

There really is a lot you can do with “just themes” so get creative and see what you can come up with! This post is part of the WSS Site Template Creation tutorial so I will go ahead and create a theme for our site using the methods outlined here. The theme will be available for download shortly.

Only one part left in the WSS Site Template Creation tutorial – Backing up your work using the FrontPage 2003 backup utility. It’s an easy one.

Happy Customizing

You may also like...

4 Responses

  1. Sabine says:

    Hallo Shane,

    I have a question as to themes and custom masterpages. It is possible to have a custom masterpage with a special theme?
    Which things I have to attend to do a theme and masterpage?

    Thanks,
    Sabine

  2. Shane Perran says:

    Bil,

    Very good points and something definately worth pointing out.

    I have weaved around the color.css files several times but only enough to say that they merge with the theme.css at runtime to form the theme-109- ** file.

    You are also very right – in order to properly see the changes you have to unload the theme entirely, simply clearing your cache just doesn’t cut it.

    I’ll defiantely make a post on this – good tip!

  3. Bil Simser says:

    Shane,

    Two things that you might want to talk about in an update.

    1. What is the relevance of COLOR0.CSS, COLOR1.CSS, GRAPH0.CSS, and GRAPH1.CSS
    2. Note that you have to change themes to see the changes in the browser. You can’t simply upload a new THEMES.CSS file and see the changes. You need to apply a different them, then reapply the new theme, then refresh the browser to actually see the changes. At least this is what I’ve had to do with sites.

I would love to hear from you.

%d bloggers like this: