Learn SharePoint 2010 Branding

Updated:

Overview

SharePoint Branding is a huge topic. First it re-uses concepts from ASP.NET but enhances them with SharePoint specific components. Second it uses the SharePoint Solution Framework to deploy customizations.

You can easily customize sites with SharePoint Designer. But as a Solution Architect you are responsible for consistency across sites & servers. You need to ensure maintainability & updatability.

Who is this content for?

  • People who want to start with SharePoint 2010 Branding using Visual Studio.
  • People who are developers or have ASP.NET experience.

Note: This training does not include SharePoint Designer.

Results

At the end of this free course you will understand the following:

  • How branding works in SharePoint
  • How you can customize SharePoint
  • How you can deploy customizations to SharePoint

E-Book

Learn SharePoint 2010 Branding

Learn SharePoint 2010 Branding

Learn step-by-step SharePoint 2010 Branding concepts and implementation + ready-to-use C# Solutions for Collaboration and Publishing sites.

 Get the E-Book

Background Knowledge

SharePoint Designer is a great tool, easy to start with and it simplifies a lot of tasks. It has its use cases but the tool requires an experienced and advanced user who understands what he/she really does. You can easily detach a website from its layout. If the layout is updated the website keeps the old design.

If you implement the branding of a corporate website you want to automate the deployment process of your customizations. You want less manual steps and consistency across all sites & servers, easy updatebility and maintainability. Professional SharePoint Branding is more complex than taking an editor and changing a live website.

Differences between Visual Studio and SharePoint Designer Branding
Branding Visual Studio SharePoint Designer
Easy to start -
Easy to maintain -
Easy to update -
Consistency across sites & servers
(Dev, Staging, Production, Backup)
-
Easy source code repository integration -
Great for prototyping -

Branding Concepts

Branding concepts are highly based on SharePoint key concepts including items as pages and libraries including content and configuration files. The following content shows you concepts from ASP.NET and how they fit into SharePoint. It also shows you concepts specific to SharePoint:

Requirements

Please make sure you understand the basics of SharePoint since they are required by the branding concepts:

Master Pages & Page Layouts

A common task for developers is not only displaying data it is also required to display data using a corporate identity. SharePoint branding basically uses techniques you know from ASP.NET like Master Pages and Page Layouts with modifications made by SharePoint.

Note: The wording used all over the internet is different and might differ from this document. I try to stick as close as possible to the documentation by Microsoft. Differences to that documentation are highlighted were they are made.

Master Pages

A Master Page defines a consistent look and feel as well as a consistent set of functionality for all your sites [1][2]. Usually this includes navigation and search:

Schematical graphic of a SharePoint 2010 Master Page with navigation and search. 

As you can see in the SharePoint 2010 Adventure Works publishing site example below there is a consistent layout marked with red color applying to all sites. (The top navigation is missing in this example.)
There are 2 categories of Master Pages:

  1. Site Master Pages
  2. System Master Pages

Site Master Pages

The site Master Page is the Master Page which is used to render the web site when you access it as a user. The left picture shows a site Master Page as it is used by the publishing portal and the right picture shows a site Master Page as it is used by a team site:

SharePoint 2010 Advernture Works Master Page. SharePoint 2010 Team Site Master Page.

Each picture shows a different site Master Page with a different design. Both are site Master Pages seen by the user.

System Master Pages

If you are an author or administrator you can access the site settings of a SharePoint site. You don’t have to but you can define a different Master Page called System Master Page which is sometimes also referred as Application Master Page. This Master Page mostly applies to:

  1. Site settings you access using /_layouts/ in the URL:   
    Site Master Page of a Team Site in Site Settings. 
  2. Web sites you access when viewing a list:  
    Site Master Page of a Team Site in List View. 

Both examples are part of an out-of-the-box created SharePoint 2010 Adventure Works publishing site. As you can see the system Master Page doesn’t use the light blue and white design.

Page Layouts

A Page Layout [3] defines the look & feel and the functionality of content in a page. Since content differs from page to page the look & feel or the functionality is not consistent: For example content, news, product lists or FAQs appear and work very differently.

Therefore you usually have more Page Layouts (not consistent) than Master Pages (consistent). The following pictures show the content area of a SharePoint site:

Schematical graphic of a SharePoint 2010 Page Layout. 

For example:

Page Layout in an Adventure Works SharePoint 2010 Publishing site.

Both Master Page and Page Layout are 2 different files which are rendered as one single HTML page to the browser at runtime:

Rendering of Master Pages and Page Layouts.

Resources

[1] ASP.NET Master Pages,
http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

[2] SharePoint Page Layouts and Master Pages (ECM),
http://msdn.microsoft.com/en-us/library/ms543497.aspx

[3] SharePoint Page Layouts Model (ECM),
http://msdn.microsoft.com/en-us/library/ms544928.aspx

Site Templates

Master Pages and Page Layouts are rendered at runtime as a page to the browser appearing as a single HTML page. In order to define which Master Page should be rendered with a certain Page Layout you need Site Templates defining this combination.

The used Site Template, the Master Page and the Page Layout are stored as a property at a SharePoint site [1].

Site Templates related to master Pages and Page Layouts

This image shows a simplified view about Site Templates related to Master Pages and Page Layouts.

The following picture shows you the selection of a Site Template when you create a new site collection:

SharePoint 2010 Site Template Selection dialog.

Of course a template defines more than just the design. It also defines the activated functionality as well as lists which should be available after site creation.

Note: Some SharePoint sites are created using templates where you can’t set the Master Page or the Page Layout using the UI. Usually these templates are part of SharePoint Foundation 2010 which is of no cost and therefore lacks the flexibility and functionality of SharePoint Server 2010.

These templates are referred as collaboration templates whereas templates allowing you to set both via the UI are referred as publishing templates.

Note: Site Templates are in fact Site Definition Configurations [2]. Since the wording Site Template is easier to understand in this context I use it instead.

Summary

For now this should be enough… the most important thing is that there are Master Pages and Page Layouts rendered at runtime to the browser. Some Site Templates allow you to set both using the UI and other templates don’t allow that.

Resources

[1] SPWeb Properties,
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spweb_properties.aspx

[2] Site Definitions and Configurations,
http://msdn.microsoft.com/en-us/library/aa978512.aspx

Site Definitions

A Site Definition is a collection of Site Templates which are similar. For example templates used to create meeting workspaces are grouped in the same Site Definition.

Templates used to create publishing sites are grouped in another Site Definition.

SharePoint 2010 Site Definitions grouping similar Site Templates.

Site Definitions are a kind of container where similar Site Templates are grouped. Site Templates themselves define things like design (Master Pages and Page Layouts), available functionality or available lists.

Simplified concept describing SharePoint 2010 branding.

The picture above illustrates the connection: A Site Definition contains one or more Site Templates. Each template uses a Master Page and Page Layout which are rendered at runtime as a single HTML page to the browser.

Publishing vs Collaboration

The difference between SharePoint publishing and collaboration is not only the flexibility to set Master Pages and Page Layouts using the User Interface.

A publishing site[1] also has:

  • Additional libraries like Pages where your pages (.aspx) are stored. A SharePoint site is like a container for SharePoint pages.
  • Additional site settings e.g.
    • Master Page allowing you to change the Master Page.
    • Content and Structure showing you a hierarchical view of your sites.
  • A global navigation.
  • Additional security groups like Approvers, Designers or Hierarchy Managers and additional permission levels like Approve or Manage Hierarchy.
  • Additional images, styles, Web Parts, content types, columns or buttons inside the ribbon just to name a few.

Publishing isn’t some kind of template or Site Definition … it’s a mechanism changing the authoring and deployment experience of your web content sites.

Regarding branding publishing allows you to set Master Pages and Page Layouts in a more flexible way or to upload your own custom layouts via the User Interface using no code.

A publishing environment is more like a static website used to display information which does not change very often.

A collaboration environment is more dynamically regarding the information storage or exchange. Lists and libraries are extensively used in a collaboration environment.

SharePoint Publishing

Publishing is about web sites where content doesn’t change very often. Publishing equals a common web site where you directly edit a page via the browser, where you represent a club or a company. You have people with different roles like authors or designers and users which can be anonymous Internet users.

Before we can describe the difference in more detail you need to remember how things are stored in SharePoint. You have Columns containing Meta data for an item or document. You can group Meta data to Content Types which are attached to lists or libraries. Items and documents are stored in Lists or Libraries.

The following graphic shows you how data and information are stored when you are using publishing sites:

Simplified concept describing SharePoint 2010 Publishing.

The simplified picture above illustrates the following: A Site Definition contains one or more Site Templates. Each template uses a Master Page and Page Layout which are rendered at runtime as a single HTML page to the browser. The page is ‘stored’ inside the Pages Library which itself uses Content Types and Columns to store information about the rendered page.

Of course the completely rendered page is not stored in the Pages Library. In fact a kind of dummy page is stored in the Pages Library having information filled in columns and referencing a Page Layout. The Master Page is defined by the site (container of the page).

Within a publishing site you can add or display content using Web Parts, controls or field controls.

Field Controls allow you to edit or display the content filled in columns of the Pages Library.

Authoring a SharePoint 2010 Publishing site.

SharePoint Collaboration

A collaboration site is used if content changes dynamically. Usually you have libraries with a lot of documents. A small group of people are working together on a project or in a team. They share a calendar, they have discussions or tasks… it’s about the extensive use of lists and libraries.

Usually Web Parts show the content stored in lists and libraries:

WebParts showing content stored in a SharePoint collaboration site.

The concept behind a collaboration site is shown in the next picture:

Simplified concept describing SharePoint 2010 Collaboration.

The simplified picture above illustrates the following: A Site Definition contains one or more Site Templates. Each template uses a Master Page which is rendered at runtime as a single HTML page to the browser.

But wait isn’t there something missing? What about the new wiki pages? That’s right the above image is missing them. Wiki Pages are like publishing pages:

  • Both are pages inside a site which acts like a container.
  • Both are stored inside a library which uses content types and columns to store information.
  • Both use a Page Layout to define the appearance and functionality of the content.

Anyway using Wiki Pages in a collaboration environment doesn’t mean you have the full publishing functionality inside SharePoint Foundation. The mechanism of Wiki Pages is partly hidden and hard wired meaning that it can’t be customized using the UI or programming without workarounds.

Wiki Pages are an approach to bring some of the functionality from SharePoint Server to SharePoint Foundation but limiting it so the full flexibility can’t be achieved using SharePoint Foundation.
In fact the above illustration should look like this:

Simplified concept describing SharePoint 2010 Wiki Pages.

The picture above illustrates the following: A Site Definition contains one or more Site Templates. Each template uses a Master Page and a hard wired (Wiki) Page Layout which are rendered at runtime as a single HTML page to the browser.

The Wiki page is ‘stored’ inside the Site Pages library which itself uses a hard wired Content Type and Column to store information from the Wiki Page.

Resources

[1] Publishing features overview,
http://technet.microsoft.com/en-us/library/ff628963.aspx

Additional Information

Deployment Concepts

Deployment concepts show you how each customization can be deployed to SharePoint:

Requirements

At this point you should understand how data is stored in SharePoint and how branding works. SharePoint uses its own Solution Framework you need to use if you want to customize SharePoint. Please make sure you know how development & deployment of customizations work in SharePoint. Both is required to understand branding deployment concepts:

Site Definitions

This guide is part of Learn SharePoint Branding and shows the deployment process of Site Definitions and Site Templates in basics words.

Here you go...

What is deployed?

Deploying a Site Definition involves the following components:

  • Webtemp*.xml
    Site Definition containing a list of Site Templates and a category
  • Onet.xml   
    Containing the Site Templates

Where is deployed?

The Site Definition is written to the file system and allows you to select Site Templates when creating site collections or sites. The Site Template itself is also written to the file system. The onet.xml can contain different templates and each template contains a definition of the used Master Page, Page Layout, created lists or activated functionality.

SharePoint 2010 Deployment Process of Site Definitions and Site Templates

Site Definitions and Site Templates aren’t stored inside a SharePoint database.

Things to know!

  • If you update Site Definitions or Site Templates and you don’t see the changes in SharePoint try to use an iisreset.

Master Pages & Page Layouts

This guide is part of Learn SharePoint Branding and shows the deployment process of Master Pages and Page Layouts in basics words.

Here you go...

What is deployed?

Deploying Master Pages and Page Layouts involves the following components:

  • Feature.xml   
    Feature definition
  • Elements.xml   
    Defines:
    • Which files belong to the feature
    • Where to upload in the site collection
  • *.master and *.aspx   
    Files referenced in elements.xml
  • Assembly
    Code behind for Master Pages or Page Layouts

Where is deployed?

If the feature is deployed to a web application it becomes available at the scope site collection. The feature.xml and the elements.xml are written to the file system in the features folder.

Master Pages and Page Layouts are also written to the same folder.

SharePoint 2010 Deployment of Master Pages and Page Layouts

Assemblies are deployed to the Global Assembly Cache (GAC). Additionally files referenced in the elements.xml are uploaded to the SharePoint library called Master Pages Gallery.

Things to know!

  • If you retract the feature *.master and *.aspx files will remain in the Master Pages Gallery.
  • You need to deactivate and activate the feature if you deploy changes to the elements.xml and want them to show up in the Master Pages Gallery.
  • Changes to *.master and *.aspx files are reflected without feature reactivation.

CSS & Images

This guide is part of Learn SharePoint Branding and shows the deployment process of CSS and Images in basics words.

Here you go...

What is deployed?

Deploying CSS and images involves the following components:

  • Feature.xml
    Feature definition
  • Elements.xml   
    Defines:
    • Which files belong to the feature
    • Where to upload in the site collection
  • *.css, *.jpg and *.xsl   
    Files referenced in elements.xml

Where is deployed?

If the feature is deployed to a web application it becomes available at the scope site collection. The feature.xml and the elements.xml are written to the file system in the features folder. Styles and images are also written to the same folder. Additionally files referenced in the elements.xml are uploaded to the SharePoint library called Style Library.
 
image

Things to know!

  • If you retract the feature files will remain in the Style Library.
  • You need to deactivate and activate the feature if you deploy changes to the elements.xml and want them to show up in the Style Library Gallery.
  • Changes to the files are reflected without feature reactivation.

Ghosted vs Unghosted

As you have seen in the deployment process customizations will be deployed to the web application as well as the file system.

Un-customized or Ghosted Files

While the Master Page and the Page Layout are stored at the file system a reference to the files is stored in the content database of the web application. If you create new sites and pages based on a template the Master Page and Page Layout from the file system are used.

Update Path for un-customized files.

If you update the Master Page or Page Layout and you deploy it with a solution the changes are reflected in the sites and pages you created.

Customized or Un-ghosted Files

SharePoint allows you to modify e.g. Master Pages and Page Layouts either by uploading a file using the UI or by using SharePoint Designer. SharePoint allows you to modify the templates (Master Page, Page Layout) as well as the rendered page. Therefor you have two options:

  1. You can customize Master Pages and Page Layouts so they are detached from the ones of the file system. In this case a copy of the Master Page or Page Layout is stored inside the content database.
  2. You can modify pages so they are detached from the Master Page and Page Layout. In this case a copy of the rendered page is stored inside the content database.

Detachment of Master Pages and Page Layouts.

If you update your solution changes are not reflected on sites and pages with customized files.

The following ASPX pages e.g. are un-customized and can become customized:

  • Default.aspx created using e.g. the Team Site Template
  • Web Part pages created using New Web Part page
  • ASPX files in the Pages Library

The following template files e.g. are un-customized and can become customized:

  • Master Pages and Page Layouts in the Master Pages Gallery   
    http://SERVERNAME/_catalogs/masterpage/Forms/AllItems.aspx
  • CSS in the Style Library   
    http://SERVERNAME/Style Library/Forms/AllItems.aspx

The following files e.g. are not part of this process:

  • ASPX pages e.g. from the /_layouts/ virtual directory

In general any ASPX file which is manually uploaded to a library is considered as a customized file [1].

Customized files affect maintenance and performance.

Disable customizations

You can disable the ability of customizations via SharePoint Designer at Web Application level for all site collections or at site collection level:    

  • http://SERVERNAME/_admin/SharePointDesignerAdmin.aspx
  • http://SERVERNAME/_layouts/SharePointDesignerSettings.aspx

Disable SharePoint Designer in SharePoint 2010.

You can still customize files by uploading via UI.

Resources

[1] Deploy templates,
http://technet.microsoft.com/en-us/library/ff607735.aspx

Additional Information

Implementation

Learn SharePoint 2010 Branding

Learn SharePoint 2010 Branding

Learn step-by-step SharePoint 2010 Branding concepts and implementation + ready-to-use C# Solutions for Collaboration and Publishing sites.

 Get the E-Book