Contents
- About Themes
- Designing a Theme
- Creating the Theme Image Files
- Create the Overriding WSS Site Image Files
- Create the Custom Site Header Image
- Creating the Theme Styles
- SharePoint Styles Commonly Used for Themes
- Testing the Theme
- Deploying the Theme
- Create the Theme Files
- Add the Theme to SharePoint
- Apply the Theme to the Site
- Theme Preview Image
- Completed Site
About Themes
A theme is a custom design that can be saved and applied to WSS sites. A theme consists of design and color changes that are applied on top of a site after it has been created. The theme will apply to all existing pages and any new pages that are created in the site. However, the theme will not apply to any new or existing sub sites that are present under the parent site. A theme has to be individually applied to each site.
A theme consists of CSS and image files and is stored on the web server like a site definition. Unlike a site definition, a theme is available to, but do not affect, all WSS sites in the environment. The theme has to be applied to the site. A theme is more permanent than a site template because it lives as files instead of as a snapshot in the content database. A theme does not however store list, library and content changes like a site template can.
Many preset themes ship with Microsoft FrontPage 2003 and FrontPage can additionally be used to create new themes.
Common misconception about creating Themes
A common misconception is that you must use FrontPage to create new themes for WSS sites. FrontPage is not required to create new themes. You can create themes using a code and/or image editor to modify the style sheets and image files.
Themes are an ideal solution if we need to apply different designs or brands to several WSS sites that can use the same site definition. For example, if a company needs to provide a team site to several satellite offices, a theme could be used to uniquely brand each satellite office site.
In this article, we are going to step through how to create a theme. The instructions include both the technical side of
displaying the theme in the theme selection page on a WSS
site, and how to go about creating the actual design of the theme. I recommend reading through the entire article before going through the steps.
Designing a Theme
First, we need an idea of what our Theme needs to look like or a concept it
needs to reflect. For example, if we are designing a site for a car
dealership, we want to include flashy colors, some pictures of vehicles, and the
dealership logo. If we are creating a team collaboration site for the legal
department of a corporation, we want more subdued colors, the corporate logo and
maybe a legal themed image. Before you start your theme design, gather the
logo, corporate or required colors (if any) and some graphics you can use in the
theme.
Graphics can come from
stock photography
or from something you create. If you use stock photography, be sure to
check the image licensing. Some images are
royalty-free,
and others need to be purchased from the stock photography agency. Once we
have all of the design materials, we can start the creation of the theme.
For this example we are creating a theme for a fictitious Colorado travel agency called
Colorado Adventures.
Since all a theme does is replace styles and images (and not move page layout
elements), the easiest way to start
the design of a theme is to begin with the default look and feel of a WSS site.
- Go to the WSS site, and take a screenshot of the site (Alt + PrintScreen) or use a screen capture tool.
- Paste or open the screenshot in a
graphics editor,
such as Adobe Photoshop.
Use a decent editor (not Paint) or your experience creating the design will
be rather difficult.
- Using the screenshot of the default WSS site as a base, start to
lay in new design elements on top of the default layout elements in the graphics editor. A graphics editor with a
layers functionality especially comes in handy at this point.
So for example, add in a new Quick Launch bar color, and create a new title
bar for web parts.
Layering on design changes to the WSS site screenshot in a graphics
editor.
- In regards to the header, we are not limited to the default height of
the header that appears with the WSS site. The header height
can be increased to allow for a larger header area, making it easier to add
a logo and images that further customize our theme. Increase the
canvas size in the graphics editor to allow for more space to design a
custom header.
Increasing the canvas size allows us to create a larger header,
accommodating graphics and a logo.
The right side of the image needs to be something that can be duplicated
since the header image will have to be made long enough to accommodate large
resolutions... OR design a header that ends in a solid color to the right so a
shorter header image can be used and then a background color can be used to fill in
the rest of the header for larger resolutions.
Create a header with an easily replicable right side.
Alternately use a short header image and fill in the header background with a solid color.
What About the Site Tools Navigation?
In the sample design, the site tools navigation (Home, Docs & Lists, Help) no longer appears on the left side of the screen. Using CSS, we can shift the navigation over to the far right, thus allowing more room for custom graphics and a logo. We will review how to do this in the CSS section.
Be sure you
build your custom site header with the site tools navigation in mind,
leaving room for it on either the far left or far right area of the
header. Also make sure your header graphics are navigation friendly, and
don't cut into the site tools text.
- Continue to complete the design. The mock up can then be used as a proof of concept for approvals or status updates.
Completed WSS site theme design.
How to Recreate Text for the Navigation
As you can see in the mockups, the Quick Launch navigation, the web part title bars, and the site tools navigation
text is appearing in the mock up
with new colors and graphics. Here is how to do this in Adobe Photoshop:
- On the screenshot layer, use the marquee tool to draw a tight
selection around the text that needs to be duplicated.
- Copy and paste the selection to a new layer.
- Change the Text Color:
- Use the eyedropper tool to sample the existing text color
(in this case, blue). Use the marquee tool to select the text on the new layer
(or Ctrl + right click on the layer name to select
the layer contents).
- Go to Select, then Color Range. The Color Range dialog loads, and the text should appear in black and white.
Select OK.
- A selection appears around just the letters in the text. Change the foreground color to the desired new color, for example hit the letter
D key to change the foreground color to black. Hit Alt
+ Backspace to apply the foreground color to the selection.
Alternatively use Edit / Fill to change the color
of the text.
- Now we need to remove the background color. Hit Shift +
Ctrl + I to invert the selection. Select
Delete to remove the background color behind the text.
- We now have a clean copy of the text in the color we want. This
layer can be placed above other layers containing color and graphics
for the header and navigation areas.
Creating the Theme Image Files
Now that we have a completed design mock of how we want our theme to look,
we can start creating images for the theme. A theme stores a separate
version of images and styles that is then applied on top of an existing WSS
site, thus overriding what displays on the screen. For any images that are
being replaced, we need to preserve the existing image names. Using the same
image names makes for a much cleaner application and creates less style
sheet work. For our sample, there are a few images that need
to be created:
- partgrad.gif: Web Part title bar background
- toolgrad.gif: Toolbar background on expanded web part pages
- customname.gif: Site header image
- Page icon files: Icons located to the left of the site title on
any given page
Depending on your theme design, you may have additional image needs:
- Logo.gif: Logo in upper left (this image can be hidden to
accommodate the custom site header)
- DWS.gif: Logo in upper left on a document workspace (this image can
be hidden to accommodate the custom site header)
- MWS.gif: Logo in upper left on a meeting workspace (this image
can be hidden to accommodate the custom site header)
- topgrad.gif: Gradated background for top navigation bar (this
image can be removed to accommodate the custom site header - or can be replaced
if the theme only needs a simple color change to the existing top navigation
bar)
- srchcrnr.gif: Top corner of Search tab hanging below the top
navigation bar
- Magnify.gif: Magnifying glass icon before the search input box
- gosearch.gif: Search submit button
- mgrad.gif: Modify Shared Page drop down gradated graphic to left of
links used in a repeating pattern
- Rect.gif: Bullet for Actions navigation in Quick Launch
For a more comprehensive image reference, refer to my
Image
Reference Guide.
Use the existing WSS images to create new copies for the Theme. Either
open/copy the images from the web server (Local Drive:\Program
Files\Common Files\Microsoft Shared\web server
extensions\60\TEMPLATE\IMAGES), or go to a WSS site and do a right
click, Save As on the image to save a copy locally. For example:
partgrad.gif:
toolgrad.gif:
Create the Overriding WSS Site Image Files
- Open the file copies of the WSS site images in a graphics editor. Depending on your graphics editor, you may need to convert the image mode
to RGB.
- In the theme design file, use a marquee tool to select the
replacement image, for example select a vertical
slice of the new web part title bar to replace partgrad.gif.
- Paste the copy in the WSS site image file. Make any up or down
adjustments to position the copy in the right place.
- Save the file locally using the same file name, do not overwrite
the file on the web server.
- Repeat the same process for all of the necessary images.
Page Icons
There are several icon files used across WSS pages located to the left of
the site/page title. If you choose to replace these icons as a part of your theme, best bet is to create an Icons file with a copy of
all of the icon images on separate layers. Clear out the unwanted image data (such as the
blue border button) and line up the icons one on top of each other (but on
separate layers). You can then create the new icon background (in our
example we have a stroked box). Show and hide the icons over the
new background and save out icon image files accordingly. This layered file can then be archived and used over and over for different themes.
If you are an Adobe Photoshop user, you can download this technique
pre set up:
SharePoint 2003 Icons (Adobe Photoshop CS)
Create the Custom Site Header Image
Now we can create the site header image. A large banner image does not exist by default for a WSS site. In order to accommodate our
custom site header, a new image needs to be created and referenced in the
style sheet. If you are just replacing the gradation of the top navigation
bar, follow the above steps to replace the topgrad.gif file and skip
the following steps.
- In the theme design file, select the entire header area that has been
created, omitting the site tools navigation and the bottom horizontal rule
line (if using one). Copy the selection.
Copy the site header only, omitting the site tools and bottom horizontal rule.
- Paste the selection in a new file. Increase the canvas width to at least
2000 pixels. Copy the right side of the header image and duplicate it
to fill the image width. We are creating a long header image so
at any resolution, the user will not see a repeating banner.
2000 pixel wide banner (shown at 33% of size) with the duplicated right end of the image filling up the extra pixel width.
- Save the image file locally, using a unique name of our choice. The file can be saved in any appropriate web image file format (GIF, JPEG, etc).
Creating the Theme Styles
The next step towards creating the theme is to update the styles using cascading style sheets (CSS). CSS is a great way to control how
a page looks, and SharePoint relies heavily on CSS to style text and page elements. Like images, a theme allows us to override the default styles in a site. The styles are stored in a theme CSS file.
This theme CSS file can be created a number of ways:
- Start with a blank CSS file, adding in necessary styles to change page
elements
- Start with a copy of an existing theme and change/add styles as necessary
- Start with a copy of SharePoint's OWS.css file and change/add styles as
necessary
Starting with a blank CSS file is the cleanest way to go, that way we only have styles listed in the CSS file that are
absolutely necessary, therefore easing maintenance and workload. Starting with an existing theme's CSS file may go quicker since we don't have to track down which styles are necessary to alter page elements. Using OWS.css as a base will certainly cover all the bases, but really pulls in way more styles than necessary and junks up the CSS file making it difficult to update and maintain. Let's go
with option one, starting with an empty CSS file.
- In any code editing tool or Notepad, create a new file and name it theme.css.
- Next we need to start pasting in styles that affect the elements of
the page that we need to change. We are going to start at the top of our
design, and work our way down. For each SharePoint style we need, copy it from a
source and paste it in the theme.css file.
Where do I get the Styles From?
- Styles can be found in OWS.css (Local Drive:\Program Files\Common
Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES)
- For a more comprehensive CSS reference, refer to my CSS Reference Chart
SharePoint Styles Commonly Used for Themes
| Class/ID |
Function |
OWS.css Approx. Line No. |
Default Code |
Notes, Tips and Recommendations |
| Top Header |
| Images |
| .ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree |
Table containing logo and upper nav links (Create, Help, etc) |
172 |
.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree {
background-image: url("/_layouts/images/topgrad.gif");
background-color: #002d96;
background-repeat: repeat-x;
} |
- To use a custom top header image, update the image URL reference to the custom image file.
- Update the background color to a complimentary color to the header image.
- To increase the height of the header to accommodate a larger header image, add a height specification (height: 70px). |
| .ms-bannerframe img |
Site image |
CUSTOM |
SAMPLE
.ms-bannerframe img {display:none} |
Custom Style to Hide Site Image
- If using a custom site header, use this style to hide the default WSS site icon.
|
| Navigation |
| .ms-bannerframe .ms-banner |
Table containing logo and upper nav links (Create, Help, etc) |
CUSTOM |
SAMPLE
.ms-bannerframe .ms-banner {
padding-right: 10px;
vertical-align: top;
padding-top: 3px;
text-align: right;
} |
Custom Style to Control Top Navigation Links
- To shift the top navigation links, add a text alignment for center or right (text-align: right).
- For right text alignment, add a padding to stop text appearing flush to browser edge (padding-right: 10px;).
- To shift the top navigation links up, add a vertical alignment for top (vertical-align: top;).
- For top text alignment, add a padding to stop text appearing flush to browser edge (padding-top: 3px;).
|
| .ms-banner a:link |
Top navigation bar link formatting |
177 |
.ms-banner a:link {
font-family: Verdana, serif;
font-size: 8pt;
color: white;
font-weight: bold;
text-decoration: none;
} |
To update the color for the link, combine the styles for link and visited and specify an overriding color:
.ms-banner a:link, .ms-banner a:visited {
color: black;
} |
| .ms-banner a:visited |
Top navigation bar link formatting - Visited state |
177 |
.ms-banner a:visited {
font-family: Verdana, serif;
font-size: 8pt;
color: white;
font-weight: bold;
text-decoration: none;
} |
See .ms-banner a:link |
| General |
| Div.ms-titleareaframe |
Horizontal rule line below header area and above title area |
258 |
Div.ms-titleareaframe {
border-top: 3px solid #ffd275;
} |
|
| .ms-titlearealine, .ms-storMeEstimated |
Horizontal rule line below title area and above content area |
261 |
.ms-titlearealine, .ms-storMeEstimated{
background-color: #ffd275;
} |
|
| Search |
| .ms-searchform |
Background behind search area |
127 |
.ms-searchform {
background-color: #FFDF8C;
font-family: verdana;
font-size: 8pt;
} |
To make the background behind the Search input appear blank, set the background color to white. |
| .ms-searchcorner |
Area to left of Search icon |
132 |
.ms-searchcorner {
background-color: #FFFFFF;
background-image: url("/_layouts/images/srchcrnr.gif");
background-repeat: no-repeat;
background-position: left top;
} |
To make the background behind the Search input appear blank, set the background image to empty (background: url();). |
| Quick Launch Bar |
| .ms-navwatermark |
Text running vertically down side of Quick Launch bar |
230 |
.ms-navwatermark {color: #cbd8f8;} |
Add display: none to hide the text |
| .ms-nav a |
Link text in Quick Launch bar |
256 |
.ms-nav a {
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #003399;
}
.ms-nav a:hover {
text-decoration: underline;
color: #798073;
}
.ms-nav a:visited {
color: #003399;
} |
To avoid vast changes, leave the font face and size and only alter the font color. |
| .ms-viewselect a:link, .ms-GRFontSize |
Link text for Select A View, See Also, Actions menus |
64 |
.ms-viewselect a:link, .ms-GRFontSize {
font-size: 8pt;
font-family: Verdana, sans-serif;
color: #003399;
} |
To avoid vast changes, leave the font face and size and only alter the font color. |
| .ms-nav .ms-navframe, .ms-GRStatusBar |
Background behind left nav bar |
220 |
.ms-navframe, .ms-GRStatusBar {
background: #e1ecfc;
border-right: none;
border-left: 0px;
} |
- Custom add ".ms-nav" in front to designate between left nav bar and datasheet view for a web part.
- Custom change HEX color to image to stop a dark color from showing in other Windows boxes such as Document Upload.
- The code reads for a background color from this style and if none is given defaults to a system color (light blue).
- For a light colored background this would not be necessary. |
| Content Area |
| General |
| .ms-WPHeader |
Header bar of a web part |
1509 |
.ms-WPHeader
{
background-color: #b9d1f4;
background-image: url("/_layouts/images/partgrad.gif");
background-repeat: repeat-x;
} |
- Change the background color to a complimentary color of what is used in the PartGrad.gif image, or replace the color and set the background image to none (background: #HEXCOLOR url();) for a solid background.
- For PartGrad.gif image replacements, do not replace the PartGrad.gif file reference, the theme will recognize and resolve this new image on its own. |
| .ms-partline |
Horizontal rule in a web part content box that is below the content and above "Add new item" links. |
379 |
.ms-partline
{
background-color: #b9d1f4;
} |
|
| table.ms-toolbar |
Background of tool bar on expanded view of a web part |
20 |
table.ms-toolbar {
background-image: url("/_layouts/images/toolgrad.gif");
background-repeat: repeat-x;
border: 1px solid #95b7f3;
background-repeat: repeat-x;
background-color: #9ebff6;
} |
- Change the background color to a complimentary color of what is used in the ToolGrad.gif image, or replace the color and set the background image to none (background: #HEXCOLOR url();) for a solid background.
- For ToolGrad.gif image replacements, do not replace the ToolGrad.gif file reference, the theme will recognize and resolve this new image on its own. |
| Web Part Tool Pane |
| .ms-ToolPaneTitle |
Web Part Tool Pane title bar |
1200 |
.ms-ToolPaneTitle
{
color: white;
font-weight: bold;
font-size: 8pt;
font-family: verdana, arial, helvetica, sans-serif;
padding-left: 3px;
padding-right: 7px;
padding-top: 3px;
padding-bottom: 3px;
background-color: #2254b1;
} |
To update the color for the entire header and footer bar, combine the styles for Title, Close and Footer and specify an overriding color:
.ms-ToolPaneTitle, .ms-ToolPaneClose, .ms-ToolPaneFooter
{
background-color: #434E41;
} |
| .ms-ToolPaneClose |
Web Part Tool Pane title bar close link |
1194 |
.ms-ToolPaneClose
{
background-color: #2254b1;
padding-right: 3px;
padding-left: 0px;
} |
See .ms-ToolPaneTitle |
| .ms-ToolPaneFooter |
Web Part Tool Pane title bar close link |
1212 |
.ms-ToolPaneFooter
{
background-color: #2254b1;
padding: 5px;
font-size: 8pt;
font-family: verdana, arial, helvetica, sans-serif;
color: white;
} |
See .ms-ToolPaneTitle |
| .ms-ToolPaneFrame |
Web Part Tool Pane background color |
1170 |
.ms-ToolPaneFrame
{
padding: 0px;
background-color: #e1ecfc;
} |
|
| .ms-TPHeader |
Web Part Tool Pane sub header background color |
1265 |
.ms-TPHeader
{
background-color: #cbdbf8;
} |
|
Testing the Theme
Any changes made to a Theme will not automatically appear in the site. Instead the Theme must be reapplied to the site. This makes for a clunky process testing out image replacements and style changes. Instead we can test most of our changes on a test site without even applying a theme. This testing technique can be used after the theme images and styles are completed or while they are being built in order to test and check changes.
- In a WSS site, add a Content Editor Web Part to the site.
- Select Modify Shared Page - Add Web Parts - Browse
- Select and drag Content Editor Web Part into a web part zone
- Select Open the tool pane; this is text that appears by default in a new Content Editor Web Part.
- The Web Part Tool Pane opens. Select Source Editor. The Source Editor dialog box opens.
- Enter a set of STYLE tags and copy/paste the CSS styles into the Source Editor between the <Style>/</STYLE> tags. Select Save. The page will refresh with the updated styles.
- Continue adding and testing styles until the theme styles are complete.
To test image replacements, add the new images to a Picture Library on the site and paste the image URL into the style to see the updated image on the site.
- Upload the theme images to a Picture Library.
- While in the Picture Library, select the image twice. The image will load by itself in the browser window. Select the URL and copy it to the clipboard.
- Open the Content Editor Web Part on the site and paste the image URL in the appropriate CSS style.
This technique works for image and style testing for any elements that appear on the page. Changes saved in the Content Editor Web Part will not effect other site pages.
Deploying the Theme
Now we are ready to create and deploy the theme on the server.
Create the Theme Files
- On the web server, navigate to the THEMES directory, Local Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\THEMES.
- Copy an existing theme and paste it in the THEMES directory.
- Rename the copied theme directory to a name of your choice.
- Expand the directory and delete the following files:
- All GIF image files
- The UFT8 file
- Rename the INF file from the original name to the same name as the THEME directory.
Copied theme with GIF files and UFT8 file deleted, directory and INF file renamed to new theme name.
- Optionally open the INF file in Notepad and update the theme title on line 2.
- Paste the new theme images in the root of the theme directory.
- Copy the THEME.CSS file that was created previously into the theme directory, overriding the existing THEME.CSS file. Or open the THEME.CSS file and delete out all of the content and paste in theme styles.
Add the Theme to SharePoint
- Browse to the SPTHEMES.XML file:
Local Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033
- Make a backup copy of the SPTHEMES.XML file and store it in a designated backup or safe directory.
- Copy the following code block into the original file before the closing </SPTHEMES> tag:
<Templates>
<TemplateID>THEMENAME</TemplateID>
<DisplayName>Display Name</DisplayName>
<Description>Theme description.</Description>
<Thumbnail>../images/thnone.png</Thumbnail>
<Preview>../images/ththeme.gif</Preview>
</Templates>
Theme Preview Image
The last line of the TEMPLATES code block is the theme preview image file that appears on the theme picker page when the theme name is selected.
This image can be added at any time, so enter a file name of what you have or plan to use for the preview file. See below for Preview file instructions.
New TEMPLATES code block in the SPTHEMES.XML file.
- Reset IIS. (Command line - IISReset)
Name Matters!
The text used for the Theme folder name, .INF file name and TemplateID in the XML file MUST MATCH exactly for the theme to work!
Apply the Theme to the Site
- Browse to the WSS site and go to Site Settings.
- Under the Customization header, select Apply theme to site.
- Select the new theme in the theme picker box. Select Apply.
- The Site Settings screen reloads with the Theme applied. Check pages within the site for any image or style errors that need to be corrected.
Theme Preview Image
Now that the theme has been created and applied to a site, we can take a screenshot of the site and create a theme preview image. This is an optional step as the preview image is not required for the theme to work. This step can also be done at any time in the process or can be based off the site mock that was created in the design stage. Here is one suggested way to create this image:
- Take a screenshot of the finished site. Crop out extraneous information such as the browser.
- Resize the image to be complimentary to the space provided. Sample size: 300 x 180 pixels.
- Save the image as a GIF file, naming the file what was specified in the SPTHEMES.XML file.
- Copy the image to the IMAGES directory on the web server:
Local Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES
- Revisit the theme picker page and select the theme name to view the image.
Completed Site
The site now has the theme applied:
