Jumpstart

Branding for
SharePoint
2010
A complete branding solution shell including a
simplified, simple, optimized Master Page and a
Visual Studio 2010 Brand Solution for packaging
your Branding elements into an easy to deploy
SharePoint Feature for the farm or a sandbox.

Version 1.0

Version 1.0
By Eric Overfield
PixelMill
Blog.pixelmill.com/ericoverfield
Twitter.com/ericoverfield

What is Jumpstart Branding for SharePoint 2010? ................................................................................................................. 3

What is in this Package ........................................................................................................................................................... 4
Simple Master Page ............................................................................................................................................................ 4
Simple Master Page Centered, Fixed Width .................................................................................................................... 4
Solutions.............................................................................................................................................................................. 4
Installation Instructions Jumpstart Master Pages................................................................................................................ 6
Jumpstart Master Page ....................................................................................................................................................... 6
Install the Jumpstart Master Page (Basic) - Foundation Only......................................................................................... 6
Install the Jumpstart Master Page (Basic) Server Sites or Sites with Publishing Enabled ........................................... 6
Installing the Jumpstart Master Page Centered, Fixed Width ......................................................................................... 8
Install the Jumpstart Master Page (Centered, Fixed Width) - Foundation Only ............................................................ 8
Install the Jumpstart Master Page (Centered, Fixed Width) Server Sites or Sites with Publishing Enabled ............... 9
Installation Instructions Solution ....................................................................................................................................... 11
Install the Visual Studio 2010 Branding Installation Solution Farm Based .................................................................... 11
Uninstall the Visual Studio 2010 Branding Installation Solution Farm Based................................................................ 11
Install the Visual Studio 2010 Branding Installation Solution Sandbox Based............................................................... 11
Uninstall the Visual Studio 2010 Branding Installation Solution Sandbox Based .......................................................... 12
Modifying the Components of this Package ......................................................................................................................... 14
Using and Modifying the Basic Master Page..................................................................................................................... 14
Using and Modifying the Centered, Fixed Width Master Page ........................................................................................ 14
Using and Modifying the Visual Studio 2010 Branding Solution Both ........................................................................... 15
Farm Base Solution Overview ....................................................................................................................................... 15
Sandbox Solution Overview .......................................................................................................................................... 16
Rename the Feature and Project .................................................................................................................................. 17
Change Where the Solution is Deployed During Testing .............................................................................................. 17
Add New Files to the Modules (MasterPageGallery or Style Library) .......................................................................... 17
Add Additional Master Pages or Page Layouts ......................................................................................................... 17
Add Additional Script Files to the Layouts Mapped Directory (Farm) or Style Library (Both) .................................. 18
Add Additional Images to the Layouts Mapped Directory (Farm) or Style Library (Both) ........................................ 18
Change the Installation Directory Name of Feature Files ............................................................................................. 18
Change Which Master Page is Set as Default ............................................................................................................... 19
Package the Solution for Deployment .............................................................................................................................. 20
References ............................................................................................................................................................................ 20

PixelMill, Inc.

Page 2

What is Jumpstart Branding for SharePoint 2010?

I created Jumpstart Branding (JB) for SharePoint 2010 because I noticed a growing need for a more complete
branding solution than were already available. You can find other solution, packages and open source projects
that contain components of JB, and I have used many myself over the last few years. The problem for me was
threefold. First, I havent found an encompassing solution that brought everything together, second, many
other attempts to provide samples or code didnt come with enough documentation for the average user (or so
people have told me, and thus asked for my help), and third, well, I didnt like how some other projects were
put together or implemented.
So what is Jumpstart Branding for SP 2010 then? I designed this as a beginning to end shell for your next
SharePoint Branding project. Hopefully you will learn a thing or two about SharePoint branding along the way
as well.
First I include my take on a basic Master Page without extra code or much of the fluff that Microsoft added, as
well as commented so that you know what each line or block is doing. I also wanted to remove all backwards
compatible (v3) code blocks as they are almost never needed moving forward. There have been many
attempts at this already, in fact I include two of the better ones that I know of in my resources section, but I look
at the need for a basic, simple Master Page in a slightly different way. I wanted a starting place for all of my
projects that has extra SharePoint code removed, with extra, yet required code hidden, with nothing Added,
and finally one replacement for the v4.master Master Page for both foundation and server based sites.
Second, there are two Visual Studio 2010 projects that you can use to package your Branding files, i.e. Master
Pages, Page Layouts, Stylesheets, Script files, Image Files, Web Parts, etc, so that this can all be deployed as
a feature in SharePoint. There are many design decisions and caveats that I made when I built these two
solutions, including the reason why I created two when many might argue you should only have one. Later in
this document I will explain how to install the solutions and how to customize them. There are many great
resources on how to create Branding features, but I have yet to find one that includes all of the pieces to not
only activate your branding feature correctly, but to also handle housekeeping when you deactivate the feature
or properly handing published files for Sandbox branding features. These two solutions attempt to bring many
different theories and examples into one code block.
I have included a list of resources and references at the bottom of this document. These are great resources
that I highly recommend that you review as they have helped me along the way.

PixelMill, Inc.

Page 3

What is in this Package

Within this package you will see three primary directories, Simple Master Page, Centered Master Page and
VS2010Projects.

Simple Master Page

The Simple Master Page directory contains the basic, no frills master page based on the v4.master SharePoint
provides out of the box. This is a great place to start when building your own custom master page as much of
the junk that you wouldnt want anyhow has been removed like any reference to V3. Also I have moved many
of the extra ContentPlaceHolders that are required but normally not referenced to a hidden panel so they are
out of the way.

Simple Master Page Centered, Fixed Width

The Centered Master Page directory contains a basic, no frills master page based on the v4.master
SharePoint provides out of the box, but has a fixed width of 960 pixels, and is centered. This is a great place to
start when building your own custom master page where you want a centered, fixed width site. This was built
off the Simple Master Page so all of the V3 references have been removed and the extra ContentPlaceHolders
have been hidden. Included are a stylesheet and a few javascript files that are needed for this design to fully
function. Installation instructions and a more thorough explanation as to why this Master Page was built the
way it was can be found later in this document.

Solutions
Why do I have two solutions here? Well because there are pros and cons with both farm based and sandboxed
solutions. I find that it is best to give you arguments for and against each and let you decide. Either way you
have a starter project to work with.

Visual Studio 2010 Branding Installation Solution Farm Based

Contains two Master Pages, one Page Layout, Stylesheet and jquery library found in the _layouts directory as
well as in a module.
Pros:
Provides you access to the entire Microsoft.SharePoint Library
You may place elements including stylesheets, scripts and images in a shared location
_layouts that could help with caching
Data access is unrestricted
Provides an open shell that allows you to add web parts and other components that may require
full access to the site, web application, etc.
Cons:
Your solution is installed to the GAC so it is available to all site collections. This may be a pro
depending on your needs.
PixelMill, Inc.

Page 4

Your solution does not run in an independent environment so security is more of a concern.
If you update the solution it will update for all instances. Again this could be a pro, but you might
want to update only one installation of the solution.
Must be installed via PowerShell by an account with the proper Administrative access.
Cannot be installed into a shared environment including Office 365 or many shared hosting
services.
A solution built without sandboxing in mind may be difficult to covert to be sandboxed friendly.

Visual Studio 2010 Branding Installation Solution Sandbox Friendly

Contains two Master Pages, one Page Layout, Stylesheet and jquery library found only in a module as
sandboxed solutions are only able to access files relative to the site collection they are being installed to.
Pros:
Gives you all of the security of a sandboxed solution.
Fits the new best practices with how a solution should be built. Start with the least amount of
access required.
Can be installed in a shared environment, i.e. does not require powershell access.
Can be installed via the browser.
A Sandboxed solution can be installed as a farm solution with minimal effort.
Cons:
Your solution will lose access to the farm as well as many SP classes. That is inherent with
Sandbox solutions and it is up to you.
All files and assets added by modules but be installed local to the site collection or site they are
being installed to.
Files in modules deployed to your site collection, that have been deployed to folders that require
content approval, are not checked in and/or publishing by default. This makes sense that even
with a sandbox solution the administrator should review files that have been added, but this
adds an extra step to the deployment of the branding solution.

PixelMill, Inc.

Page 5

Installation Instructions Jumpstart Master Pages

Jumpstart Master Page
There are two primary ways to install a custom Master Page. Either using a browser, or using SPD (with a little
help of the browser if publishing is enabled). There are different steps depending on if you are installing the
Master Page to a foundation only site or a Publishing site (or a site collection with publishing enabled). Since
the Jumpstart Master Page is designed to be a starting place, I will provide my preferred installation method
using SharePoint Designer and a little browser for publishing sites. This is broken down into two methods, one
for Foundation Only Sites and another method if you have publishing enabled (server sites or sites with
publishing enabled). Both methods require SharePoint Designer.

Install the Jumpstart Master Page (Basic) - Foundation Only

1. Open your Site Collection (or a sub site if you want to install the Master Page only to a sub site) in SPD.
2. Go to the root of your site. Click on All Files found in the left navigation.
3. Open the Masterpage Galleries folder in SharePoint Designers by going to _catalogs -> masterpage
under All Files.
4. Drag and drop the Master Page file, v4-JumpstartBranding-basic.master to the folder location,
_catalogs/masterpage.
5. Right click the newly uploaded Master Page and click on Check In.
6. In the Check In window, Click "OK".
7. Right click the newly uploaded Master Page again and click on Set as Default Master Page if you
would like this Master Page to be your default Master Page. Click on Set as Custom Master Page if
you would like this Master Page to be your Custom Master Page.
a. Note: Your new Master Page can be both your Default and Custom Master Page. Second, for
foundation sites, OOTB you will only use the Default Master Page. The Custom Master Page
could be used for a second layout you may prefer, but you would have to manually specify with
pages would use the Custom Master Page.
8. That is it, your site should now be using your new Master Page.
9. Foundation Sites cannot easily inherit a Master Page from its parent so if you create a sub site, you
would have to re-install the Master Page to your sub sites as well. If you want to get around this then
you would have to create a solution with a feature with an event receiver that would set a subsites
Master Page when it was created. Although the solutions provided in this Jumpstart Branding package
do not do just this, there is an Event Receiver in each solution that could be used to set this. You would
just need to create a new solution scoped to a site collection (it does not need a feature receiver) and
include the event receiver, ChildSiteInit.

Install the Jumpstart Master Page (Basic) Server Sites or Sites with
Publishing Enabled
1. Open your Site Collection (or a sub site if you want to install the Master Page only to a sub site) in SPD.
2. Go to the root of your site. Click on All Files found in the left navigation.

PixelMill, Inc.

Page 6

3. Open the Masterpage Galleries folder in SharePoint Designers by going to _catalogs -> masterpage
under All Files.
4. Drag and drop the Master Page file, v4-JumpstartBranding-basic.master to the folder location,
_catalogs/masterpage.
5. Right click the newly uploaded Master Page and click on Check In.
6. In the Check In window choose Publish as a Major Version. Click "OK".
7. When asked to approve the page, click "yes". This will open a browser window with all your pending
pages to be approved.
8. Before approving our newly uploaded Master Page, we need to set the correct page content types.
Right-click the newly uploaded Master Page and choose Edit Properties. You'll be asked to check out
the page before making changes. Click "OK" to edit the item.
9. When the dialog box opens, make sure the following are selected:
a. Content Type should be Publishing Master Page
b. Compatible UI Version should be 4
10. Then Click "OK".
11. While still in the browser, right-click the new Master Page to Check In the item. You'll get the option for
what type of version you would like to check in. Choose Major Version, which will also publish the
item. If, the file is already checked in, then right-click and select Publish as Major Version
12. After the Master Page is Checked In and Published as Major Version, you can approve the page. On
the same page, right-click and select Approve/Reject. In the dialog box, select Approved. Then Click
"OK".
13. Now navigate to your root site collections Site Settings page (Or the sub site you installed this template
to), by going to Site Actions (usually found in the top left of your header area and ribbon) -> Site
Settings
14. On your Site Settings page, in the right column under Look and Feel click on Master page. This will
load the url, http://yoursite/_Layouts/ChangeSiteMasterPage.aspx.
15. In the Site Master Page section select the new Master Page from the drop down menu if you would
like to set this new Master Page as your Custom Master page. In publishing sites your custom Master
Page is used for any content page you create that by default goes into the Pages folder.
16. In the System Master Page section select the new Master Page from the drop down menu if you would
like to set the new Master Page as your Default Master page. This would be the master page used for
system pages like your Site Settings Page.
17. If you would like sub sites to inherit either of these two Master Pages be sure to check Reset all
subsites to inherit this site master page setting.
18. You can ignore the Alternate CSS URL section for now for this Basic Jumpstart Master Page.
19. That is it, your site should now be using your new Master Page.

PixelMill, Inc.

Page 7

Installing the Jumpstart Master Page Centered, Fixed

Width
The installation instructions for installing the Jumpstart Branding Master Page with a centered, fixed width
layout is very similar to the previous install instructions. The primary difference is that we need to upload a
stylesheet and javascript files as well and link to them. Again there are different preferred methods for
Foundation Sites and Server sites (or sites with publishing enabled).

Install the Jumpstart Master Page (Centered, Fixed Width) - Foundation

Only
1. Open your Site Collection (or a sub site if you want to install the Master Page only to a sub site) in SPD.
2. Go to the root of your site. Click on All Files found in the left navigation.
3. Open the Masterpage Galleries folder in SharePoint Designers by going to _catalogs -> masterpage
under All Files.
4. Drag and drop the Master Page file, v4-JumpstartBranding-centered.master to the folder location,
_catalogs/masterpage.
5. Go to the root of your site. Click on All Files found in the left navigation.
6. Open your Style Library folder in SPD by going to the Style Library folder.
7. In the Style Library folder, if there is not a Themable directory then create one (right click folder and
select New -> Folder).
8. Drag and drop the stylesheet, styles-centered.css to the folder location, Style Library/Themable.
a. The reason why we place the styles-centered.css file in the Themable folder is so that
SharePoint can apply a theme to the stylesheet if you wanted to.
9. Right Click the new stylesheet and click on Check In.
10. In the Style Library folder, if there is not a Scripts directory then create one (right click folder and select
New -> Folder).
11. In the Scripts directory your just created, create a new directory, JumpstartBrandingSandbox.
12. Drag and drop the two .js files, jquery.1.7.1.min.js and jquery.custom.js, to the folder location, Style
Library/Scripts/JumpstartBrandingSolution.
13. Right Click each of the two new .hs files one at a time and click on Check In.
14. Go back to the _catalogs/masterpage folder and Right Click the new Master Page. Select Edit in
Advanced Mode.
15. In the Code View you will need to add a link to the new Stylesheet. This line of text will go before line
27, <!-- Unified Logging Service -->
<SharePoint:CssRegistration name=" /Style Library/Themable/styles-centered.css" After="corev4.css"
runat="server"/>
a. Note: Be sure to change the name value to include the full path to your stylesheet. If you are
installing this to a sub site collection that has the path
http://yourwebapplication/sites/subsitecollection then the name value would be
name=/sites/subsitecolllection/Style Library/Themable/styles-centered.css
16. Save the Master Page and Close it.
17. Right click the newly uploaded Master Page in the _catalogs/masterpage directory and click on Check
In.
PixelMill, Inc.

Page 8

18. In the Check In window, Click "OK".

19. Right click the newly uploaded Master Page again and click on Set as Default Master Page if you
would like this Master Page to be your default Master Page. Click on Set as Custom Master Page if
you would like this Master Page to be your Custom Master Page.
a. Note: Your new Master Page can be both your Default and Custom Master Page. Second, for
foundation sites, OOTB you will only use the Default Master Page. The Custom Master Page
could be used for a second layout you may prefer, but you would have to manually specify with
pages would use the Custom Master Page.
20. That is it, your site should now be using your new Master Page.
21. Foundation Sites cannot easily inherit a Master Page from its parent so if you create a sub site, you
would have to re-install the Master Page to your sub sites as well. If you want to get around this then
you would have to create a solution with a feature with an event receiver that would set a subsites
Master Page when it was created. Although the solutions provided in this Jumpstart Branding package
do not do just this, there is an Event Receiver in each solution that could be used to set this. You would
just need to create a new solution scoped to a site collection (it does not need a feature receiver) and
include the event receiver, ChildSiteInit.

Install the Jumpstart Master Page (Centered, Fixed Width) Server Sites or
Sites with Publishing Enabled
1. Open your Site Collection (or a sub site if you want to install the Master Page only to a sub site) in SPD.
2. Go to the root of your site. Click on All Files found in the left navigation.
3. Open the Masterpage Galleries folder in SharePoint Designers by going to _catalogs -> masterpage
under All Files.
4. Drag and drop the Master Page file, v4-JumpstartBranding-centered.master to the folder location,
_catalogs/masterpage.
5. Go to the root of your site. Click on All Files found in the left navigation.
6. Open your Style Library folder in SPD by going to the Style Library folder.
7. In the Style Library folder, if there is not a Themable directory then create one (right click folder and
select New -> Folder).
8. Drag and drop the stylesheet, styles-centered.css to the folder location, Style Library/Themable.
a. The reason why we place the styles-centered.css file in the Themable folder is so that
SharePoint can apply a theme to the stylesheet if you wanted to.
9. Right Click the new stylesheet and click on Check In.
10. On the Check In window, choose Publish as a Major Version. Click "OK".
11. In the Style Library folder, if there is not a Scripts directory then create one (right click folder and select
New -> Folder).
12. In the Scripts directory your just created, create a new directory, JumpstartBrandingSandbox.
13. Drag and drop the two .js files, jquery.1.7.1.min.js and jquery.custom.js, to the folder location, Style
Library/Scripts/JumpstartBrandingSolution.
14. Right Click each of the two new .hs files one at a time and click on Check In.
15. On the Check In window, choose Publish as a Major Version. Click "OK" for each .js file.
16. Go back to the _catalogs/masterpage folder and Right Click the new Master Page
17. Right click the newly uploaded Master Page and click on Check In.
18. In the Check In window choose Publish as a Major Version. Click "OK".
PixelMill, Inc.

Page 9

19. When asked to approve the page, click "yes". This will open a browser window with all your pending
pages to be approved.
20. Before approving our newly uploaded Master Page, we need to set the correct page content types.
Right-click the newly uploaded Master Page and choose Edit Properties. You'll be asked to check out
the page before making changes. Click "OK" to edit the item.
21. When the dialog box opens, make sure the following are selected:
a. Content Type should be Publishing Master Page
b. Compatible UI Version should be 4
22. Then Click "OK".
23. While still in the browser, right-click the new Master Page to Check In the item. You'll get the option for
what type of version you would like to check in. Choose Major Version, which will also publish the
item. If, the file is already checked in, then right-click and select Publish as Major Version
24. After the Master Page is Checked In and Published as Major Version, you can approve the page. On
the same page, right-click and select Approve/Reject. In the dialog box, select Approved. Then Click
"OK".
25. Now navigate to your root site collections Site Settings page (Or the sub site you installed this template
to), by going to Site Actions (usually found in the top left of your header area and ribbon) -> Site
Settings
26. On your Site Settings page, in the right column under Look and Feel click on Master page. This will
load the url, http://yoursite/_Layouts/ChangeSiteMasterPage.aspx.
27. In the Site Master Page section select the new Master Page from the drop down menu if you would
like to set this new Master Page as your Custom Master page. In publishing sites your custom Master
Page is used for any content page you create that by default goes into the Pages folder.
28. In the System Master Page section select the new Master Page from the drop down menu if you would
like to set the new Master Page as your Default Master page. This would be the master page used for
system pages like your Site Settings Page.
29. In the Alternate CSS URL section, select Specify a CSS file to be used by this publishing site and
all sites that inherit from it: and either browse or enter the path to the new stylesheet we uploaded.
By default this would be /Style Library/Themable/styles-centered.css.
a. Note: Be sure path value includes the full path to your stylesheet. If you are installing this to a
sub site collection that has the path http://yourwebapplication/sites/subsitecollection then the
path value would be /sites/subsitecolllection/Style Library/Themable/styles-centered.css.
30. If you would like sub sites to inherit either of these two Master Pages or the Alternate CSS URL be sure
to check Reset all subsites to inherit this site master page setting.
31. That is it, your site should now be using your new Master Page.

PixelMill, Inc.

Page 10

Installation Instructions Solution

As I have noted there are two solutions provided in this package. One if for installing branding to a farm while
the other is for a sandboxed installation. Both of these solutions should work for foundation and server sites. I
provide installation instructions below for each solution that include how to install the .wsp file to the farm or
site. Instructions on how to use and modify the solutions are included after the installation instructions.
The wsp files are found in the bin/Release directory of the solutions, i.e.
JumpstartBrandingSP2010\VS2010Projects\JumpstartBrandingSandbox\bin\Release\
Or
JumpstartBrandingSP2010\VS2010Projects\JumpstartBranding\bin\Release\

Install the Visual Studio 2010 Branding Installation Solution

Farm Based
1. Open PowerShell, or more appropriately SharePoint 2010 Management Shell
2. Type in the following commands one at a time in the Management Shell.
3. Add-SPSolution c:\temp\JumpstartBranding.wsp
a. Replace c:\temp\JumpstartBranding.wsp with the path to where you placed the .wsp file.
4. Install-SPSolution -Identity JumpstartBranding.wsp GACDeployment
5. That is it. You can now Active the Jumpstart Branding Feature in any site collection on your server
farm.

Uninstall the Visual Studio 2010 Branding Installation

Solution Farm Based
1. You should deactivate the JumpstartBranding Feature on all site collections that have it activated, but
that is not completely necessary as the Uninstall-SPSolution command will force that for you.
2. Open PowerShell, or more appropriately SharePoint 2010 Management Shell
3. UnInstall-SPSolution -Identity JumpstartBranding.wsp
4. Remove-SPSolution -Identity JumpstartBranding.wsp
5. The solution has not been completed removed from your farm.

Install the Visual Studio 2010 Branding Installation Solution

Sandbox Based
Via SharePoint 2010 Management Shell
1. Open PowerShell, or more appropriately SharePoint 2010 Management Shell
2. Type in the following commands one at a time in the Management Shell.
a. Replace c:\temp\JumpstartBrandingSandbox.wsp with the path to where you placed the
.wsp file.
PixelMill, Inc.

Page 11

3.
4.
5.
6.

b. Replace http://yoursitecollection/ with the path to your site collection you are installing this
Sandbox solution to.
Add-SPUserSolution -LiteralPath c:\temp\JumpstartBranding.wsp -Site http://yoursitecollection/
Install-SPUserSolution Identify JumpstartBranding.wsp -Site http://yoursitecollection/
Go to your Site Collection Features page and activate the Jumpstart Branding Sandbox feature at
http://yoursitecollection/_layouts/ManageFeatures.aspx?Scope=Site
That is it. The Jumpstart Branding Feature is now activated on your site collection

Via The Browser

Note: you will need site collection administration permissions.
Open your site collection home page in a browser and log in if you havent already.
Go to Site Actions->Site Settings
On the Site Settings page, under the Galleries section, click Solutions.
On the Solutions page, in Ribbon click on the Solutions tab.
Click Upload Solution.
In the dialog box that appears, browse to the folder that contains your .wsp file, in this case,
JumpstartBrandingSP2010\VS2010Projects\JumpstartBrandingSandbox\bin\Release\JumpstartBrandin
gSandbox.wsp.
7. After successfully uploading the solution a new dialog box will appear. In the ribbon of this dialog box
click Activate to activate the solution.
8. By default the branding feature is automatically activated when the solution is activated.
9. To Deactivate or activate the branding feature included in the solution:
a. Click Site Actions->Site Settings
b. Under the section, Site Collection Features, click on Site Collection Features.
c. Look for the Jumpstart Branding feature.
1.
2.
3.
4.
5.
6.

Uninstall the Visual Studio 2010 Branding Installation

Solution Sandbox Based
Via SharePoint 2010 Management Shell
1. You should deactivate the JumpstartBrandingSandbox Feature first, but that is not completely
necessary as the Uninstall-SPUserSolution command will force that for you.
2. Open PowerShell, or more appropriately SharePoint 2010 Management Shell
3. UnInstall-SPUserSolution Identify JumpstartBranding.wsp -Site http://yoursitecollection/
4. Remove-SPUserSolution Identify JumpstartBranding.wsp -Site http://yoursitecollection/
6. The solution has now been completed removed from your site collection
Via The Browser
Note: you will need site collection administration permissions.
1. Open your site collection home page in a browser and log in if you havent already.
2. You should deactivate the JumpstartBrandingSandbox Feature first, but that is not completely
necessary.
a. Click Site Actions->Site Settings
b. Under the section, Site Collection Features, click on Site Collection Features.
PixelMill, Inc.

Page 12

c. Look for the Jumpstart Branding feature.

d. Click Deactivate next to the Jumpstart Branding feature to deactivate it.
3. Go to Site Actions->Site Settings
4. On the Site Settings page, under the Galleries section, click Solutions.
5. On the Solutions page, mouse over the JumpstartBrandingSandbox entry name, and click on the
down arrow that appears to the right of the name.
6. On the drop down menu click Deactivate.
7. When the Deactivate Solution dialog box appears, click on Deactivate to deactivate.
8. To now delete the solution from the solution store, mouse over the JumpstartBrandingSandbox entry
name, and click on the down arrow that appears to the right of the name.
9. On the drop down menu click Delete.
10. Click OK to remove the solution from the site collection.

PixelMill, Inc.

Page 13

Modifying the Components of this Package

Using and Modifying the Basic Master Page
The basic Master Page, file name v4-JumpstartBranding-basic.master found in the Simple Master Page
directory is a rehash of the v4.master Master Page provided OOTB with SharePoint. The main difference is the
all V3 (SharePoint 2007 code for backwards compatibility) was removed, additional Content Placeholders were
hidden and finally the code blocks are heavily commented so as to make it easier to read and know what each
line or block is there for.
To use this Master Page simple copy and paste it into your _catalogs/masterpage directory and make edits as
needed. There are no additional files (CSS, JS, etc) required for this Master Page to function correctly but you
can easily add your own.
To link to your own custom Stylesheet, if you do not want to link to it using the Alternative CSS property then
add one of the following CSSRegistration tags in the <head> section.
<SharePoint:CssRegistration name=" /Style Library/Themable/styles.css %>" After="corev4.css"
runat="server"/>
Or if this is for a site with publishing enabled (Server based)
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/Themable/styles.css %>"
After="corev4.css" runat="server"/>
With either of these blocks simply change the name property to link to your stylesheet.
To link to your own Javascript files then add the following ScriptLink tag in the <head> section.
<SharePoint:ScriptLink language="javascript" name="~SiteCollection/Style Library/Scripts/jquery-1.7.1.min.js"
runat="server" />
Again, just change the name property to link to your custom JS file.
You can add as many CSSRegisration and ScriptLinks tags as you need.

Using and Modifying the Centered, Fixed Width Master Page

The second Master Page including in Jumpstart Branding, file name v4-JumpstartBranding-centered.master
found in the Centered Master Page directory, is based on the v4-JumpstartBranding-simple.master Master
Page. Refer to the previous section, Using and Modifying the Basic Master Page, for instructions on how to
make simple changes. The primary difference between these two Master Pages is that this Master Page
creates a centered, fixed width site. With most web sites this is a rather simple process and there are quite a
few simple attempts to accomplish this with SharePoints v4.master Master Page. The problem is that
SharePoint is not that simple. There are additional considerations that need to be addressed. This Master
Page attempts to bring together the different steps required to successfully create such a layout in SharePoint
with as little code as possible.

PixelMill, Inc.

Page 14

A few additional files are required for this Master Page including a custom stylesheet. For installation
instructions please refer to the previous section. This stylesheet not only creates the centered, fixed width side
but also changes a few colors, adds a border and finally adds padding to the bottom of the site. All of these
changes can be easily modified or removed, but were added to provide you additional examples of what can
be done and how. This stylesheet should go in a Themable directory to take advantage of the theming engine
built into the stylesheet.
Two Javascript files are also required, jquery-1.7.1.min.js and jquery.custom.master. By default the Master
Page is looking for these files in the ~SiteCollection/Style Library/Scripts/JumpstartBrandingSandbox/
directory. You can modify this as you need to just be sure to change the ScriptLink tags in the Master Page.
The jquery-1.7.1.min.js file provides the basic jquery library. You can change this if you want to a different
version.
NOTE: This jquery library changes the normal jQuery tag $() to $j(). This is because SharePoints OOTB js
files sometimes use $() for its own purposes, meaning that if we let jQuery use $() as well then we can run into
unexpected site problems.
The second js file, jquery.custom.js provides as simple technique as possible to fix a well known issue with
SharePoint fixed width sites, that being that many administration pages and List View pages have a tendency
to overflow a centered, fixed width site. This code loads every time a page loads and checks to see if any
content is wider than the #s4-bodyContainer container. If it is then it resizes the fixed width site to fit the
content. The Javascript that handles the width issue is very lean, it normally only has to search 2-5 different
elements, which on my machine takes about 2 milliseconds when tested using a simple debugging timer.

Using and Modifying the Visual Studio 2010 Branding

Solution Both
Jumpstart Branding for SP 2010 includes two Visual Studio 2010 Solutions that provide shell features to help
install branding elements to your SharePoint sites. These solutions can also be expanded by adding more
features, Event Receivers, additional modules and more, they are not limited in any way.
Two solutions are provided because Sandboxed solutions for branding have different properties that effect
what happens when assets are added including where files can be added.
Often when using a solution to provide a Branding feature, you may want to add your branding assets (images,
css, js, etc) to the Layouts or Images Mapped Folder. This works great for Farmed based solutions but is not
allowed in Sandboxed solutions because sandboxed solutions do not allow adding files outside of the context
of site collection itself. Second, with publishing enabled, sandboxed solutions will not automatically check in or
publish files. This makes sense for Sandboxed solutions in general as for security reasons you may want to
review what the feature added to your site collection, but in our case this can get in the way. Therefore the
Sandboxed solution automatically reviews the files the modules added to the site collection and if possible
checks them in and publishes them. Since farmed solutions do not normally have this issue the Farm solution
does not include this check in code.

Farm Base Solution Overview

The farm base solution utilized the Layouts Mapped directory for javascript files and although there is a shell
styles.css file in the Layouts folder, it is not utilized. It is there for demonstration purposes. The stylesheet,
styles.css can be found in the Style Library module.

PixelMill, Inc.

Page 15

There are two Master Pages and one Page layout included in the MasterPageGallery module. By default the
v4-JumpstartBranding-centered.master is set as the default and custom Master Pages during activation.
Instructions on how to change this are listed below.
During activation the feature will set the new Master Pages, set the Alternate CSS to styles.css file found in the
Style Library module and will also remove any currently set theme as with a theme applied the new Master
Page may not work correctly because the theme files may not yet exist. You can simply reset the theme if you
would like.
By default all files (Master pages, Page Layouts, Images, Style Sheets, etc) should be added to a directory, by
default JumpstartBranding as set in by the sBrandingFolder variable in the feature receiver class. This is
used to help find and remove files when the feature is deactivated.
In the Feature Receiver class, you will also see a variable, bDeleteDuringDeactivate. When set to true, by
default, then all files added during activation will be removed upon deactivation. This is highly recommended
for housekeeping purposes.

Sandbox Solution Overview

The sandboxed solution only uses local directories (no shared folder) for the stylesheet, images and javascript
files because sandboxed solution only allow access to local files.
There are two Master Pages and one Page layout included in the MasterPageGallery module. By default the
v4-JumpstartBranding-centered.master is set as the default and custom Master Pages during activation.
Instructions on how to change this are listed below.
During activation the feature will set the new Master Pages, set the Alternate CSS to styles.css file found in the
Style Library module and will also remove any currently set theme as with a theme applied the new Master
Page may not work correctly because the theme files may not yet exist. You can simply reset the theme if you
would like.
By default all files (Master pages, Page Layouts, Images, Style Sheets, etc) should be added to a directory, by
default JumpstartBrandingSandbox as set in by the sBrandingFolder variable in the feature receiver class.
This is used to help find and remove files when the feature is deactivated.
In the Feature Receiver class, you will also see a variable, bDeleteDuringDeactivate. When set to true, by
default, then all files added during activation will be removed upon deactivation. This is highly recommended
for housekeeping purposes.
Finally the sandboxed solution provides additional code that will review all of the files added by the modules
and checks to see if they are checked in. If a file is found that is not checked in, normally any file your solution
added, then it will check them in. Then the code will check to see if they file has been published. Again, if it
hasnt, then it will be. This would only need to be used for sites that will have publishing enabled so you can
turn this off if you want if you know your solution is only for Foundation sites without publishing enabled.
Thanks to Stefan Stanev's SharePoint Blog article, http://stefan-stanev-sharepointblog.blogspot.com/2011/01/automatically-publishing-files.html, for a great technique. In the Feature Receiver
class, you will also see a variable, bCheckInDuringActivate. When set to true, by default, then all files added
by your solution will be checked to make sure they are checked in and published. This is highly recommended
for housekeeping purposes.

PixelMill, Inc.

Page 16

Rename the Feature and Project

1. Rename the two VS project files, JumpStartBranding.csproj or JumpStartBranding.csproj.user, found in
their solution directory within the VS2010Projects folder, to any new project name you wish.
2. Open the project (i.e. JumpStartBranding.csproj) in Visual Studio 2010.
3. In the Solution Explorer, right-click JumpstartBranding (or JumpstartBrandingSandbox) and
rename to your new project name.
4. To rename the Feature, find the feature, i.e JumpstartBranding, in the Features folder.
5. Right-click the feature, i.e. JumpstartBranding and rename it.
6. Double-click this feature to load the features property window.
7. In the feature property window change the Title and Description as needed.

Change Where the Solution is Deployed During Testing

1. Open the project (i.e. JumpStartBranding.csproj) in Visual Studio 2010.
2. In the Solution Explorer, click the Project Title, i.e. JumpstartBranding
3. In the Properties panel, change the Site URL to your local test site url, i.e. http://localhost

Add New Files to the Modules (MasterPageGallery or Style Library)

Add Additional Master Pages or Page Layouts
1. Add a new .aspx or .master, or copy a new .aspx or .master page to the MasterPageGallery module.
2. By default the Elements.xml file in the MasterPageGallery module will be updated to reflect the new
file you added, but most likely not correctly.
3. Open the Elements.xml file.
4. Remove the <File> element added for your file.
5. Add one of the following element blocks
a. Master Page
<File Url="your-master-page.master" Path=" your-master-page.master" Type="GhostableInLibrary" >
<Property Name="UIVersion" Value="4" />
<Property Name="ContentTypeId" Value="0x010105" />
</File>

We are telling SharePoint that this file should be Ghostable, that its for V4 and that the content type
is a Master Page (0x010105)
b. Page Layout
<File Url="your-page-layout.aspx" Path=" your-page-layout.aspx" Type="GhostableInLibrary">
<Property Name="Title" Value="Your Title" />
<Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
<Property Name="PublishingAssociatedContentType"
Value=";#$Resources:cmscore,contenttype_articlepage_name;;#0x010100C568DB52D9D0A14D9B2FDCC96666E
9F2007948130EC3DB064584E219954237AF3900242457EFB8B24247815D688C526CD44D;#" />
</File>

We are telling SharePoint that this file should be Ghostable, that the content type is a Page Layout

PixelMill, Inc.

Page 17

($Resources:cmscore,contenttype_pagelayout_name) and that the Associated Content Type is an

Article Page. You can change the ContentType and AssociatedContentType as needed.

Add Additional Script Files to the Layouts Mapped Directory (Farm) or Style Library (Both)
1. Add your new file or copy your file into your preferred Mapped directory or Style Library module. A few
notes, dont forget that for sandboxed solutions you cannot used the Layouts or Images Mapped folder.
Also, if you do use the Layouts or Images mapped folders then it can be more difficult to change the
files in the future using SPD. This is good or bad depending on what control you want to give to
designers after a feature has been activated.
2. By default the Elements.xml file in the Module or Mapped Directory will be updated to reflect the new
file you added, but most likely not correctly.
3. Open the Elements.xml file in the module or Mapped directory in question.
4. Add Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" to the <File> element that was just added, i.e.
<File Path="Style Library\Themable\JumpstartBranding\styles.css" Url="Themable/JumpstartBranding/styles.css"
Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />

Allowing the file to be Ghostable can help with performance while adding IngoreIfAlreadyExists allows
the file in question to not fail an activation if the file already exists. Now according to SharePoint
documentation settings this value to true will mean that if the file exists then it will be overwritten with
the new file. That is not true. This is why both solutions included in JumpstartBranding for SP2010
include code during deactivation to remove all files that were added during activation as this is not done
automatically.

Add Additional Images to the Layouts Mapped Directory (Farm) or Style Library (Both)
1. Follow the steps in the previous section on adding the image(s) to your desired location including
modifying the elements.xml file.
2. You now need to link to your image(s) in your stylesheet.
3. Open your stylesheet, by default for these solutions found in the Style Library module.
4. Say the image is in the Style Library module, i.e./Style Library/Images/JumpstartBranding/image.png
and your style sheet is in the same module, i.e.
/Style Library/Themable/JumpstartBranding/styles.css, then your url tag in the stylesheet would look
like:
url(../../Images/JumpstartBranding/image.png)

Change the Installation Directory Name of Feature Files

As an example let us assume that you want the stylesheet, styles.css found in the Style Library module
under the directory path, Themable/JumpstartBranding to the directory path en-us/Themable/
JumpstartBranding, also in the Style Library.
Warning: Both solutions were designed to install Master Pages, CSS files, Script Files and Images into a
subfolder, by default JumpstartBranding. If you wish to change this, i.e. you would like files installed to a
YourNameHere directory, the first, all assets should be installed to that sub directory within their specific

PixelMill, Inc.

Page 18

module or folder (i.e. the MasterPageGallery module or Style Library Module). This is so that it is easier to
clean up the feature when it is deactivated.
1. Open the project (for this example JumpStartBranding.csproj) in Visual Studio 2010.
2. Click on the right arrow next to the Style Library module to have the Style Library directory tree
display.
3. Right-click Style Library if the en-us directory does not exist. Mouse-over New in the drop down menu,
then in the New sub menu click Folder.
4. Rename the new folder, en-us.
5. Following the same procedure as above create a new Folder, Themable in the en-us directory as well
as a JumpstartBranding folder in the Themable folder.
6. Drag and drop the styles.css file from the /Themable/JumpstartBranding directory to the enus/Themable/JumpstartBranding directory.
7. Double-click the Elements.xml file found in the root of the Style Library module.
8. Although the Elements.xml should have been updated for you, for this example, verify that the new
<File> element for this file changed to:
<File Path="Style Library\en-us\Themable\styles.css" Url="en-us/Themable/styles.css" Type="GhostableInLibrary"
IgnoreIfAlreadyExists="TRUE" />

9. For this example, the Path value will need the full path to the file were as the Url does not. This is
because in the Module element we already specified the primary directory of the Url.
10. You can use this same strategy to change the install directory of files in the Layouts and Images
shared folders as well as the Style Library module.
If you wish to change the sub directory name that assets will be installed in
For this example we will assume that you want to change the sub directory name that assets are installed
to from JumpstartBranding to YourNameHere. First, you will want to rename the directory names in the
modules and/or shared folders as explained above.
1. Open the JumpstartBranding.EventReceiver.cs file found in the JumpstartBranding feature.
2. Around line 32 look for the line.
String sBrandingFolder = "JumpstartBranding";

3. Rename JumpstartBranding to YourNameHere,, i.e.

String sBrandingFolder = "YourNameHere";

Change Which Master Page is Set as Default

By default both Solutions include two Master Pages in the MasterPageGallery module. This is primarily as an
example as you will likely only need one. OOTB, JumpstartBranding as the v4-JumpstartBrandingcentered.master set as your default and custom Master Page. For this example let us assume that you wish to
set the v4-JumpstartBranding-simple.master as your default and custom Master Page.
1. Open the project (in this example JumpStartBranding.csproj) in Visual Studio 2010.
PixelMill, Inc.

Page 19

2. Open the JumpstartBranding.EventReceiver.cs file found in the JumpstartBranding feature.

3. Around line 23 look for the line.
//Default Master Page File Name
String sDefaultMasterPage = "v4-JumpstartBranding-centered.master";
//Custom Master Page File Name
String sCustomMasterPage = "v4-JumpstartBranding-centered.master";

4. Rename the variable values to v4-JumpstartBranding-simple.master, i.e.

//Default Master Page File Name
String sDefaultMasterPage = "v4-JumpstartBranding-simple.master";
//Custom Master Page File Name
String sCustomMasterPage = "v4-JumpstartBranding-simple.master";

Package the Solution for Deployment

This is the easy part and Visual Studio does this for us. Simply click Build in the Menu, and in the Build menu
select Package. This will create a wsp file in either the Debug or Release folder, depending on which Active
Solution Configuration you have set in the Configuration Manager. After debugging you can then take this .wsp
file and follow the instructions provided above on installing this into your SharePoint site.

References
Primary references for the Jumpstart Solution include the following:
Starter Master Pages for SharePoint 2010 by Randy Drisgill
http://startermasterpages.codeplex.com/
Deploying Branding Solutions for SharePoint 2010 Sites using Sandboxed Solutions by Ted Pattison
http://msdn.microsoft.com/en-us/library/gg447066.aspx
SharePoint 2010 CSS Reference Chart by Heather Solomon
http://sharepointexperience.com/csschart/csschart.html
Please also refer to many references that have been added in the code itself for specific code examples of
similar code blocks that I either used for inspiration or I found after the fact while producing Jumpstart Branding
for SharePoint 2010.
There are many other references that I am sure I am leaving out because I either havent recorded the address
of the reference, or I dont remember who the reference might have been. I apologize to those that have
contributed to the SharePoint community and were likely a part of my SharePoint education, including sites,
blogs or references that I learned from over the years but and not specifically thanking.

PixelMill, Inc.

Page 20