Approaches to SharePoint Branding and Design Customizations

June, 2007

 

Branding and design modifications in SharePoint can be broken down into two categories: formatting – colors, font styles, font sizes, and background images; and layout – changing the placement of items on pages, globally adding or removing key elements to pages, or changing which items globally appear as links.

 

There are a number of approaches and resources available to effect design modifications. Which tool and which approach should be used depend on several factors, including:

• How wide-spread the changes should be
• The skill levels of the individuals applying the changes
• The degree of customization required
• The level of security access available to those making the changes

 

Site logo

A site logo – the logo appearing in the upper-left hand corner of all pages in the site – can easily be changed by the site owner in the Site Settings. The logo can be stored in an image library in the site, which means no access to the server is necessary, and updated versions of the logo can easily be applied. Another advantage is that minimal or no development or graphic design skills are required.

 

The downside is that the change only takes effect in a single site within a site collection. A department with multiple sub-sites would have to apply the same change to each of their sub-sites.

 

Another easy approach that can be taken by any site owner is to apply one of the two-dozen built-in themes provided by SharePoint, which give substantial formatting changes. Pre-built themes contain a set of pre-defined font styles, background images, and color schemes. Like the site logo, no development or graphic design skills are required.

 

Like the site logo, however, the change only takes effect in a single site within a site collection. Also, the set of options is limited to the color schemes or themes provided by SharePoint.

Style Sheets

Style sheets are files custom-coded in the Cascading Style Sheet (CSS) language. Custom style sheets can be used to do more intensive branding of SharePoint. A company’s exact colors or other graphic design standards can be applied through custom CSS files.

 

Another advantage of custom CSS files is that sub-sites can configured to inherit the style sheet from parent sites. So, unlike the first two approaches, style sheet changes can be easily applied to all sites within a site collection.

 

CSS changes, however, are much more difficult to define. Graphic designers with the proper CSS and HTML skills will find that the SharePoint classes have thousands of lines of code in multiple files to sort through and understand.

 

Good tools to use include Visual Studio 2005 and SharePoint Designer, each of which provides toolbars to help sort through all of the style sheet classes.

 

Master Pages

To do more advanced design customizations, such as changes to the layout of SharePoint pages, or to add components to all pages throughout a SharePoint site collection, changes can be made through Master Pages. Master Pages define the global look for a site by defining elements that appear on all pages and by setting aside placeholders where individual pages can put more page-specific items.

 

Master pages can be defined and used at any of the following levels:

 

• Site level – Changes apply to all pages within a single site or sub-site
• Site collection level – Changes apply to all pages within all sites in the same site collection
• Server level – Changes apply to all SharePoint sites and site collections hosted on the same SharePoint server

 

The tools to use for editing master pages, as well as the level of security required, depend on which of the above levels the master page is being edited.

 

At the site and site collection level, master pages can be edited using SharePoint Designer, and can be done by site owners. SharePoint Designer provides good visual support, so that developers can see the effects of their changes. To edit master pages at the server level, Visual Studio should be used, and the master page changes can only be applied by a server administrator. The visual support with Visual Studio is not as strong, however, as it is in SharePoint Designer.

 

Editing master pages is not a change to be taken lightly. The process requires strong ASP.net development skills, as mistakes can cause all SharePoint pages in a site, site collection, or in any site on the SharePoint server, to fail.