Real World Branding With SharePoint 2010 Publishing Sites

c

Learn essential concepts to help you create engaging user interface designs in Microsoft
SharePoint Server 2010 publishing sites.

! xntroduction to Real World Branding with SharePoint 2010 Publishing Sites
! athering Design Requirements for a SharePoint Publishing Site
! Planning for SharePoint Branding Tasks
! reating Realistic Design omps for SharePoint Site Designs
! reating the Adventure Works Travel HTML
! reating .css files for Adventure Works Travel
! Testing SharePoint Webpage Design in Multiple Browsers
! reating the Brand in SharePoint
! Adding .css and xmage Files to SharePoint
! Building the Master Page with HTML
! Building Out .css Rules for the SharePoint Site Design
! reating a ustom Page Layout
! ^diting a Page Layout with SharePoint Designer
! Packaging and Deploying SharePoint Branding
! onclusion
! Additional Resources
x
c

Microsoft SharePoint Server 2010 publishing sites use Publishing Features to provide capabilities to create
engaging web content management (WM) sites. Frequently used as xnternet-facing websites, these
sites require the use of custom-designed user interfaces (Uxs) to establish an online corporate identity.
reating custom-designed Uxs, either on a traditional HTML page or in Microsoft SharePoint Server 2010,
is known as website branding. Publishing sites use master pages, page layouts, Web Parts, and cascading
style sheets (.css files) to enable designers and developers to create branded websites with designs that
can rival those of many current and popular websites today. This article focuses on the mechanics of
properly planning and creating a design for an external, xnternet-facing website with a publishing site, as
shown in Figure 1. The article uses a fictitious travel company, Adventure Works Travel, as an example of
a company that wants to create an extensively branded SharePoint site.

!"

#
$
c %
&

When you are ready to create a great design for a SharePoint site, you first need to take time to plan the
site well. Use a planning phase to gather design requirements for site elements such as master pages
and page layouts. By properly understanding what the business objectives are before starting to code,
you can avoid difficult and time-consuming rewrites later in the project lifecycle.
athering design requirements begins by holding a formal requirements gathering session. Whether the
site you are designing will be used by 10 users or 100,000 users, some requirements must be met before
the project is considered a success. Depending on how complex the site will be, adjust the level of detail
to the requirements that you will gather. For example, large sites (either with many pages or many users)
might require more time to gather requirements than a small and simple site would. xnvolve key
business, marketing, and xT stakeholders in requirements gathering to ensure that their ideas are
considered and to ensure that all key stakeholders completely approve the project. Requirements
gathering can often be difficult for a branding project and sometimes it is delegated to the marketing
department or even outsourced to external consultants. Although involving key stakeholders is important,
also consider whether involving more people in the decision-making process will increase the time needed
to gather requirements and whether it will magnify the overall complexity of the project. For this reason,
carefully consider who will provide the most relevant input when considering which stakeholders to
include.
The following sections describe some of the more important concepts to understand before starting any
SharePoint branding project.

After requirements gathering is complete, first decide whether to base the website on Microsoft
SharePoint Foundation 2010, or on a server running Microsoft SharePoint Server 2010 with the Publishing
Features enabled. Publishing sites are built on SharePoint Foundation, and there are many advantages to
building engaging xnternet-facing websites with publishing sites. Some of the benefits of creating a brand
with SharePoint Server publishing sites and SharePoint Foundation sites include the following:
! ^nables content authors to create webpages with a more robust rich-text editing experience than
SharePoint Foundation sites offer.
! xncludes master pages that target publishing sites and that use specific code assemblies that take
advantage of publishing Features.
! âsier control of web navigation from the web Ux, and more options are available to the
designer.
! Uses the Web Ux to easily change a master page and to apply master pages to all subsites below
the current site.
! Uses page layouts to create templates at the page level. Uses text layouts to accomplish a form
of simple page layout. Text layouts are not configurable.
! Use the ' token to target HTML assets with URLs that are relative to either the site
collection ($SPUrl;~sitecollection/) or site root ($SPUrl:~site/)

For the purposes of this article, a publishing site is a SharePoint Server 2010 web application with a site
collection in the top-level (root) directory that has the Publishing Features enabled. For simplicity,
Publishing Features are already enabled for the default Publishing templates (( )

!
and

). This article uses the ( )

!
template for the Adventure Works Travel
example.
To learn more about setting up web applications and site collections, see Prescriptive uidance for
SharePoint Server 2007 Web ontent Management Sites.
&" &

$

Before starting to design and code your site, decide early what browsers and operating system platforms
the design will support. Although you should strive to create site designs that render as perfectly as
possible in every browser and every operating system, it is often impossible or impractical to even test
the design for this level of browser compatibility successfully. Typically, it is good to pick a segment of
browsers and operating systems to specifically test against, and code with the intent to support them
when branding the site.
One good way to choose a level of browser and operating system support is to consult industry websites
that study and provide web traffic analysis. Net Applications Market Share lists the top 10 web browsers
by total market share for June 2010 as shown in Table 1.
"

!
*
" &+!
xnternet ^xplorer 8 25.18%
Firefox 3.6 15.67%
Firefox 3.5 5.24%
hrome 4.1 5.16%
Safari 4.0 3.83%
xnternet ^xplorer 8 ompatibility Mode 3.35%
Firefox 3.0 2.65%
Opera 10.x 1.88%
Microsoft designates browsers by the level of support in SharePoint. The levels include:
! )) A supported web browser is one that works with SharePoint Server 2010, and all
features and functionality work as expected.
! ))
!

A supported web browser with known limitations is one
that works with SharePoint Server 2010, although there are some known limitations. Most
features and functionality work, but if there is a feature or functionality that does not work or is
disabled by design, documentation on how to resolve these issues is readily available.
! A Web browser that is not tested means that its compatibility with SharePoint
Server 2010 is untested, and there may be issues with using the particular web browser.
For more information about the levels of browser support in SharePoint, see Plan Browser Support (Office
SharePoint Server).

xnternet ^xplorer 6.0 is not supported by SharePoint 2010. Although you can create a master page that
would display web content properly in xnternet ^xplorer 6.0, it would not be compatible with the
authoring experience for SharePoint 2010, which requires a browser that is based on modern standards.
The Adventure Works Travel example for this article focuses on an end user browsing experience that is
as accurate as possible in xnternet ^xplorer 7, xnternet ^xplorer 8, and Firefox 3, and which ensures that
several other modern browsers (including oogle hrome and Apple Safari) also render very well.
"
, &

$

Another area for consideration is the screen resolution that the new design should target. Many years
ago, monitors supported only a subset of resolutions, such as 640 x 480. As monitor prices have
decreased, it is more common to see website visitors browsing in 1920 x 1200 and in higher resolutions.
Most web designers consider 1024 x 768 to be the most common screen resolution, followed closely by
1280 x 800. When creating a design that is intended to be displayed in a SharePoint site, remember that
SharePoint renders a lot of information at once in the user's typical screen resolution. The available space
for displaying content becomes even smaller when you consider that browser toolbars and scroll bars also
consume a percentage of the available display area on the screen.
For the Adventure Works Travel example, the minimum screen resolution is 1024 x 768. The design
allows for some padding to accommodate scroll bars. Because of the padding, the site was designed to
be no wider than 960 pixels.
$ &

&

$

To help ensure the success of a branding initiative, define some of the more subjective goals of the
design. Which audiences will use the site? What tasks does the typical user of the site want or need to
complete? How will users want to navigate the site? Are users expecting to do business with a company
that has a more traditional image, or are they expecting to do business with a less traditional company?
Unlike the software development process, the design process is subjective for every business situation.
Design decisions are often disputed between stakeholders until a brand identity is decided upon. Because
brand ideas can be difficult to gauge, it is also good to identify the success criteria for a new brand.
Success criteria can be as simple as attracting more visitors or as complex as calculating an increase in
sales across major demographics. The more quantifiable and measurable the success criteria are, the
easier it will be to determine the relative success of the branding effort.
The design of the Adventure Works Travel site caters to a younger set of users that is looking for an edgy
look and feel. These users will be comfortable navigating the site with the top and left navigation and
with SharePoint Server 2010 search. The users' primary reason for visiting the site will be to learn about
adventure destinations and to book vacations. The brand is that of a travel company that caters to
individuals who are looking for a vacation that is more adventurous than just a typical stay at a hotel on
the beach.

&

"!
The process of actually coding branding for a SharePoint site involves several steps, such as creating
master pages, page layouts, and cascading style sheets (.css files). The planning process for building a
SharePoint brand can also include several steps, such as creating black-and-white wireframes, creating
full-color website design compositions (or comps), and creating functioning HTML and .css file versions of
key pages. The following sections describe these activities as they relate to creating a branded
SharePoint Ux.

)
& &

$

A wireframe is typically a set of black-and-white block diagrams that visually describe the overall
structure of a website and its layout, navigation, functionality and, in some cases, even its content.
Because of the subjective nature of web design (or even design in general), it is good to discuss these
topics in wireframe form instead of getting mired in colors and photo preferences. When completed
correctly, wireframes can provide a guide for developers and designers about the functionality and layout
to apply in later stages of the branding process.
There are many ways to create wireframes, from drawing with simple pen and paper to modeling with
dedicated software tools such as Microsoft Visio 2010. Using dedicated software tools can be very helpful
when you are creating wireframes because you can take advantage of prebuilt stencils that map to
specific capabilities of specific applications such as SharePoint. You can find many free templates and
stencils that you can use to create wireframes for SharePoint sites.
As you create wireframes, decide what SharePoint functionality is supported by the brand. Some of what
SharePoint displays by default is not appropriate for every xnternet-facing website. Figure 2 labels the
major functional areas of a SharePoint interface, and Table 2 describes these areas.

+-&
&

&
" +-&
&

&

$
)
&

.
The entire top portion of the Ux is part of the ribbon. What is displayed depends
A Server ribbon
on the user's current context.
The main menu for interacting with SharePoint, used primarily by content
B

authors and administrators.
A new implementation of the global breadcrumbs control that was first
lobal
introduced in Microsoft Office SharePoint Server 2007. When clicked, the icon
breadcrumbs
displays a dynamic HTML that shows a hierarchical view of the site. Use it to
control
navigate up levels of the hierarchy from the current location in the hierarchy.
The button used to control the page state, and that typically displays a shortcut
D

button to edit or save the current page.
Tabs present menus that are specific to the functions of the SharePoint site.
Ribbon
^ What is displayed changes based on what the user is interacting with on the
contextual tabs
page. Some of the items will not be used on every site.
This menu shows the welcome message and enables the user to view their
profile, to sign out, and to sign in as a different user. xf other language packs

F are installed, the functionality to change the user's language is also available
menu
here. When the user is not logged on, the menu also shows the

x link.
The button that opens the Developer Dashboard that typically appears at the
bottom of the screen. The Developer Dashboard contains statistics about the
Developer
page rendering and queries. This icon is shown when the Developer
Dashboard
Dashboard's display level is set to / $ (other options include / and
button
/&&). Administrators can set the Developer Dashboard display level by using
Windows PowerShell or by using the SharePoint APx.
Sometimes referred to as site icon. xt typically shows the SharePoint site icon,
H Title logo
but can display a user-defined logo instead.
This is a breadcrumb-like control that is specific to the 0 master page.
xt includes the
"
and the placeholder for Title in Title Area, which
x Breadcrumb
typically contains the "
. The
"
is linked to the top level of the
site.
J Social buttons Used for marking items as liked and for adding tags and notes to content.
lobal Sometimes referred to as the ").
! or ")

, it is the
K
navigation primary horizontal navigation mechanism for the site.
L Search area The search box is used to enter terms for performing searches on the site.
M Help button The help button links to the SharePoint 2010 help documents.
Provides current navigation. Sometimes referred to as the . &

. xt
N 1
!. is the secondary or vertical navigation mechanism of the pages related to the
current location.
Provides a Windows ^xplorerƛstyle representation of the site. Because of its
O Tree View
appearance, the tree view is often better suited for intranet sites.
Provides a link to the c
for the site, which is the area where items
P c

are stored when deleted. Typically, this is better suited for intranet sites.

A link to the All Site ontent page. This was the *

link in
Q
Office SharePoint Server 2007. Typically, this is better suited for intranet sites.
Represents the main content placeholder that includes all of the content that is
R Body area
specific to the page. Required for rendering the content of the page.
When creating wireframes for a SharePoint site, be sure to consider the several types of pages that
SharePoint could support. Some examples of the types of pages that can exist in a SharePoint site include
the home page, landing pages, search results pages, articles, and wiki pages.
Figure 3 shows the Microsoft Visio 2010 wireframe for the Adventure Works Travel website.

2*

& & !"

You can see from the wireframe page that the Adventure Works Travel site supports some SharePoint
functionality but not all of it. For example, some elements such as the Help button, Tree View, and
Recycle Bin will be omitted from the Ux. By making these decisions at the wireframe stage, developers do
not have to build unnecessary functionality.

c

$
)&

$

Although creating wireframes can certainly help to support any serious branding effort as you plan a new
SharePoint site, you should create a complete design comp or prototype before any coding begins. Unlike
wireframes, most web design comps are intended to mimic the appearance and behavior (look and-feel)
of an actual website as closely as possible without actually creating any code. omps include realistic
static versions of photos, logos, colors, fonts, form elements, and other design or structural artifacts that
might appear on the page. For a SharePoint site, emulating page contents means emulating many of the
functional areas of the SharePoint user interface.
Although you can create design comps with any graphics application (or even with a pencil and paper),
applications such as Adobe Photoshop or Microsoft ^xpression Design can make the task much easier.
Use these applications to create an easily maintained and reusable design comp for SharePoint sites.

Although this article does not refer to specific features of Adobe Photoshop or Microsoft ^xpression
Design, general concepts and processes are described and similar features may be available in these and
similar design applications.
The following sections describe capabilities that are common to applications that are used to create
design comps.
'
. . #)
$
))

) (
Use layers and layer groups to separate design elements into specific units. xnstead of creating design
elements in a "flat" file, layers behave as if each new layer is placed on top of the previous layer.
Designers can hide, show, manipulate, move, and apply effects such as drop shadows and borders to
individual layers without affecting the other design elements. When using a design tool to create a design
comp, it is a good idea to make new layers for every element in the design.

(
" 3
$
))

reate editable text by using a wide variety of fonts, sizes, and styles. Without this feature, text that is
created in basic design programs is static and must be erased before each change. By using a modern
design tool, you can resize text, display text in a bold font, color the text, or change its font changed and
much more without erasing the previous state.

& x
$
))

Save images easily in web safe file formats such as .jpg, .gif, and .png. Many design programs can help
you create images in a small web-friendly file size without compromising their quality.

c

$
)
$
))

When you are creating design comps, it is tempting to use the power of the design tool to create designs
that are highly polished or finished. Be careful not to create a design that is so finished that it looks nicer
than a browser can actually render on a SharePoint page. Text is one such limitation. xn Adobe
Photoshop, each piece of text can use different antialiasing techniques. Antialiasing is a mechanism that
reduces distortion of images at lower resolutions. Small text in particular appears much smoother in
Photoshop than browsers can replicate. To not set expectations too high, it is a good idea to avoid using
anti-aliasing with small text.
xn addition to text antialiasing, consider the appearance and behavior of SharePoint. To accurately
replicate SharePoint functionality in a design comp, take screen shots of each of the pieces of SharePoint
functionality and paste them into the design.
For example, as the Adventure Works Travel design comp is created, various colors and styles are
finalized. Stock photos must be acquired, fonts must be selected, and logos must be created. âch
element is created in its own layer, and effects such as gradients and borders are created as layer effects
to make it easier to make changes later. apture SharePoint elements such as the Server ribbon or the
search box and paste them into the design tool, and finally arrange these elements in an appealing way.
Figure 4 shows the final Adventure Works Travel design comp.

0 !
)

As you create the design comp, decide how to replicate the concepts in SharePoint. Figure 5 shows the
same design comp with labels applied that highlight each functional area. Table 3 describes the functional
areas.

4
&

)
" 2+-&

)

. $
)

xncludes all of the standard ribbon elements such as the

menu and
A The ribbon
menu.
B Title logo
Search area
D lobal navigation
urrent
^
navigation
F Breadcrumbs Uses the
+) control.
Field control
H Field control
x Web Part
J Web Part

$
)
5"+.
onvert the design comp into a functioning HTML page. You can skip this step for simple designs, but for
complex designs, completing it enables the designer to work in a familiar environment. The HTML code
can be used later to create the master page in a tool such as Microsoft SharePoint Designer 2010. By first
creating a functioning HTML version, you can fine-tune the HTML for the master page without having to
work around the code that SharePoint adds to the display. When this step is finished, there should be a
functionally complete HTML version of the site's key pages. All cascading style sheet code for the basic
layout is complete and all images are sliced from the design comp and saved to individual files.
There are many toolsets available to designers for creating HTML. Tools range from Notepad or another
text editor to simply code the HTML, to professional webpage development tools such as Adobe
Dreamweaver or Microsoft ^xpression Web. The following is a list of some of the advantages that a
professional webpage development application can offer to designers:
! Support for HTML and cascading style sheet code completion
! WYSxWx (What You See xs What You et) design views
! Tools that help with the creation of cross browser webpages
$/"6(

When you are creating cross-browser compliant HTML, it is important to understand how HTML
$/"6( declarations work. A $/"6( is a declaration that instructs a browser or validator to use a
specific language to interpret the HTML or XML code that it describes. Although it is possible to create
HTMLƜand even master pagesƜthat do not declare a $/"6(, without one, browsers can render
HTML code in unexpected ways. For example, without a valid $/"6( declared, xnternet ^xplorer 8
will render an HTML page in Quirks Mode (which is similar to how xnternet ^xplorer 5.5 would render a
page).
There are several $/"6( declarations in use currently that can cause a browser to render content in
a predictable way. The most popular $/"6( declarations are the following:
! 5"+.0
Allows all HTML elements but does not allow deprecated elements such as
the tag.
! 5"+.0"

Allows all HTML elements, including the deprecated elements.
! 5"+.
Similar to HTML 4.01 Strict, but all tags must be well-formed XML (for
example, tags must be closed properly). Any deprecated elements are ignored.
! 5"+."

Similar to HTML 4.01 Transitional, but all tags must be well-formed
XML. Deprecated elements are allowed (but must also be well-formed XML).
Because SharePoint 2010 uses the XHMTL 1.0 Strict $/"6( declaration in its default master pages,
use the XHTML 1.0 Strict $/"6( when creating HTML that is intended for use in SharePoint 2010.

By default, SharePoint 2010 sites will probably not be 100% valid XHTML 1.0 Strict through any World
Wide Web onsortium (W3) validation checker. Some of the legacy controls are still used in SharePoint
2010. Although the pages will not completely validate, the design experience will be more reliable if
XHTML 1.0 Strict is used to code SharePoint HTML. The examples in this article use the XHTML 1.0 Strict
$/"6(.
To create an XHTML 1.0 Strict document in an HTML editor tool, ensure that you create a new blank
HTML document that specifies $/"6( as XHTML 1.0 Strict. (For more information about the XHTML
1.0 Strict $/"6(, see the W3 XHTML 1.0 Strict Specification.) The blank HTML page that the tool
creates will open with the following markup.
opy
<!DOTYP^ html PUBLx "=//W3//DTD XHTML 1.0 Strict//^N""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd><html
xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv="ontent-Type"
content="text/html; charset=utf-8" /><title>Untitled Document</title></head>
<body></body></html>
From here, create the rest of the HTML. Be careful to follow the W3 guidelines for creating valid XHTML
1.0 Strict code. For more information about the XHTML 1.0 Strict $/"6(, see the W3 XHTML 1.0
Strict Specification. The rest of this section focuses on specific points related to creating HTML for a
SharePoint design. For more information about creating HTML code, see the MSDN HTML and DHTML
Overviews and Tutorials.
$

"
Another design choice that is often debated is whether the HTML design layout should use tables or
whether it should use tags with .css styling. Historically, all HTML layouts were created with tables to
allow for a rich Ux, but as browsers have evolved, so has the support for cascading style sheet-based
layouts. Because HTML tables were originally intended to display tabular information, not to create
layouts, they are falling out of favor with web designers.
You should consider that by default SharePoint 2010 contains fewer tables than previous versions, and
tables are mostly used in SharePoint 2010 only when displaying tabular data. The Adventure Works
Travel HTML code does not use tables and uses cascading style sheets for its entire layout.
5"+. x (3) )

As new versions of xnternet ^xplorer are released, the way HTML is rendered by the browser could
change over time. To address the possibility of changes, Microsoft uses the X-UA-ompatible M^TA tag
that targets HTML markup to a specific version of xnternet ^xplorer. The default SharePoint 2010 master
pages are set to force current and future versions of xnternet ^xplorer to render HTML in xnternet
^xplorer 8 mode like the following markup:
<meta http-equiv="X-UA-ompatibile" content="x^=x^8" />
The Adventure Works Travel HTML includes the M^TA tag to help ensure future xnternet ^xplorer
versions will display the SharePoint HTML properly.
For more information about the xnternet ^xplorer Standards Mode, see M^TA Tags and Locking in Future
ompatibility.

$
)
x
Although creating a design comp is useful for understanding how the webpage should look, use it to
create all of the individual images that HTML will load. One great way to break up a large image into
individual web images is to use the Slice tool in a design application such as PhotoShop or ^xpression
Blend.
To create web images from a design comp, open the Slice tool from the appropriate menu in your design
application. reate rectangular selections around all of the areas that have to be made into web images,
and be sure to hide any layers that are unwanted in the final images (such as the mocked-up text that
SharePoint creates). lick each slice and select an appropriate web image file format. For slices that
should not be turned into images, there should be an option to associate a slice with no image. Typically,
.jpg files should be used for photos with many colors, and .gif files or .png files should be used for
artwork and text or images that need transparent backgrounds. Files in .png format introduce the ability
to include faded levels of transparency, while .gif files have only 100 percent transparent areas.

!"
5"+.
Now that all of the individual web images created, the next step is to code the HTML and .css files for
Adventure Works Travel. Adobe Dreamweaver S3 was used to create an XHTML 1.0 Strict HTML file.
The rest of the HTML markup can be found in the associated files that are available for download with
this article (see MSDN Sample - Real World SharePoint Branding on MSDN ode allery).

The HTML in this example does not use tables for layout, but instead frequently uses tags to segment the
logical areas of the page. This HTML was checked by using the W3 Markup Validation Service and is
XHTML 1.0 Strict compliant.

&
& !
"
Because .css code is used for all of the layout design, the HTML markup alone will not create an
attractive webpage. Find the .css code that was created to style all of the colors, fonts, images and
positions for the elements in the HTML in the associated files available for download with this article (see
MSDN Sample - Real World SharePoint Branding on MSDN ode allery). This .css file was linked from
the Adventure Works Travel HTML file by way of the following code in the <head> section.
opy
<link rel="stylesheet" href="style.css" type="text/css">
For more information about creating .css code to style an HTML webpage, see MSDN SS Reference.
"

) $

+
)
Now that all of the HTML, images, and .css files are created, you can test the webpage to ensure that it
looks as similar as possible to the design comp. Figure 6 shows the finished Adventure Works Travel
webpage in xnternet ^xplorer.

7) !" )
x (3)
Before converting an HTML design into a functional SharePoint site, test the design in as many browsers
as possible. xn addition to xnternet ^xplorer, by installing Mozilla Firefox, oogle hrome, and Apple's
Safari for Windows, you can test a web design for many different browsing scenarios. Another option for
testing in multiple browsers is to use ^xpression Web Super Preview. This application is available in
^xpression Web 3 and is also available as a free download that tests only xnternet ^xplorer versions. The
full version can test browsers that are not created by Microsoft, such as Firefox. Both versions can display
pages side-by-side by using different rendering engines, and both can enable very intricate inspection of
even the smallest differences.

Now you will focus on creating a brand in a publishing site. You will learn to work with a starter master
page and add custom HTML markup and .css code to create a master page that closely resembles the
original Adventure Works Travel HTML page. Finally, you will learn about page layouts, including how to
create a page layout for Adventure Works Travel. This section will help you complete the the Adventure
Works Travel SharePoint branding.

+
When it comes to building a brand for a SharePoint site, the master page is of central importance. ^very
page in SharePoint uses a master page for laying out the functionality and content that makes up a
SharePoint site. One of the keys to creating a well-branded website with SharePoint is creating a good
master page. Because you already created a design comp and authored the design in HTML, you can use
it to create a custom master page.
'

xn addition to referencing and using all of the specific SharePoint controls, master pages in SharePoint
require a specific set of content placeholders. xf these required content placeholders are deleted from a
master page, SharePoint displays an error in the browser. Many times the required content placeholders
are not used in a particular site design; in these cases it is helpful to have a way to hide the required
content placeholders. Remove content placeholders from the rendered page without causing an error by
nesting them within a hidden panel control. The following code shows a content placeholder placed in a
hidden panel.
opy
<asp:Panel visible="false" runat=server>
<asp:ontentPlaceholder xD=PlaceHolderNavSpacer"> runat="server" />
</asp:Panel>
For more information about how content placeholders are used in the SharePoint default master page see
The Default ontent Placeholders on Default.Master in a Windows SharePoint Services 3.0 Site.
"
+
Because SharePoint requires many specific content placeholders, creating a custom master page from
scratch can be challenging. Although any of the default master pages can serve as the starting point for a
new custom master page, they contain a lot of branding code that must be deleted before starting. A
better approach is to begin with a starter master page, a preconfigured master page skeleton that
includes only the functionality that is absolutely required to create a functioning page in SharePoint. For a
list of the content placeholders used in a SharePoint Server 2010 master page, see Upgrading an ^xisting
Master Page to the SharePoint Foundation Master Page.
The downloads for this article include a well-commented starter master page designed for use with an
xnternet-facing publishing site. For the most part, this is a traditional starter master page for SharePoint,
but it uses a few publishing-specific elements, most notably the navigation controls. The starter master
page should work with most of the default SharePoint 2010 pages including Application pages (such as

), lists, and documents.
âch section of the starter master page has comments that label which functional area of SharePoint is
represented. The following sections describe some of the key aspects of working with master pages in
SharePoint 2010, specifically as they relate to the starter master.
!

c

The starter master page is set up much like the default master pages so that it has the ribbon "stuck" to
the top of the visible page. With the Ribbon Positioning System enabled, SharePoint manages the page
scrolling and enables large pages to scroll and still show the ribbon at the top of the browser window at
all times. To accomplish this, page scrolling is turned off in .css code and on the tag, and the main body
content (everything that is below the ribbon) is placed inside two specific tags, as follows.
opy
<div id="s4-workspace">
<div id=s4-bodyontainer">
...
</div>
</div>
SharePoint looks for these tags and adds scrolling to only that area and not the ribbon. Because of how
the Ribbon Positioning System manages the scrolling and placement of the ribbon, it may be necessary to
turn it off and use a more traditional scrolling method when working with very complex .css layouts. To
learn more about how the Ribbon Positioning System works, or how to change it to use a more traditional
scrolling method, see ustomizing Ribbon Positioning in SharePoint 2010 Master Pages.
5

3

) $

Part of the Ribbon Positioning System in SharePoint 2010 involves setting the page width and height
automatically based on how large the browser window is. The default SharePoint branding uses the full
browser width for its layout; custom branding that uses a fixed width (often centered in the middle of the
page) must have a special .css class named s4-nosetwidth applied to the !) element. The starter
master page is set to use this instance of the s4-nosetwidth class; it should be removed for designs that
must take up the full width of the browser.
!

) $

One of the key aspects of branding in SharePoint is the cascading nature of the style sheets in .css files.
xf two .css rules have the same specificity, the .css rule that is loaded last is the style that is applied to an
element. For more information about this concept, see the W3's Assigning Property Values, ascading,
and xnheritance.
Microsoft has taken full advantage of the cascade and uses it as the primary means of overriding default
styles with custom styles. The bulk of the .css style that is loaded by default in SharePoint comes from
the orev4.css file and several other related .css files that are loaded on the fly by SharePoint 2010 as
particular pages need them. orev4 and the other default .css files are loaded from the
[..]\14\T^MPLAT^\LAYOUTS\1033\STYL^S folder, which is located in the SharePoint root folder where most of the
SharePoint installation files can be found.
For a list of all of the styles loaded default in SharePoint 2010, see ascading Style Sheets lass Usage in
SharePoint Foundation.
A primary branding task is to override the default styles with custom .css that will restyle the SharePoint
functionality to match the overall website branding. xn SharePoint 2010, Microsoft added the &
property to allow custom .css to always come after specific .css files such as the default oreV4.css file.
The following code shows the & property being used to load a custom cascading style sheet.
opy
<SharePoint:ssRegistration name="/Style Library/sitename/style.css" After="corev4.css" runat="server"/>

The & property requires a more complete path to load a .css file after other custom .css files. For
example, to load another .css file after the custom style.css file, use the following code.
<SharePoint:ssRegistration name="/Style Library/sitename/morestyles.css" After="/Style Library/sitename/style.css"

runat="server"/>
The ssRegistration in the starter master page is set to look for the custom .css in the Style Library of the
publishing site under the SiteName subfolder. You should replace the SiteName folder referenced in the
starter master page with the name of an actual site.

When making references to web files such as a custom style sheet, SharePoint Server 2010 provides the
' token for making site collection root-relative URLs or site root relative-URLs. The style sheet
reference in the starter master page could be written to use this functionality, as follows:
<SharePoint:ssRegistration nameơ<% $SPUrl:-sitecollection/Style Library/sitename/style.css %>ơ After=ơcorev4.cssơ
runat=ơserverơ/>
The benefit of using this method can be seen when branding is deployed to a site collection that is not
located at the web application root. Using a URL that is relative to the site collection ensures that styles
are loaded from the site collection's own Style Library and not from the root site collection's Style Library.
The disadvantage of using this method is that Design View cannot display some assets when referenced
this way. For simplicity, this article does not use the 'c. variable in its URLs.

x) &

$
3
One powerful new feature in SharePoint 2010 is the dialog framework. Many menu pages are loaded in
modal dialog boxes that appear over the main page content. This affects branding because by default all
custom branding including logos, headers, navigation, and footers all appear inside of dialog boxes. To
prevent branding elements from displaying in dialog boxes, SharePoint 2010 provides a cascading style
sheet class called s4-notdlg. When this class is applied to an element, SharePoint 2010 automatically hides
that element from dialog boxes. This class x used throughout the starter master page to hide branding
from dialog boxes.Figure 7 shows custom branding being applied to a dialog box.

8

3
5

When displaying xnternet-facing publishing sites, xnternet ^xplorer browsers display an annoying
message when they do not have the SharePoint 2010 server added to their trusted sites list. This
message asks the user to add the Name.dll ActiveX ontrol.
Typically, this control is not used by anonymous users of SharePoint and the request to load it can be
quite alienating to users who are not familiar with SharePoint. You can turn off the message on the
#
page of the + ))

section of

. Set
( /
& to .
You can suppress the message by adding ^MAScript (JavaScript, JScript) code to the master page. The
starter master page includes the following ^MAScript code, which will hide the message.
VB

F
JScript
opy
This language is not supported or no code example is available.
For more information about presence, see Presence in SharePoint 2010.
5
.
xn most cases, because xnternet ^xplorer 6 is not a supported browser for SharePoint 2010, Microsoft
recommends warning xnternet ^xplorer 6 users that their experience may be degraded. Microsoft
provides a / ' )) control that can be used in master pages to warn users
about unsupported browsers, as shown in the following example.
opy
<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>
The starter master page uses the / ' )) control near the bottom of the code;
to turn off the alert, remove that control from the master page.

+

$

After the code for a starter master page is ready, add the master page to SharePoint. Microsoft
SharePoint Designer 2010 is well-suited for this task.
" )

$

1. Open a SharePoint Server 2010 publishing site in Microsoft SharePoint Designer 2010.
2. xn the
/- panel, click + . This is the master page gallery where all master
pages and page layouts are created.
3. On the ribbon, click !+ , and then name it ! .
4. lick the file named ! , and on the ribbon, click (

. SharePoint
opens the new master page with its default content.
5. Select all of the content, and then press $ to remove it. Next, copy the contents of

(available with the article downloads) and paste it into
AdventureWorks.master.
6. To save the changes, click in SharePoint Designer 2010.
7. On the
/- menu, click + , right-click ! , and
then click !x . On the !x menu, select
-
, and then click
/9.
8. Because there is an approval workflow applied to the master page gallery, a warning appears
that says ù"
%
))$

&

)) ù lick 6 .
9. The SharePoint web interface opens in a browser. xf you are challenged to authenticate, log on
with your user name and password.
10. The + # opens with a view grouped by )) . lick to the right of
! , and then click )) :c - .
11. For )) , select )) , and then click /9.

To add master pages to SharePoint, check them in as major versions, and publish and approve
them before users other than the one who has the file checked out in order to enable users to
access a site that has had the master page applied to it. The same is true for any changes to the
master page: other users will see updates only if the changes are checked-in as a major version,
published, and approved.
When working with SharePoint files in SharePoint Designer 2010, be aware that SharePoint puts them in
a customized state, which can impact site maintenance. The final section of this article describes the
process for deploying branding files to SharePoint in an uncustomized state. Because of customization, it
is best to work on branding files in SharePoint Designer only in a development environment, instead of
working on final versions of files on a production server running SharePoint. For more information about
creating uncustomized files in SharePoint, see Understanding and reating ustomized and Uncustomized
Files in Windows SharePoint Services 3.0. Although this article addresses the previous version of
SharePoint, all the concepts and code still apply to SharePoint 2010.
))
+
With the master page checked in and approved, the next step is to apply the master page to the
SharePoint site.
")) )

1. lick

, click

, and in the .! section, click + ) .
2. For
+ and + , select ! , and then
click c

+
.
3. ^nsure that the 'c. is set to ' +
&

&
. lick /9.
By applying the master page to both the Site Master Page and the System Master Page, all publishing
pages and the application pages will be styled with the custom branding. This is a new feature in
SharePoint 2010; by default, in Office SharePoint Server 2007 custom master pages did not apply to
Application pages such as the

menus. One potential disadvantage to applying a highly
stylized master page such as Adventure Works Travel as the System Master Page is that more testing is
required to ensure that all settings pages and lists render the correct custom branding. The decision to
apply a custom master page to the System Master Page is purely a business decision.

ustom master pages that are applied to application pages sometimes have specific user interface needs.
For example, in

, the ' and

menus must have the PlaceHolderLeftNavBar
content placeholder visible in the custom master page to show people and groups. Also, sometimes if
elements such as required content placeholders are missing, the Application pages do not display an
error. xnstead, they revert back to displaying the standard v4.master page.
With the starter master page applied, the site's look and feel is blank and ready to have a brand applied
to it. The starter master page is certainly not very attractive, but that will be addressed in the following
sections.

; ) ))
)

x

The branding for Adventure Works Travel requires .css files and images to work properly. They were all
created for the HTML mockup earlier and are included with the downloadable code associated with MSDN
Sample - Real World SharePoint Branding.
"
&
.

1. From the
/- menu, click
. From the
list in the main window, click
.
.
2. On the ribbon, click to create a new folder, and name it !.
3. lick the new ! folder, and then drag all of the images, favicon.ico, and
style.css from the HTML Branding folder in the MSDN Sample - Real World SharePoint
Brandingarticle downloads.
4. Select all of the files that were added to the .
, right-click, and then select !
x .
5. On the !x menu, click
-
, and then click /9. Because the Style
Library does not have an approval workflow applied to it, approving the files will not be
necessary.

+
5"+.
After all of the branding files are added to the SharePoint site, the next step is to start adding in code
from the HTML design to the starter master page. While adding the HTML, this is also a good time to
start moving areas of the starter master around in the overall layout and make any other site specific
changes. Verify that Adventure Works.master is open in SharePoint Designer 2010 and that it is checked
out for editing. To check out the file, click + on the
/- menu. xn the main
window, if there is no green check mark next to AdventureWorks.master, right-click the file, and then
click !/ .
For the Adventure Works Travel site, this process begins with the section of the starter master page.
Three areas of the section have text for Site Name that can be changed to !, including
the 5 "
, x , and c

placeholders.
VB

F
JScript
opy
VB

F
JScript
opy
VB

F
JScript
opy
Adventure Works has its own custom style sheet, so the inline .css code that is included in the section of
the starter master page can be moved to the path Style Library/AdventureWorks/style.css.

You can ignore the entire ribbon section of the code. Unless there are unique circumstances, most master
pages can use the default ribbon code.
Next, copy and paste everything from the original HTML design between the <form> and </form> tags into
the master page after the <div id="MSO_ontentDiv" runat="server"> tag. The next sections describe which
areas of SharePoint functionality will be moved up from the lower parts of the starter master page into
the pasted HTML code.

Some of information below may be tricky to follow, so it may be helpful to open the final version of the
Adventure Works master page, which is available with the article downloads, and follow along.
"
)
5"+.
1. Adventure Works is a public-facing xnternet site, and the decision was made to hide the ribbon
for anonymous users and instead show a simple ' .
link. When users are authenticated,
the User Login link disappears and the full ribbon is displayed at the top. The code is not included
by default in the starter master page. An <asp:Loginview> tag is used to show different HTML code
for anonymous users and logged in users. The new custom <div> tag contains that code.
opy
<div class="customTopLeft">
<asp:LoginView id="LoginView1" runat="server">
<AnonymousTemplate>
<div class="customLogin"<a href="/_layouts/authenticate.aspx">User Login</a></div>
<style type="text/css"
body s4-ribbonrow {
display: none; }
</style>
</AnonymousTemplate>
<LoggedxnTemplate>
<style type="text/css">
.customLogin {
display: none; }
</style>
</LoggedxnTemplate>
<asp:LoginView>
</div>
2. Because the customTop <DxV> tag should not show in the dialog boxes in SharePoint Server 2010,
the s4-notdlg .css class must be added.
opy
<div class="customTop s4-notdlg">
3. The static search HTML is replaced with the PlaceHolderSearchArea placeholder and the
SmallSearchxnputBox delegate control.
opy
<div class="customSearch">
<asp:ontentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SharePoint:Delegateontrol runat="server" ontrolxd="SmallSearchxnputBox" Version="4"/>
</asp:ontentPlaceHolder>
</div>
4. The customHeader <DxV> tag should not show in the dialog boxes in SharePoint 2010, so the s4-
notdlg .css class must be added.
5. The static link back to home (<a class="customLogo" href=" "><img src="logo.png" alt="Back to Home"
title="Back to Home" /></a>), is replaced with a custom logo (<div class="customLogo">) tag and the
SharePoint link button <SharePoint:SPLinkButton> and <SharePoint:SiteLogoxmage> tag from the starter
master page are moved into it. Also, the .x ' tag is changed from
to
!. These changes are shown in the following markup.
opy
<div class="customLogo">
<SharePoint:SPLinkButton runat="server"
NavigateUrl="~sitecollection/">
<SharePoint:SiteLogoxmage LogoxmageUrl="/Style Library/AdventureWorks/logo.png" AlternateText="Back to Home"
ToolTip="Back to Home" runat="server"/>
</SharePoint:SPLinkButton>
</div>
6. The static navigation is replaced with the SharePoint lobal Navigation control and the
corresponding data source. You can also remove the .css classes for menu and horizontal
orientation from <div class="menu horizontal customTopNavHolder"> because SharePoint will now handle
this .css code.
opy
<div class="customTopNavHolder">
<PublishingNavigation:PortalSiteMapDataSource
xD="topSiteMap"
runat="server"
^nableViewState="false"
SiteMapProvider="lobalNavigation"
StartFromurrentNode="true"
StartingNodeOffset="0"
ShowStartingNode="false"
TrimNonurrentTypes="Heading"/>
<SharePoint:AspMenu
xD="TopNavigationMenuV4"
Runat="server"
^nableViewState="false"
DataSourcexD="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparatess="false"
Orientation="Horizontal"
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="1"
SkipLinkText=""
sslass="s4-tn">
</SharePoint:AspMenu>
</div>
7. The default SharePoint 2010 status bar <DxV> tags are added between the customHeader closing
</DxV> tag and the customMain <DxV> tag. This is shown in the following markup.
opy
</div>
<div class="s4-notdlg">
<div id="s4-statusbarcontainer">
<div id="pageStatusBar" class="s4-status-s1"></div>
</div>
</div>
<div class="customMain">
8. Next, the left navigation will be added. But because the Adventure Works branding has uniquely
styled navigation, it is a good idea to show only the branded navigation when an Adventure
Works publishing page is created, not on all of the application pages or anywhere else. Use only
the content placeholder for PlaceHolderLeftNavBar and remove any of its usual contents, such as the
AspMenu and data source placeholders. Removing these placeholders enables the Adventure
Works page layout to override the content placeholder with branded navigation, and any other
page that needs left navigation can also override it with its own navigation. For pages that do not
include left navigation, set up the placeholder to hide the left panel entirely so that there is no
empty space on the left side of the interface. Also, notice that the containing <DxV> xD tag and the
lass get combined with the customMainLeft class from the HTML mockup. This combination allows
the default SharePoint .css files to apply to the left navigation and any custom branding for
Adventure Works.
opy
<div id="s4-leftpanel" class="customMainLeft s4-notdlg">
<asp:ontentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
<style type="text/css">
s4-leftpanel {
display: none;
}
.customMainRight {
width: inherit;
padding-left: 10px;
}
</style>
</asp:ontentPlaceHolder>
</div>
9. xn the HTML for the mockup, there is a Trip Planner that appears below the left navigation. xn
SharePoint 2010, this is a good place for a Web Part zone. You add Web Part zones from page
layouts, not from master pages. So to add a Web Part zone, add the PlaceHolderLeftActions content
placeholder below the PlaceHolderLeftNavBar content placeholder. The Adventure Works page layout
will override the PlaceHolderLeftActions content placeholder, and any page that does not override this
placeholder will not display anything in this area of the master page.
VB

JScript
opy
10. The customMainRight <DxV> tag is where much of the page content is. Add the s4-ca class so that
SharePoint can control the area with its own cascading style sheet.
opy
<div class="s4ca customMainRight">
11. Next, place the breadcrumbs, page title, and page description in their own <DxV> section with the
s4-notdlg .css class applied so that they can be hidden for dialog boxes. For the page title and
description, this is as simple as adding the PlaceHolderPageTitlexnTitleArea and PlaceHolderPageDescription
content placeholders. The breadcrumbs involve a bit more work because the default breadcrumb
menu for SharePoint 2010 is the pop-up menu on the top left side of the page. This pop-up
menu works well for intranet sites, but is not an element that would normally appear on public-
facing xnternet sites for anonymous users. To duplicate the functionality of a more traditional
breadcrumb, use the
+) class: <asp:SiteMapPath runat="server" />.
opy
<div class="customMainontent">
<div class="s4-notdlg">
<div class="customBreadcrumbs">
<asp:SiteMapPath runat="server"/>
</div>
<h1 class="customPageTitle"><asp:ontentPlaceHolder id="PlaceHolderPageTitlexnTitleArea" runat="server" /></h1>
<asp:ontentPlaceHolder id="PlaceHolderPageDescription" runat="server" />

</div>
12. The remaining content from the HTML mockup that is in the customMainontent section is handled
by the PlaceHolderMain content placeholder and is ultimately supplied by the page layout. This code
includes the subtitle, the page content, and the Top Activities (which will be a Web Part). Simply
remove all of this section and replace it with the placeholder, as shown in the following example.
opy
<asp:ontentPlaceHolder id="PlaceHolderPageDescription" runat="server" />

</div>
<asp:ontentPlaceHolder id="PlaceHolderMain" runat="server"/>

</div>
</div>
13. Because the customFooter <DxV> section should not appear in dialog boxes in SharePoint 2010, add
the s4-notdlg .css class.<div class="customFooter s4-notdlg">.
14. Move up the Developer Dashboard code from the starter master page code and place it right
after the customFooter closing </DxV> tag.
opy
</div>
<div id="DeveloperDashboard" class="ms-developerdashboard">
<SharePoint:DeveloperDashboard runat="server"/>
</div>
15. Remove any of the remaining starter master page code that is located after the Developer
Dashboard closing </DxV> tag and before the three closing </DxV> tags and the PlaceholderFormDigest
placeholder.
At this point, the Adventure Works Travel master page is complete. You should check in the master page,
publish it as a major version, and approve it so that users can see the changes. Although the master
page is finished at this point, the site still does not look like the final design. The site requires the
addition of much more custom .css code to the style.css file before the look is complete.

/ c &

$

When all of the .css files and images were added to the .
, they included the style.css file,
which included all of the styles that created the look and feel of the HTML design. For the cascading style
sheets to work with the additional SharePoint functionality, several changes need to be made to the .css
code. This section begins with areas of the HTML design's .css code that must be updated, and then
concludes with a large chunk of .css code that is used to style the SharePoint functional elements.

Working with .css code in SharePoint can be very challenging because of the sheer volume of .css rules
that are applied. With over 5,000 lines of .css code in use at any one time, designers and developers
often turn to tools to help them work with .css files in SharePoint. Two such tools are the xnternet
^xplorer 8 Developer Tools and the Firebug FireFox plug-in. Both can be used to inspect and manipulate
.css code that is being applied to a webpage (including SharePoint pages). One key feature that is
common to both tools is the ability to point to areas of the page and get a better understanding of all of
the .css code that is applied to that area, and see which rules are being overridden by the .css cascade.
") &

$

1. Add a color to the a:hover style to ensure that the link hover colors match the rest of the links in
SharePoint.
opy
a:hover {
color: 0077b4;
text-decoration: underline;
2. Add automatic scrolling (overflow:auto) to the main content area.

The branding elements will be used throughout SharePointƜincluding in application pages and in
listsƜso it can be helpful to add automatic scrolling to the main content area. Adding automatic
scrolling enables very wide pages to scroll inside of the branding instead displaying outside of the
branding and showing up over the background.
3. opy
4. .customMain {
5. width: 100%;
6. background-color: white;
7. min-height: 400px;
8. padding:8px 20px;
9. width:937px;
10. overflow:auto;
11. }
12.
13. Adjust the width of the .customMainRight class. The width for .customMainRight is 760 pixels by default.
xf left navigation is hidden, the master page or page layout will adjust the width to expand to fill
the entire middle area.
opy
.customMainRight {
width:760px;
padding-bottom:15px;
float: left;
}
14. Remove several existing styles from the HTML mockup for areas that will have specific SharePoint
styles added later, including styles for the search, navigation, top navigation, and left navigation.
You can remove each of the following classes and all corresponding .css code.
opy
.menu ul
.menu ul, .menu li
.horizontal li
.customSearch input
.customSearcho
.customSearcho:hover
.customTopNavHolder li
.customTopNavHolder li:hover
.customTopNavHolder li a
.customLeftNavHolder li
15. Add several styles to brand the search area, including hiding the default search button, adding a
branded button with a hover, and adding styles for the search box.
opy
/* search button hider */

.customSearch .ms-sbgo img {
display: none;
}
/* fancy search button */

.customSearch .ms-sbgo a {
display: block;
height:17px;
width:32px;
background:transparent url('but_go.gif') no-repeat scroll left top;
margin: 0px;
padding: 0px;
position: relative;
top: 0px;
}
/* search button hover */

.customSearch .ms-sbgo a:hover {
background-image: url('but_go_on.gif');
}
/* search box style */

.customSearch input.ms-sbplain {
font-size:1em;
height:15px;
margin-right: 5px;
background-image: none;
color: 999999;
}
16. Add several styles to handle the various top navigation elements, including hiding the default
arrows, the item style and hover state, the dynamic flyout holder, and the flyout item and hover
state.
opy
/* arrow for flyouts */

.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal span.dynamic-children span.additional-background {
padding-right:0px;
background-image:none;
}
/* item style */
.s4-tn li.static > .menu-item {
white-space:nowrap;
border:0px none transparent;
padding:12px 10px 5px;
display:inline-block;
vertical-align:middle;
color:white;
font-family:arial,helvetica,sans-serif;
font-size: 105%;
font-weight: bold;
background-image:url('dottedline.gif');
background-position:right top;
background-repeat:no-repeat;
background-color:transparent;
}
/* item style hover */

.s4-tn li.static > a:hover {
color: white;
text-decoration: none;
background-image:url('nav_hover.gif');
background-position:right top;
background-repeat: repeat-x;
}
/* flyout holder */
.s4-tn ul.dynamic {
background-color: 1e4b68;
border:0px none;
}
/* flyout item */
.s4-tn li.dynamic > .menu-item {
display:block;
white-space:nowrap;
font-weight:normal;
background-color: 1^4B68;
background-repeat: repeat-x;
padding:4px 8px 4px 10px;
font-family:arial,helvetica,sans-serif;
border-top: 0px;
color: ffffff;
}
/* flyout item hover */

.s4-tn li.dynamic > a:hover {
font-weight:normal;
text-decoration:none;
background-color: b5d8ee;
color: 222222;
}
17. The left navigation has style applied to only the items in the navigation, not the design. Because
the left navigation in Adventure Works Travel will not show flyouts, there are no styles added for
those states.
opy
/* left nav item style */

.customLeftNavHolder li > .menu-item {
background-image:url('arrow.gif');
background-position:left center;
border-bottom:1px solid ^F0^F;
padding:4px 0 4px 14px;
}
18. The Web Parts in the left column need special styling so that their titles include the branding
elements, and to reduce some white space and padding.
opy
/* Web Part title for left column */

.customLeftWPHolder .ms-WPTitle {
color:inherit;
padding:0px;
font-family: Arial,sans-serif;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 0;
text-transform: uppercase;
background-image:url('ticket_bg.gif');
background-position:left top;
height:30px;
line-height:34px;
padding-left:4px;
}
/* Web Part padding for left column */

.customLeftWPHolder .ms-wpontentDivSpace {
padding: 0px;
}
/* Remove some white space from Web Parts in left column */

.customLeftWPHolder .ms-WPHeader .ms-wpTdSpace {
display:none;
}
/* remove border from bottom of Web Parts in left column */

.customLeftWPHolder .ms-WPHeader td {
border-bottom: none;
}
19. After all of the HTML design styles, several SharePoint-specific .css styles are added. âch of the
style rules in this section begins with comments that describe its specific usage. The first few
were the styles that were included inline in the starter master page.
opy
/* hide body scrolling (SharePoint will handle) */

body {
height:100%;
overflow:hidden;
width:100%;
}
/* Pop-out breadcrumb menu needs background color for Firefox */
.s4-breadcrumb-menu {
background: F2F2F2;
}
/* xf you want to change the left navigation width, change this and the margin-left in .s4-ca */
body s4-leftpanel {
padding-right:20px;
}
/* body area */
.s4-ca {
margin-left:auto;
}
/* Fix scrolling on list pages */
s4-bodyontainer {
position: relative;
}
/* Fix the font on some built-in menus */
.propertysheet, .ms-authoringcontrols {
font-family: Verdana,Arial,sans-serif;;
line-height: normal;
}
/* Nicer border between top bar and page */
.ms-cui-topBar2 {
border-bottom: 1px solid 666666;
}
/* Hide the hover state for the ribbon links */
s4-ribbonrow a:hover {
text-decoration: none;
}
/* Fix ribbon line height */
s4-ribbonrow {
line-height: normal;
}
/* Make site settings links look normal */
.ms-linksection-level1 ul li a {
font-weight:normal;
}
/* Hide the left margin when dialog is up */
.ms-dialog .customentered, .ms-dialog .customMain, .ms-dialog .customMainRight {
margin-left:0 !important;
margin-right:0 !important;
min-height:0 !important;
min-width:0 !important;
width:auto !important;
height:auto !important;
background-color: white !important;
background-image: none !important;
padding: 0px !important;
overflow:inherit;
}
/* Dialog bg */
.ms-dialog body {
background-color: white;
background-image: none;
}
/* Fix dialog padding */
.ms-dialog .s4-wpcell-plain {
padding: 4px;
}
After the last style rules are added to style.css, the .css code for the Adventure Works Travel branding is
complete. heck in and publish the style.css file as a major version so that end users can see the
changes. Figure 9 shows the much improved SharePoint branding.

< )

-

The content part of the page still does not look like the design mockup. This area will be branded with a
custom page layout.

.
Use page layouts as a type of page template in publishing sites to give designers and developers a way
to create different types of page designs that will live inside of the master page design. xn addition to
overriding the content placeholders from the master page, page layouts also define all of the editable
content areas of the page with field controls, Web Parts, and Web Part zones. To learn more about the
differences between field controls and Web Parts, see Understanding Field ontrols and Web Parts in
SharePoint Server 2007 Publishing Sites. Although this article targets , the concepts and capabilities still
apply to SharePoint 2010.
^very page layout in SharePoint is created from one specific SharePoint content type. A content type
defines all of the site columns that can be used to store data for the page. These site columns make up
the available field controls that can be used in the page layout. For simplicity, the Adventure Works
Travel page layout will use the existing default Welcome Page content type. This content type has
enough site columns to create an Adventure Works Travel page and the existing home page layout can
be swapped out easily with the new page layout.
" ! )
1. On the
/- menu, click . .
2. On the ribbon, click . .
3. xn the New page layout window, do the following:
Y For ") #), select . ") .
Y For ") , select .
Y For 'c. , type =. )3.
Y For "
, type ! .
4. lick /9.
SharePoint Designer opens the new page layout with the PlaceHolderPageTitle and PlaceHolderMain content
placeholders already created.
VB

F
JScript
opy
(

.

$

Next, you will edit the Adventure Works Travel page layout by adding field controls and Web Part zones.
You can add these elements easily from specific task panes in SharePoint Designer.

Page layouts must be edited using Advanced Mode in SharePoint Designer 2010. xf you attempt to edit a
page layout in Normal Mode, all of the content will be highlighted in yellow to indicate that it is not
editable. New page layouts are opened automatically in Advanced Mode; when opening existing page
layouts, on the ribbon, point to (

, and then click (

+ .

Use the Toolbox pane in SharePoint Designer to add field controls to a page layout. Simply drag the field
controls you want to use from the Toolbox pane to the content control that will contain them.
>
To add a Web Part zone to a content control, select the content control in SharePoint Designer by using
the Design View or Split View, and then on the ribbon, click > . Adding a Web Part Zone
creates an empty Web Part zone that can be given a more useful title to help content authors identify it
when editing the page.

!" .
Finish the page layout for Adventure Works Travel by adding controls, inline styles, and other elements to
it.
"&

!" .
1. Add the PlaceHolderAdditionalPageHead content control and some inline styles to control the width of
the left and right areas of the page.
VB

F
JScript
opy
2. Add the PlaceHolderPageTitle content control to the page layout and add the text !
? before the PageTitle field control. These actions insert the text before the page title and place all
of it into the HTML page title.
VB

JScript
opy
3. Add the PlaceHolderPageTitlexnTitleArea content control with the TitleField field control inside of it. These
controls add the page title before the page content.
VB

JScript
opy
4. Add the PlaceHolderLeftNavBar to the page to add the c .

! title from the HTML mockup,
followed by the left navigation AspMenu and data source that was removed from the starter master
page. These additions cause the branded left navigation to appear for pages created from this
page layout.
VB

JScript
opy
5. The PlaceHolderMain content placeholder starts with the <WebPartPages:SPProxyWebPartManager />

control, which is added automatically by SharePoint Designer when Web Part zones are being
used in a page layout. Next, the omments field control is added to enable content authors to edit
the subtitle of the page. Then, the PublishingPageontent field control is added. This control contains
the main publishing HTML content of the page.
VB

JScript
opy
This is all of the code that is needed to create the Adventure Works Travel page layout. Before content
authors can create pages based on this page layout, the page layout must be checked in, published as a
major version, and approved.

. &
With the custom page layout completed, you can create new pages that are based on it. This is certainly
useful for filling the site with new content, but there is still one step that must be completed to make the
home page look like the initial design comp. Because the home page is using a default page layout, you
need to replace the home page with the custom Adventure Works Travel page layout.

The site template that is used to create the publishing site determines which page layouts are available to
select. Depending on which page layout you used to create your publishing site, you may need to change
the available page layouts before your new page layout will be available to select. To change the
available page layouts, click

, point to

, point to .! , and click

) . This settings page has an option for . from which the
available page layouts can be selected. The easiest way to try out a several page layouts, including the
new custom page layout, is to select

, and then click /9.
"
& ) )
1. lick

, and then click (
.
2. On the ribbon, click , and the click . . xn the drop-down list under the
group, select ! .
3. The page refreshes and the new page layout is applied to the page, as shown in Figure 10.

!" )

From here, the page can be edited to include any content, including the subtitle, page content, and any
Web Parts. xn SharePoint Server 2010, Web Parts do not have to be added to Web Part zones; they can
also be added to rich HTML content areas in publishing pages and wiki pages. Figure 11 shows the final
page with all of the content from the HTML mockup added.

!" )

After all of the changes are finalized, just click the small icon at the top left of the ribbon or click
, and then click @ . xf the publishing workflow is activated for the pages library, the
page must be published and approved before end users will be able to see the new content.
!
$ )

At this point, the Adventure Works Travel site branding is created and applied to an existing SharePoint
publishing site. Although creating and applying branding in this way works well for testing demonstration
purposes, the next step finalizes the branding work by packaging the branding files (including images,
.css files, ^MAScript and markup in both the master pages and page layouts) in a way that the branding
files can be added to other environments. The final package enables site designers to easily distribute the
branding files. The following are a few ways to complete this step.

$ ) /)

To deploy custom branding files, the first option is to simply use the site collection backup and restore.
This option is not ideal in an xnternet-facing scenario because all of the files will remain as customized
files. For more information about the differences and implications of customized and uncustomized files in
SharePoint, see Understanding and reating ustomized and Uncustomized Files in Windows SharePoint
Services 3.0. When branding files are deployed and managed as customized files, site rebranding
campaigns can get complicated. Therefore, an uncustomized branding and management process is
preferred, especially for highly trafficked sites and those filled with a significant amount of content.
When deploying uncustomized branding files, publishing site implementers can pick from among a few
different options when deciding where to deploy the files. The following are the three most popular and
common options:
! Deploy branding files to the site's top-level folder.
! Deploy branding files to the sites _layouts directory.
! Deploy branding files to the site collection's content database.

âch of these options has distinct advantages and disadvantages, all addressed in the MSDN article
xmplementing a Brand in a SharePoint Server 2007 Publishing Site. The remainder of this article assumes
that the last option, deploying branding files to the site collection's content database, will be used.
Deploying branding files to the site collection's content database makes the maintenance and potential
future rebranding campaigns much easier to carry out. All the files will be deployed to the site collection's
master page gallery and .
, both found in the root site of all SharePoint publishing site
collections.
To deploy branding files to the site collection's content database, you must provision files into the site
collection's content database--specifically to the + # and .
, by using the
SharePoint Feature framework. The Feature framework contains a way to create customized and
uncustomized instances of files in the SharePoint content database. The source files, including images,
.css files, ^MAScript libraries, master pages, and page layouts, are deployed as part of the Feature and
stay on the file system. When the Feature is activated, it provisions an uncustomized instance of source
files to the specified location.
Deploying branding files to the site collection's content database is usually handled by developers and
administrators as it involves putting files on the file system and creating Features and SharePoint solution
packages (.wsp files).

!
$ ) /

The packaging and deployment approach selected and demonstrated in the remainder of this article
allows each individual responsible for their own area of expertise to focus only on that area. This makes
for a much cleaner and smoother process of implementing and deploying a new brand for a publishing
site. For example, up to this point this article has addressed two of the three components in building a
custom SharePoint brand:
! reate the brand with SharePoint in mind by taking into account considerations such as the
menu and

controls.
! xmplement the brand in SharePoint by using master pages and page layouts, by overriding the
SharePoint default .css code, and by adding certain ^MAScript code to work around some issues
that are unique to xnternet-facing sites.
These two components are the responsibility of the person who has the role of site and branding
designer. The third component is usually served by the role of the site developer who creates the
SharePoint Feature and WSP that is used to deploy and provision the files to the site collection. The
designer needs to turn the branded publishing site over to the developer for packaging. The site
developer pulls the files out of the site collection and adds them to a new Feature, then includes that
Feature in a solution package (.wsp file), deploys the .wsp file, and tests the branding files by activating
the Feature. xf the site designer and developer work in different environments, as is the case when the
branding is outsourced, the easiest approach is for the designer to back up the site collection by using
Windows PowerShell, send the backup file to the developer, and ask the developer to restore the site
collection into a new SharePoint web application.

The remainder of this article assumes that the reader has created two web applications:
http://test.adventure-works.com and http://test1.adventure-works.com. The http://test.adventure-works.com web
application should be empty, containing no site collections. The http://test1.adventure-works.com web
application should contain a single site collection at the root that is based on the Publishing Portal
template.
" &

&$
$ )
xf both the designer and developer work in the same shared environment, there is no need to back up to
transfer the site collection from one environment to another. However, if the branding work was
outsourced to an outside vendor such as an agency, the developers need an easy way to get a copy of
the implemented brand. This is quite easy.
The designers of the site can back up the site collection and send the backup file to the developers. The
backup can even be sent through email because it is likely that the site collection is not very big and does
not contain any content. Back up the site with Windows PowerShell, as shown in the following example.
opy
PS :\> $siteollection = et-SPSite | Where-Object {$_.Url -eq [URL US^D WH^N RÂTxN AND T^STxN TH^ BRAND]}
PS :\> Backup-SPSite -xdentity $siteollection -Path ":\AdventureWorksBranded.dat"
Deliver the c:\AdventureWorksBranded.dat file to the developers. The developers can restore the site into their
environment. Microsoft recommends restoring backed-up site collections to the root of a new SharePoint
web application that has no other site collections. Restoring backups in this way ensures that there are
no possible files in other sites that may be accidentally referenced. To restore the site collection into the
http://test.adventure-works.com site, use Windows PowerShell again, as shown in the following code.
opy
PS :\> Restore-SPSite "http://test.adventure-works.com" -Path ":\AdventureWorksBranded.dat"
Windows PowerShell prompts you to confirm that you want to restore the site.
When using the backup/restore method to move a site collection from one environment to another, there
is one more step that most developers will want to apply. Because the two environments are likely from
different domains, the primary site collection administrator is no longer a valid account in the restored
environment. Quickly change this in

by selecting the

link on the Application Management page. Select the site collection to which the
backed-up site was restored, and change the primary site collection administrator to the account that will
be used to log on to and extract files from the site.
Developers now have a local copy of the branded publishing site.

*

- 5 !

Now that developers have a local copy of the branded publishing site, the next step is to create the Visual
Studio 2010 project that will contain the Feature and that will be used to create the solution package. xn
Microsoft Visual Studio 2010, Microsoft introduced robust SharePoint development tools to make this task
straightforward and easy. The SharePoint development tools in Visual Studio 2010 are included in the
Visual Studio 2010 installation.
" 3

&
& ) )

*

)-
1. reate a new SharePoint 2010 project in Visual Studio 2010 by using the ^mpty SharePoint
Project template, making sure you select the .N^T Framework 3.5 as the target framework
version.
2. When prompted by Visual Studio 2010 in the SharePoint ustomization Wizard, pass in the site
collection URL (http://test1.adventure-works.com) to test the project against, and specify it as a Farm
solution.
3. Add the containers for the files to the Visual Studio project.
4. opy the files from the publishing site to the Visual Studio project.
5. Modify the project file to include all of the added files.
6. Add the .
files.
7. Add the files in the + # .
Add the .
files.

.

*

opy the files from the publishing site's .

into the project. Open the .
in the
browser, switch to (3) view, and copy-and-paste the files into Visual Studio.
"&
&
.
*

1. Set up the Visual Studio project container, or module, for the files in the .
. Right-
click the project name, click , then click x .
2. xn the x dialog box, select + from the
: category and
name it .
+ .
3. xn
(3) , delete the sample.txt file from the .
+ , because it is
simply a placeholder file.
")&
& .

)-
1. xn the browser, open http://test.adventure-works.com.

2. On the

menu, click +
.
3. xn the left folder view, hover over the .
and use the ^dit ontrol Block (^B) menu
to select /)
!

.
4. Double-click the AdventureWorks node in the .
, and then on the ribbon, click
.
on the .
" menu. From the @(3) group, open the project with
Windows ^xplorer.
5. opy all of the files in the AdventureWorks node in Windows ^xplorer and paste them to the
.
+ in the Visual Studio project.
XML
opy
<ModuleName="StyleLibraryModule"
Url="/Style Library/AdventureWorks"
RootWebOnly="TRU^">
Now, each file that will be provisioned into the .

must be added to the + element as
a child
element. âch entry should specify the name of the file and the ") of file to be
provisioned. The two ") options are # and # x .
. Both provision an
uncustomized instance into the site collection, but because these files must be registered as content
within the .
, set the type to # x .
. xn addition, the ' attribute of each

element must be updated so that the files are placed in the location specified by the +
element. To update the ' attribute, remove the subfolder specified in the ' attribute by updating the
+ element to the following markup.
XML
opy
<?xmlversion="1.0" encoding="utf-8"?>
<^lementsxmlns="http://schemas.microsoft.com/sharepoint/">
<ModuleName="StyleLibraryModule"
Url="Style Library/AdventureWorks"
RootWebOnly="TRU^">
<FilePath="StyleLibraryModule\bg.gif" Url="bg.gif" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\but_go.gif" Url="but_go.gif" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\but_go_on.gif" Url="but_go_on.gif" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\dottedline.gif" Url="dottedline.gif" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\favicon.ico" Url="favicon.ico" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\footer_bg.png" Url="footer_bg.png" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\glory.jpg" Url="glory.jpg" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\logo.png" Url="logo.png" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\microsoft_logo.gif" Url="microsoft_logo.gif" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\nav_hover.gif" Url="nav_hover.gif" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\style.css" Url="style.css" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\ticket_bg.gif" Url="ticket_bg.gif" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\wp_topactivities.jpg" Url="wp_topactivities.jpg" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\wp_tripplanner.jpg" Url="wp_tripplanner.jpg" Type="hostablexnLibrary" />
<FilePath="StyleLibraryModule\arrow.gif" Url="arrow.gif" Type="hostablexnLibrary" />
</Module>
</^lements>
Next, add files in the master page gallery.

+ #
The other files required for deploying the Adventure Works Travel custom brand are in the master page
gallery. There are two files in this gallery that need to be moved:
! AdventureWorks.master, which is the custom master page that is used to implement the brand.
! AW_layout.aspx,
which is the page layout that is based on the default Welcome Page content type
used for the site home page.
"&
&
+ # *

1. Set up the Visual Studio project container, or module, for the files in the .
. Right-
click the project name, click , then choose x .
2. xn the x dialog box, select + from the
: category, and
then name it + # + .
3. xn
(3) , delete the sample.txt file from the + # + ,
because it is simply a placeholder file.
Now files can be retrieved from the site collection and added to the Visual Studio project.
" ) )
1. xn the browser, open http://test.adventure-works.com.

2. On the

menu, click

. xn the #
section, select + )
) .
3. Download copies of the two files AdventureWorks.master and AW_layout.aspx. To do this, select
the item and on its drop-down menu, point to ", and then click $ ). Save
both files to your desktop.
4. Using Windows ^xplorer, copy both files to the .
+ in the Visual Studio project.
5. To provision the three files into the master page gallery, modify the ^lements.xml file in the path
MasterPagealleryModule\^lements.xml.
XML
opy
<?xmlversion="1.0" encoding="utf-8"?>
<^lementsxd="94022f3a-580a-4745-9d9c-42c21f79fdfe" xmlns="http://schemas.microsoft.com/sharepoint/">
<ModuleName="MasterPagealleryModule"
Url="_catalogs/masterpage" RootWebOnly="TRU^">
</Module>
</^lements>
6. Add the following markup after the opening <Module> tag to provision the master page.

Provisioning master pages requires the module to specify additional fields, such as which content
type to associate with the master page file when it is provisioned.
7.
8. XML
9.
10. opy
11. <FileUrl="AdventureWorks.master"
12. Path="MasterPagealleryModule\AdventureWorks.master" Type="hostablexnLibrary">
13. <PropertyName="ontentType"
14. Value="$Resources:cmscore,contenttype_masterpage_name;" />
15. <PropertyName="Title"
16. Value="Adventure Works Travel ustom Branding" />
17. </File>
18.
19. Add the page layout. As with the master page, you must set additional properties. However, the
page layout uses a different content type than the master page and also needs to specify the
content type that the page layout is associated with by using the

") attribute.
20. Add the following markup after the master page's <File /> tag.
XML
opy
<FileUrl="AW_layout.aspx"
Path="MasterPagealleryModule\AW_layout.aspx" Type="hostablexnLibrary">
<PropertyName="ontentType"
Value="$Resources:cmscore,contenttype_pagelayout_name;" />
<PropertyName="PublishingAssociatedontentType"
Value="; Welcome
Page; 0x010100568DB52D9D0A14D9B2FD96666^9F2007948130^3DB064584^219954237AF390064DÂ0F50F81
47B0B6Â06364A7D4; " />
<PropertyName="Title" Value="Adventure Works Travel Branded Welcome Page" />
</File>
At this point, the Visual Studio project is complete and contains all of the files that should be provisioned
to the + # and .
.
!
A$ )
A "

Verify that the Feature automatically created by the SharePoint development tools in Microsoft Visual
Studio 2010 is configured correctly. xn
(3) in vsstudio2010short, double-click the
AdventureWorksBranding\Features\Feature1\Feature1.feature file to open the Feature designer. Notice
that the ) is currently set to . hange the ) to
because this Feature must appear on
the Manage Site ollection Features page. Also notice that the two items in the Feature are the two
modules you created.
Now that the Visual Studio project is complete, you can package, deploy, and test the new branding
Feature. Test the branding Feature by creating a clean Publishing Portal site collection at the root of a
new web application. The reason to create a new web application and Publishing Portal site collection is
to eliminate the chance that any of the files are referencing files in the restored site collection (such as
images or .css files). For the following test, the Publishing Portal template was used to create a new web
application, http://test1.adventure-works.com, with a new site collection created at the root of the web
application.
"
&
1. xn Visual Studio 2010, press F5 to compile, package, deploy, and activate the feature.
2. Navigate to http://test1.adventure-works.com, point to

, point to

, and then
click +
&

.
3. Switch the master page by selecting + ) in the .! group and set the

+ to ! .
4. o back to the home page of the site and verify that the new branding is being used. Just like
before, the page will look a bit strange because it is not using the page layout that the branding
Feature deployed.
5. Update the page so that it is using the correct page layout by navigating to the

menu and clicking (
.
6. Use the ribbon to switch the page layout: point to , and from the
group,
choose Page Layout, and then select the Adventure Works Travel Branded page layout from the
Welcome Page section.
7. To deploy the branding in other environments, look in the \bin\debug folder of the Visual Studio
project for the *.wsp file. This is the solution package file that contains the Feature that
provisioned all of the branding files into the publishing site collection.

This article explains the entire process of branding a Microsoft SharePoint Server 2010 publishing site
with a custom design. First, the article steps the site designer through the process for developing a brand
for a new SharePoint publishing site, including examining issues that are unique to publishing sites and
the SharePoint-specific controls. Next, the article describes how to convert the design comps from
prototypes into a real implementation of a branded publishing site that uses master pages, page layouts,
SS, and images. Finally, the article describes how to take the branded publishing site and convert it to a
Feature that makes the brand easier to maintain in the future. This is done by using the SharePoint
development tools in Visual Studio 2010 and creating a new project that provisions all of the files
involved in a custom brand.

c
For more information, see the following resources:
! MSDN Sample - Real World SharePoint Branding
! Microsoft Office Online: SharePoint Designer 2007 Help and How-to: Modify the Default Master
Page
! Understanding and reating ustomized and Uncustomized Files in Windows SharePoint Services
3.0
! Approaches to reating Master Pages and Page Layouts in SharePoint Server 2007
! xmplementing a Brand in a SharePoint 2007 Publishing Site
! Understanding Field ontrols and Web Parts in SharePoint Server 2007 Publishing Sites
! Adding ode-Behind Files to Master Pages and Page Layouts in SharePoint Server 2007
! WROX: Professional SharePoint 2010 Branding and User xnterface Design
! WROX: Professional SharePoint 2007 Web ontent Management Development
! ^nterprise ontent Management Resource enter | SharePoint 2010
! SharePoint Developer enter

Real World Branding With SharePoint 2010 Publishing Sites

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Real World Branding With SharePoint 2010 Publishing Sites

Cargado por

Copyright:

Formatos disponibles

c 

! xntroduction to Real World Branding with SharePoint 2010 Publishing Sites

! athering Design Requirements for a SharePoint Publishing Site

! Planning for SharePoint Branding Tasks

! reating Realistic Design omps for SharePoint Site Designs

! reating the Adventure Works Travel HTML

! reating .css files for Adventure Works Travel

! Testing SharePoint Webpage Design in Multiple Browsers

! reating the Brand in SharePoint

! Adding .css and xmage Files to SharePoint

! Building the Master Page with HTML

! Building Out .css Rules for the SharePoint Site Design

! reating a ustom Page Layout

! ^diting a Page Layout with SharePoint Designer

! Packaging and Deploying SharePoint Branding

    &" & 

"    

! Support for HTML and cascading style sheet code completion

! WYSxWx (What You See xs What You et) design views

! Tools that help with the creation of cross browser webpages

5"+.   x  (3) )

<meta http-equiv="X-UA-ompatibile" content="x^=x^8" />

<SharePoint:ssRegistration name="/Style Library/sitename/morestyles.css" After="/Style Library/sitename/style.css"

For more information about presence, see Presence in SharePoint 2010.

"     )  

"))   )    

<div class="customTop s4-notdlg">

<div id="s4-leftpanel" class="customMainLeft s4-notdlg">

<asp:ontentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">

This language is not supported or no code example is available.

<div class="s4ca customMainRight">

<h1 class="customPageTitle"><asp:ontentPlaceHolder id="PlaceHolderPageTitlexnTitleArea" runat="server" /></h1>

<asp:ontentPlaceHolder id="PlaceHolderPageDescription" runat="server" />

<asp:ontentPlaceHolder id="PlaceHolderPageDescription" runat="server" />

<asp:ontentPlaceHolder id="PlaceHolderMain" runat="server"/>

")   & 

2. Add automatic scrolling (overflow:auto) to the main content area.

/* search button hider */

/* fancy search button */

/* search button hover */

/* search box style */

/* arrow for flyouts */

/* item style hover */

/* flyout item hover */

/* left nav item style */

/* Web Part title for left column */

/* Web Part padding for left column */

/* Remove some white space from Web Parts in left column */

/* remove border from bottom of Web Parts in left column */

/* hide body scrolling (SharePoint will handle) */

"    !  ) 

Y For  ")  , select   .

Y For 'c. , type =. )3.

This language is not supported or no code example is available.

This language is not supported or no code example is available.

This language is not supported or no code example is available.

4. Add the PlaceHolderLeftNavBar to the page to add the c .

This language is not supported or no code example is available.

5. The PlaceHolderMain content placeholder starts with the <WebPartPages:SPProxyWebPartManager />

This language is not supported or no code example is available.

! Deploy branding files to the site's top-level folder.

! Deploy branding files to the sites _layouts directory.

! Deploy branding files to the site collection's content database.

c

! athering Design Requirements for a SharePoint Publishing Site

! reating Realistic Design omps for SharePoint Site Designs

! reating the Adventure Works Travel HTML

! reating .css files for Adventure Works Travel

! reating the Brand in SharePoint

! reating a ustom Page Layout

&" &

"

! WYSxWx (What You See xs What You et) design views

5"+. x (3) )

<meta http-equiv="X-UA-ompatibile" content="x^=x^8" />

<SharePoint:ssRegistration name="/Style Library/sitename/morestyles.css" After="/Style Library/sitename/style.css"

" )

")) )

<asp:ontentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">

<h1 class="customPageTitle"><asp:ontentPlaceHolder id="PlaceHolderPageTitlexnTitleArea" runat="server" /></h1>

<asp:ontentPlaceHolder id="PlaceHolderPageDescription" runat="server" />

<asp:ontentPlaceHolder id="PlaceHolderPageDescription" runat="server" />

<asp:ontentPlaceHolder id="PlaceHolderMain" runat="server"/>

") &

" ! )

Y For ") , select .

Y For 'c. , type =. )3.

4. Add the PlaceHolderLeftNavBar to the page to add the c .

" 3

opy the files from the publishing site's .

Now, each file that will be provisioned into the .

" ) )

! WROX: Professional SharePoint 2007 Web ontent Management Development

! ^nterprise ontent Management Resource enter | SharePoint 2010

! SharePoint Developer enter