Custom Branding Your SharePoint 2010 Site

One of the easiest ways to figure out SharePoint 2010 branding is to copy a predefined master page and its associated style sheet(s) and then study their content. If you’re using SharePoint Designer, you can copy the content of these files directly into a new MASTER file or new CSS files in the site folder structure with the desired names.

Modify the CSS link in your new master page to point to your new style sheet. Now you can start to experiment with modifying the styles or changing the location of a couple elements in the master page. The CSS file will probably have styles that link to images.

Please note that the markup in the master page includes placeholders for SharePoint content, HTML, and/or CSS positioning to give the page structure as well as new 2010 code related to the Ribbon, accessibility, and other new functionality.

The placeholders are very important in that you must include required ones, or many page layouts don’t work. As a general rule, spend 70–90 percent of your effort in the style sheets and the remainder editing the master page.

SharePoint 2010 includes a minimal master page you can copy that includes the required elements. You might want to start with a predefined SharePoint master page or a master page that you’ve created already to speed up your development.

Page layouts can override SharePoint elements placed in the master. For example, the master can contain instructions for a left navigation element, but a page layout, such as a Welcome Splash page, can override the master and not use that element.

Remember that a master page must be checked in, published with a major version, and approved before visitors can see changes. You need to do this at least one time to even have a new master page available to apply to your site. After a site goes live with your master page, you may want to keep your changes to a master page in a Pending (checked in and published, but not approved) mode until you’re ready for others to see it.

The CSS files don’t need approval — only a major version published for others to see needs this. Realize that when you’re working in a CSS file that’s connected to an active master page, users can see your changes as soon as you publish a major version.