Professional Microsoft® SharePoint® Designer 2007

7.5. A Customized Theme, from Head to Toe

There are lots and lots of components in the default.master page that can be styled by Themes. The following section walks through a simplified custom Theme that is designed to point out the major styles in a Theme and also to point out the section(s) of the Master Page that the styles impact.

The simplified Theme file (ProfSPDTheme.css) is included in the download code for this chapter. The style sheet is not meant to be used as is (unless you want your final site to look like Figure 7-20), but serves as a reference when you are creating your own custom Theme. The styles in this file have been grouped together in order of the section of the page they impact, for ease of reading.

7.5.1. Page Banner and Background

The ms-main element in the default.master page handles the look and feel for the entire main portal table. It is declared as follows in the Master Page:

<TABLE class="ms-main" CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH="100%"
 HEIGHT="100%">

The style for ms-main is not defined in the core.css file or anywhere else. It can be easily defined in a custom style sheet to implement a banner image or apply background color to the entire portal area. For example, the following code in the custom Theme declares the background color for the banner on top of the page:

.ms-main {
    background-color: #FFFBD8;
}

And here's the code that removes ...