710

CHAPTER 23 BraNdiNg sharePoiNt 2010
Because visual upgrade is meant to be a temporary solution when upgrading an old SharePoint
server, it is not intended for SharePoint 2007 master pages to be used long term in this way. To fully
update an existing SharePoint 2007 master page to work with SharePoint 2010, several steps need to
occur. These steps include adding the SharePoint Ribbon control and removing redundant and old
2007 controls. For more information on this process, check out the MSDN article “Upgrading an
Existing Master Page to the SharePoint Foundation Master Page” (
/>en-us/library/ee539981(office.14).aspx
).
Page Layouts
SharePoint Server installations that have the Publishing Feature enabled include another type of brand-
ing that is not available with SharePoint Foundation or Team Sites: page layouts. Page layouts are essen-
tially templates for arranging and creating page content. They enable content authors to create pages
that are based on defined templates. For instance, the same page content could be set up like a news
article or as a landing page just by switching the underlying page layout.
Beyond just defining the layout for the page content, page layouts also define areas of the page that
can be edited, known as field controls, as well as Web Part zones. Web Part zones are special areas
of the page that can contain one or more Web Parts. Unlike SharePoint 2007, SharePoint 2010 allows
content authors to add and edit Web Parts in more areas than just Web Part zones; they can also be
added to HTML content fields in both publishing pages and wiki pages.
You can see a list of all the page layouts available in SharePoint from the same gallery as the mas-
ter pages. Select Site Actions Site Settings. Under Galleries, click Master pages and page layouts.
Several out-of-the-box page layouts are available when creating new pages in SharePoint Server
2010, including Article layouts and Welcome layouts, among others.
Page Layouts, Content Types, and Site Columns . . . Oh, My!
One particularly tricky concept to understand with page layouts is that they are always based on
exactly one content type. Content types are themselves made up of site columns, which can be thought
of as containers for data. When a page layout is created, the available editable field controls that can be
added to the page layout are defined by which site columns are available in the underlying content type.

To put it another way, editable field controls have their data stored in the site columns that define them.
For example, the Article Left page layout that is available out of the box in SharePoint Server is
based on the Article Page content type. This content type has a Publishing HTML site column
named Page Content. The Article Page content type has an editable field control for Page Content;
and any page created from Article Page, when edited, can have Page Content information entered and
saved. When creating custom page layouts, you can use either existing content types, which are
named Article Page and Welcome Page, or you can create your own custom content types.
Using a Page Layout to Create a Page
You can see page layouts in action by creating a new page in a SharePoint Server publishing site:

1. Click Site Actions New Page.

2. Enter a page name and click Create.
Branding Basics for SharePoint 2010

711
3. Click the Page tab in the Ribbon and then click Page Layout (see Figure 23-35).
FIGURE 2335
4. Choose one of the available page layouts, as shown in
Figure 23-36.
As soon as the page layout is selected, the page changes
immediately to reflect the new layout.
Creating a Custom Page Layout
While using the existing page layouts is certainly nice, some-
times you may need to create your own custom page layout.
The following steps describe how to create your own custom
page layout with SharePoint Designer 2010:

1. Open your SharePoint Server site in SharePoint
Designer.


2. From the Site Objects menu on the left side, click
Page Layouts.

3. From the Ribbon, click New Page Layout.

4. From the New dialog, leave Content Type Group set to Page Layout Content Types. For
Content Type Name, select Article Page, and then enter a URL Name of
DemoLayout.aspx
and a Title of “Demo Page Layout,” and click OK. SharePoint Designer will create a basic
page layout and open it.

5. Select the Toolbox pane on the right (if it’s not showing, you can click View from the
Ribbon and then click Task Panes Toolbox), and scroll down to the bottom and expand
SharePoint Controls.

6. Expand Page Fields and Content Fields. Content Fields shows all of the site columns that
were added to the actual content type from which the page layout was created, and Page
Fields shows all of the site columns that were inherited from the parent content type.

7. From the Toolbox Pane, under SharePoint Controls Content Fields, drag Page Content
into the PlaceHolderMain. If you are in Code view, you should see something like the
following:
<asp:ContentContentPlaceholderID=”PlaceHolderMain” runat=”server”>
<PublishingWebControls:RichHtmlFieldFieldName=”f55c4d88-1f2e-4ad9-aaa8-
819af4ee7ee8” runat=”server” id=”RichHtmlField1”>
</PublishingWebControls:RichHtmlField>
</asp:Content>
FIGURE 2336
712


CHAPTER 23 BraNdiNg sharePoiNt 2010
This adds the Page Content field control to the page layout, enabling users to add content to
the page layout.

8. Save the page layout by clicking Control+S.

9. Now the page layout needs to be checked in and approved. To do this, click the Page Layouts
item in the Site Objects menu, find
DemoLayout.aspx, and click on its icon.

10. From the Ribbon, click Check In, select Publish a major version, and click OK.

11. When SharePoint asks whether you want to view or modify the approval status, click Yes.
This opens a view of the Master Page Gallery sorted by Approval Status.

12. Click the arrow to the right of DemoLayout and select Approve/Reject. Then, from the
Approve/Reject dialog, click Approved and OK.

13. Now the page layout is available for use. Click Site Actions New Page. Give the page a
name and click Create.

14. SharePoint creates a new page based on the default page layout. You can switch the page lay-
out to the new one. From the Ribbon click Page Page Layout and select Demo Page Layout.

15. Because this example created a very simple page layout, only the title and the page content
are editable. Edit the content and click Save & Close.
If you make further changes to the page layout, all pages based on the page layout will be automati-
cally updated.
Creating Custom Site Columns and Content Types for Page Layouts

The previous example demonstrated how to create a page layout based on an existing content type.
In this example, you will create a custom site column and add it to a custom content type and then
use that content type to create a page layout:

1. Open your SharePoint Server site in SharePoint Designer.

2. From the Site Objects menu on the left side, click Site Columns.

3. From the Ribbon, click New Column Multi Lines of Text.

4. Name the Site Column “Secondary Content” and select Custom Columns from Existing
group. Click OK.

5. Click Column Settings from the Ribbon, and check the box next to Enhanced Rich Text.
Click OK.

6. Click the disk icon on the top left of SharePoint Designer to save the site column.

7. From the Site Objects menu on the left side, click Content Types.

8. From the Ribbon, click Content Type New.

9. For the Name, enter “Demo Content Type,” set Select parent content type to Publishing
Content Types. Set Select parent content type to Page (all page layouts need to inherit the
Page content type), and set Existing group to Page Layout Content Types, and click OK.

10. From the Ribbon, click Edit Columns Add Existing Site Column.
Branding Basics for SharePoint 2010

713

11. Scroll down to Custom Columns and select Secondary Content and click OK.

12. Click the disk icon on the top left of SharePoint Designer to save the content type.
Now that the content type is saved, you can follow the preceding steps to create a page layout based
on it. Just be sure to select the Demo content type when creating the new page layout.
Controlling the Available Page Layouts
As a site administrator, sometimes you may wish to control or change the available page layouts that
content authors can use when creating pages. This can be easily managed by clicking Site Actions
Site Settings Look and Feel Page layouts and site templates. From this menu you can allow users
to select any page layout or you can create a list of page layouts from which users must select. This
menu also enables you to select the default page layout that will be used when pages are first created.
Figure 23-37 shows the Page layouts and site templates menu.
FIGURE 2337
Cascading Style Sheets
Cascading style sheets (CSS) are a type of markup language that is focused on defining the look
and feel of data, most often HTML content. CSS is a very important concept for creating a branded
SharePoint site. Many of the aspects of the way SharePoint displays information are ultimately con-
trolled by the CSS that is loaded. Master pages almost always have CSS that is loaded, Web Parts
often have CSS that styles them, and even themes inject colors and fonts into CSS. Before undertaking
714

CHAPTER 23 BraNdiNg sharePoiNt 2010
any decent amount of SharePoint branding, one should be well versed in how CSS works in traditional
web design. For more information about CSS, check out Professional CSS: Cascading Style Sheets for
Web Design, 2nd Edition, by Christopher Schmitt et al. (Wrox, 2008).
CSS in SharePoint 2010 is loaded differently from how it was loaded in SharePoint 2007. SharePoint
2007 loaded almost all of its CSS via the
core.css file. SharePoint 2010 contains a similar file named
corev4.css that loads a large amount of CSS, but several other CSS files are loaded onto the page
dynamically based on what controls are being used at any given time.

Applying CSS to SharePoint
When custom CSS is being used to create a branded SharePoint site, you have several options for
applying the CSS. The most popular way to load custom CSS is to reference it from a custom master
page. The command for adding CSS to a master page is as follows:
<SharePoint:CssRegistration name=”/Style Library/sitename/style.css”
After=”corev4.css” runat=”server”/>
One reason why this method is popular is because for heavily branded sites, custom CSS is often
tied directly to custom HTML in a custom master page. By applying CSS inside the master page, the
CSS and the master page are always linked together.
SharePoint Server publishing sites have one other easy method for adding CSS to a SharePoint site,
known as Alternate CSS. This method enables the CSS styles to be easily selected and applied to a site
and all of its subsites without having to change the master page at all. In SharePoint Server publishing
sites, you can find this setting at Site Actions Site Settings Look and Feel Master page. Scroll to
the bottom to find Alternate CSS URL. Figure 23-38 shows the System master page setting.
Where to Find Branding Features
One thing that SharePoint administrators often want to understand better is where everything lives
in SharePoint. For branding, this typically refers to master pages, themes, page layouts, and CSS.
Here is a breakdown of the places where branding frequently is found in SharePoint:
Master pages
Master pages reside in the Master Page Gallery of a site collection’s content database. From

SharePoint Designer, this can be found at _catalogs/masterpage.
The master pages in the Master Page Gallery are often provisioned there automatically when

the site collection was created. These provisioned files are based on master pages that have
been loaded in the SharePoint root folder, either out of the box or via SharePoint solution
packages.
Themes
Custom themes are uploaded to the site collection’s content database and live in the Themes


Gallery. From SharePoint Designer, this can be found at _catalogs/theme.
Branding Basics for SharePoint 2010

715
FIGURE 2338
Page Layouts
These reside in the Master Page Gallery of a site collection’s content database. From

SharePoint Designer, this can be found at _catalogs/masterpage.
The page layouts in the Master Page Gallery are often provisioned there automatically when

the site collection was created. These provisioned files are based on page layouts that have
been loaded in the SharePoint root folder, either out of the box or via SharePoint solution
packages.
CSS
CSS can live in many locations in SharePoint. Here are some of the more common:
Most custom CSS lives in the site collection’s content database under the Style Library folder.

Much of the out-of-the-box CSS is loaded from the SharePoint root folder from subdirecto-

ries under 14\TEMPLATE\LAYOUTS.
716

CHAPTER 23 BraNdiNg sharePoiNt 2010
Customization and Solution Packages
One common pitfall when dealing with SharePoint branding is the topic of customization. In
SharePoint 2003, customization was known as unghosting and uncustomized pages were referred
to as ghosted, but those terms have been deprecated since SharePoint 2007.
Because branding in SharePoint frequently involves changing out-of-the-box files, customization can
happen easily (and sometimes happens unexpectedly when someone who is inexperienced is working

with SharePoint Designer). The following sections describe how these files work in SharePoint.
Uncustomized Files
When a SharePoint site is created, its files are actually instances of files from the SharePoint server’s
file system that are provisioned into the content database. When a browser visits one of these pages,
SharePoint looks in the content database and sees that the page is based on a file that resides in the
file system, retrieving it from the file system and presenting it to the user. These types of files are
known as uncustomized files, and they represent many out-of-the-box files such as master pages,
page layouts, and content pages. Different SharePoint sites on the same farm can point to the same
files on the file system as long as all of them are uncustomized.
Customized Files
Any time one of these uncustomized files is changed via the SharePoint web user interface or through
SharePoint Designer, the changed version is stored in the content database and the file becomes
customized. When a browser visits a customized page, SharePoint looks in the content database,
sees that the file is customized, and simply displays the contents of the file as it was stored in the
content database. On the face of things, this doesn’t seem too bad, but from an administrative per-
spective there can be maintenance issues with customized files.
For example, if a master page is installed via a SharePoint solution package (WSP) and activated on
a site collection as a feature, and then later that master page is customized in the site collection with
SharePoint Designer, subsequent changes to the original solution file will not affect that customized
master page. This can get even more confusing when several site collections are all based off of the same
solution package and then one of the sites is customized. The sites’ branding can become out of sync; and
depending on how long the customizations go undetected, synchronizing them could be challenging.
Using SharePoint Solution Packages to Apply Branding
If customization can cause problems, how is SharePoint Designer effectively used to create branding
without customizing everything? The answer to this is simple: SharePoint Designer can be used to
create branding on a development server or a local virtual machine that is set up to closely mimic
the production environment. When the branding files are completed, they can be packaged for
proper deployment to the production server.
This involves loading all of the master pages, page layouts, custom CSS, and images, and any other
branding assets, into a Visual Studio project and creating a SharePoint solution package (WSP).

Branding that is installed on a SharePoint server via a WSP will create files that are uncustomized.
You can learn more about creating solution packages in Chapter 13, “Adding Functionality with
Features and Solution Packages.”