Home - Master Page in Sharepoint Designer 2007

Master Page Overview and Custom Design Examples

The following samples show how common MOSS components may be treated in different visual designs.

Preparing HTML/CSS Templates for MOSS

• When preparing to apply a design in MOSS, it is important to begin with a solid HTML/ CSS template of the design.

• The template may be created with methods outside of MOSS, such as Dreamweaver or Visual Studio.
• The HTML template should include the structure and layout of the web design.
• The HTML template should NOT include a fully styled buildout of dynamic areas such as navigation or content.These dynamic areas will be created and styled with Sharepoint Designer.
• It helps to put placeholder text in the areas that will be created in MOSS (such as "NAVIGATION GOES HERE"). Review the 1st PowerPoint presentation in this series to see examples of MOSS components in a design.

Base CSS For MOSS

Copy the file Eag_BaseCSS.css and use it as a template for your main file. This base CSS file contains several style categories relevant to MOSS:

• Positioning for admin bar
• Positioning for webpart properties editor
• MOSS styles to override
• Styles available for HTML Editors (when editing page content)

Rename the CSS file with a name that is relevant to your project. Save the CSS filein your *_CSS folder in /Style/Library/.

Admin Bar

In the base CSS file, you will see a style for the Admin Bar which corresponds with a <div> tag in the Master Page.

#SP_adminbar {
    text-align: :right;
}

This style ensures that the Site Actions link is aligned the right, where the Site Actions pull-down menu will appear. Other changes may be made to the style as needed.

Webpart Properties Editor

In the base CSS file, you will see  a class for the Webpart Properties Editor which corresponds with a <div> tag in the Master Page.

.SP_editorPosition {
   position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
}

This class ensures that the Webpart Properties Editor will appear at the top left corner of the browser.

MOSS Styles to Override

The default MOSS CSS file is called Core.css. This file should be left intact in all MOSS websites. However, your custom CSS file will be in a position to override styles from Core.css.

The base CSS file gives some examples of common CSS styles which may need to be overriden in your custom CSS file. For example, you may need to alter the font or borders for the body of the Webpart.

div.ms-WPBody {
}
div.ms-WPBody td{
}

Tips:

• Use DOM Explorer in IE or Firefox to find the specific MOSS style that need to be overriden.
• The default MOSS CSS file (Core.css) applies the same class name to different elements. Therefore you may need to pinpoint which element you may want to override in your custom CSS.

For example:

table.ms-topNavFlyOuts
a.ms-topNavFlyOuts

Custom Styles for HTML Editor

MOSS provides a WYSIWYG/HTML editor for editing content in the website. You can create custom styles which will become available in a pull-down list in the HTML editor.

To create custom styles, add the following prefix to the class name:

.ms-rteCustom-

For example:

.ms-rteCustom-SubHeader {
   font-weight: bold;
   font-size: 16px;
   color: #333333;
}