An HTML Programmer’s Guide to SharePoint Customization

Setting up Your New Master Page and Page Layout

SharePoint has a number of built-in master pages, page layouts, and style sheets that come out of the box. While it's possible to customize these directly, you'll find it much simpler and safer to leave the default files alone and create your own. Copy the built-in files if you're only looking to change some colors and fonts, and then override the default styles with a custom style sheet. In that case, you can use SharePoint's default master page and page layouts. Heather Solomon has a great MOSS 2007 CSS Reference Sheet to help you with that on her site. In contrast, if you're planning to overhaul the design completely, you should consider rewriting the master page from scratch using your own HTML and styles. This article focuses on the latter approach.

Microsoft provides a guide for creating a minimal master page. The page contains all the .NET components and code, and all the content placeholders you'll need, but none of the HTML. Heather Solomon has also created a minimal master page that makes a great starting point; hers is organized better, and is well-commented.

After creating a prototype master page, you'll want to upload it into SharePoint and test it out. To do that, you need to add it to the Master Pages Gallery, which initially contains the default master page and page layouts. To access the gallery, open up your SharePoint site and click on the "Site Actions" menu in the top-right, then select the "Site Settings" menu item. You'll find the Master Page Gallery listed under "Galleries." Use the "Upload" menu at the top of the Master Page Gallery to upload your new master page to the gallery. Now, if you go back to the "Site Settings" menu, you can change your site to use your new master page by clicking on "Master Page" under the "Look and Feel" category and selecting your new master page.

Creating Page Layouts

Sam Fu has an excellent guide that describes how to set up a custom content type and page layout from scratch. Alternatively, you could copy one of the default page layouts to rename and customize as you like.

After uploading and testing the minimal master page, you'll find your site to be very empty. The only things you should see are the Site Actions Menu and some of the other components that are being pulled in from the page layout and the .NET components on the master page, such as the navigation. It's now up to you to fill in the blanks with your HTML and CSS.

Adding a Style Sheet

The first thing you should add to your master page is a custom style sheet reference. You upload your custom style sheet to the Style library, where SharePoint stores all the default style sheets. To access the Style Library, go to "Site Libraries and Lists" or "View All Site Content" and select the Style Library. For now, just upload an empty file until you figure out exactly which styles you'd like to use. Eventually, your custom style sheet will contain all the custom styles that support your HTML, as well as styles that will override the default styles found within SharePoint. Most of these default styles are contained in a file called Core.CSS within the Style Library. Because this example uses a custom master page, you've already stripped out most of the default HTML, so your new site won't use most of the Core.CSS styles. However, you'll still probably want to override the styles that apply to the Site Actions menu, the web parts, the built-in navigation component, and any other built-in components you're using.

Make sure your custom style sheet reference occurs below (after) any other style sheet references in the master page. That will cause yours to take priority, which is important because you want to make sure your styles override the default SharePoint styles in the other style sheets. You can also reference custom print or mobile style sheets in your master page. Here's a sample style sheet link tag:

   <link rel="stylesheet" type="text/css" href="/Style Library/en-us/Custom Styles/SiteStyles.css" />

Choosing a Document Type

While there's a lot of debate on which document type (typically termed "doc type") is the best to use in SharePoint and in web development in general, there are a few things to keep in mind if you're trying to write standards-compliant code. .NET 2.0, which is the basis of SharePoint, will automatically convert many aspects of your code to the XHTML standard, such as replacing standard HTML
tags with the XHTML equivalent
. However, many of the default SharePoint components are written to either the older HTML 4.01 standard or to no specific standard at all. The best way to achieve strict, standardized, accessible code in SharePoint is to write your own web parts and other .NET components. This is especially true for the default SharePoint navigation. However, if you can be a little lax on standardization, the default components work very well for most browsers. In that case, using the HTML 4.01 Transitional doc type should be sufficient. Just make sure to test your site (both in edit mode and out) early and often in each browser and interface device you are targeting as you build your design.

Aligning your web site with the company brand and having a clean, attractive, and user-friendly interface are vital to your users' acceptance of your site. Having a good understanding of SharePoint's HTML architecture, how content is displayed on your site, and some of the issues you'll run into during development will go a long way toward improving your site's design.