Skip to main content

MOSS UI Tutorial Screencast Series 

Applying Custom Visual Design to a MOSS Website Using Master Pages and CSS

This 10-part instructional series assumes that the trainee is proficient in HTML, CSS, and .NET Master Pages.  The trainee should be comfortable working directly with the code (instead of using design view) in various applications.

The Base Master Page and Base CSS File may be downloaded HERE, and an example HTML template may be downloaded HERE.

Chapter 01    

MOSS UI Tutorial - Part 1:
Master Page Overview and Custom Design Examples

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

Supplemental Slides for Part 1

     
Chapter 02  

MOSS UI Tutorial - Part 2:
Prepping 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..."

Supplemental Slides for Part 2

     
Chapter 03  

MOSS UI Tutorial - Part 3:
Prepping the Files in SharePoint Designer

"Drag and drop the appropriate folders from your local template files into the Style Library folder in SPD..."

Supplemental Slides for Part 3

     
Chapter 04  

MOSS UI Tutorial - Part 4:
Base Master Page Code Overview

"The base master page includes all the components necessary for a MOSS site to render properly, yet it presents a blank canvas for custom visual design..."

Supplemental Slides for Part 4

     
Chapter 05  

MOSS UI Tutorial - Part 5:
Using the Base Master Page to Create a Custom Master Page

"You can use the base master page as a template to create your custom master page..."

Supplemental Slides for Part 5

     
Chapter 06  

MOSS UI Tutorial - Part 6:
Creating a Custom Page Layout

"A page layout dictates how content will be displayed in a page, and how editing of the content will be handled..."

Supplemental Slides for Part 6

     
Chapter 07  

MOSS UI Tutorial - Part 7:
Assigning the Master Page and CSS File

"Why do we assign the custom CSS file via the Site Settings, instead of adding a reference to it in the Master Page code?"

Supplemental Slides for Part 7

     
Chapter 08  

MOSS UI Tutorial - Part 8:
Creating a New Web Page

"After creating a master page and a page layout in MOSS, you can use them to build out pages in the website..."

Supplemental Slides for Part 8

     
Chapter 09  

MOSS UI Tutorial - Part 9:
Tips for Styling the Navigation Control

"You can use the same properties to style a MOSS menu as you would to style a .NET menu. However, most of the styling can be done with CSS..."

Supplemental Slides for Part 9

     
Chapter 10  

MOSS UI Tutorial - Part 10:
CSS Variations in a MOSS Website

"To achieve different color schemes or variations in layout, additional CSS may be applied at the page layout level or subsite level..."

Supplemental Slides for Part 10