JumpstartBrandingSP2010-Documentation-V1.pdf

7/25/2019 JumpstartBrandingSP2010-Documentation-V1.pdf

1/20

Jumpstart

Branding for

SharePoint

2010

Version 1.0

Version 1.0A complete branding solution shell including asimplified, simple, optimized Master Page and aVisual Studio 2010 Brand Solution for packagingyour Branding elements into an easy to deploySharePoint Feature for the farm or a sandbox.

By Eric Overfield

PixelMill

Blog.pixelmill.com/ericoverfield

Twitter.com/ericoverfield


2/20

PixelMill, Inc. Page 2

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 InstructionsJumpstart 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 PageCentered, 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 SolutionFarm Based .................................................................... 11

Uninstall the Visual Studio 2010 Branding Installation SolutionFarm Based ................................................................ 11

Install the Visual Studio 2010 Branding Installation SolutionSandbox Based ............................................................... 11

Uninstall the Visual Studio 2010 Branding Installation SolutionSandbox 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


3/20


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 projectsthat contain components of JB, and I have used many myself over the last few years. The problem for me wasthreefold. First, I havent found an encompassing solution that brought everything together, second, manyother attempts to provide samples or code didnt come with enough documentation for the average user (or sopeople have told me, and thus asked for my help), and third, well, I didnt like how some other projects wereput together or implemented.

So what is Jumpstart Branding for SP 2010 then? I designed this as a beginning to end shell for your nextSharePoint Branding project. Hopefully you will learn a thing or two about SharePoint branding along the wayas 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 backwardscompatible (v3) code blocks as they are almost never needed moving forward. There have been manyattempts at this already, in fact I include two of the better ones that I know of in my resources section, but I lookat the need for a basic, simple Master Page in a slightly different way. I wanted a starting place for all of myprojects 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. MasterPages, Page Layouts, Stylesheets, Script files, Image Files, Web Parts, etc, so that this can all be deployed asa feature in SharePoint. There are many design decisions and caveats that I made when I built these twosolutions, including the reason why I created two when many might argue you should only have one. Later inthis 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 notonly activate your branding feature correctly, but to also handle housekeeping when you deactivate the featureor properly handing published files for Sandbox branding features. These two solutions attempt to bring manydifferent 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 resourcesthat I highly recommend that you review as they have helped me along the way.


4/20


What is in this PackageWithin this package you will see three primary directories, Simple Master Page, Centered Master PageandVS2010Projects.

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

Simple Master PageCentered, Fixed Width

The Centered Master Page directory contains a basic, no frills master page based on the v4.masterSharePoint provides out of the box, but has a fixed width of 960 pixels, and is centered. This is a great place tostart when building your own custom master page where you want a centered, fixed width site. This was builtoff the Simple Master Page so all of the V3 references have been removed and the extra ContentPlaceHoldershave been hidden. Included are a stylesheet and a few javascript files that are needed for this design to fullyfunction. Installation instructions and a more thorough explanation as to why this Master Page was built theway 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 sandboxedsolutions. 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 SolutionFarm Based

Contains two Master Pages, one Page Layout, Stylesheet and jquery library found in the _layouts directory aswell 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 requirefull 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 prodepending on your needs.


5/20


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 mightwant 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 hostingservices.

A solution built without sandboxing in mind may be difficult to covert to be sandboxed friendly.

Visual Studio 2010 Branding Installation SolutionSandbox Friendly

Contains two Master Pages, one Page Layout, Stylesheet and jquery library found only in a module assandboxed 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 ofaccess 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 withSandbox 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 arebeing installed to.

Files in modules deployed to your site collection, that have been deployed to folders that requirecontent approval, are not checked in and/or publishing by default. This makes sense that evenwith a sandbox solution the administrator should review files that have been added, but thisadds an extra step to the deployment of the branding solution.


6/20


Installation InstructionsJumpstart 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 littlehelp of the browser if publishing is enabled). There are different steps depending on if you are installing theMaster Page to a foundation only site or a Publishing site (or a site collection with publishing enabled). Sincethe Jumpstart Master Page is designed to be a starting place, I will provide my preferred installation methodusing SharePoint Designer and a little browser for publishing sites. This is broken down into two methods, onefor Foundation Only Sites and another method if you have publishing enabled (server sites or sites withpublishing 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 Filesfound 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 withPublishing Enabled


2. Go to the root of your site. Click on All Filesfound in the left navigation.


7/20


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,



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 Typeshould be Publishing Master Page

b. Compatible UI Versionshould be 4

10. Then Click "OK".

11. While still in the browser, right-click the new Master Page to Check Inthe item. You'll get the option for

what type of version you would like to check in. Choose Major Version, which will also publish theitem. 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 Pagesection 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 Pagesfolder.

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 URLsection for now for this Basic Jumpstart Master Page.

http://yoursite/_Layouts/ChangeSiteMasterPage.aspxhttp://yoursite/_Layouts/ChangeSiteMasterPage.aspxhttp://yoursite/_Layouts/ChangeSiteMasterPage.aspxhttp://yoursite/_Layouts/ChangeSiteMasterPage.aspx


8/20


Installing the Jumpstart Master PageCentered, FixedWidth

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

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




under All Files.

4. Drag and drop the Master Page file, v4-JumpstartBranding-centered.master to the folder location,_catalogs/masterpage.


6. Open your Style Library folder in SPD by going to the Style Libraryfolder.

7. In the Style Library folder, if there is not a Themabledirectory 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 Scriptsdirectory 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 Viewyou will need to add a link to the new Stylesheet. This line of text will go before line

27,

a. Note: Be sure to change the namevalue 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 namevalue 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.


9/20


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.


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 orSites with Publishing Enabled




under All Files.

4. Drag and drop the Master Page file, v4-JumpstartBranding-centered.master to the folder location,


5. Go to the root of your site. Click on All Filesfound in the left navigation.6. Open your Style Library folder in SPD by going to the Style Libraryfolder.

7. In the Style Library folder, if there is not a Themabledirectory 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 Scriptsdirectory 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


18. In the Check In window choose Publish as a Major Version. Click "OK".


10/20


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 Typeshould be Publishing Master Page

b. Compatible UI Versionshould be 4

22. Then Click "OK".

23. While still in the browser, right-click the new Master Page to Check Inthe 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) -> SiteSettings

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 Pagesection 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 Pagesfolder.

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

pathvalue 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 .

http://yoursite/_Layouts/ChangeSiteMasterPage.aspxhttp://yoursite/_Layouts/ChangeSiteMasterPage.aspxhttp://yoursite/_Layouts/ChangeSiteMasterPage.aspxhttp://yoursite/_Layouts/ChangeSiteMasterPage.aspx


11/20


Installation InstructionsSolutionAs I have noted there are two solutions provided in this package. One if for installing branding to a farm whilethe other is for a sandboxed installation. Both of these solutions should work for foundation and server sites. Iprovide 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 Based1. 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.wspa. Replace c:\temp\JumpstartBranding.wsp with the path to where you placed the .wsp file.

4. Install-SPSolution -Identity JumpstartBranding.wspGACDeployment5. 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 InstallationSolutionFarm 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.wsp4. Remove-SPSolution -Identity JumpstartBranding.wsp5. The solution has not been completed removed from your farm.

Install the Visual Studio 2010 Branding Installation SolutionSandbox Based

Via 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.


12/20


b. Replace http://yoursitecollection/with the path to your site collection you are installing thisSandbox solution to.

3. Add-SPUserSolution -LiteralPath c:\temp\JumpstartBranding.wsp -Site http://yoursitecollection/4. Install-SPUserSolutionIdentify JumpstartBranding.wsp -Site http://yoursitecollection/5. Go to your Site Collection Features page and activate the Jumpstart Branding Sandbox feature at

http://yoursitecollection/_layouts/ManageFeatures.aspx?Scope=Site

6. That is it. The Jumpstart Branding Feature is now activated on your site collection

Via The BrowserNote: 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. Go to Site Actions->Site Settings

3. On the Site Settings page, under the Galleriessection, click Solutions.

4. On the Solutionspage, in Ribbon click on the Solutionstab.

5. Click Upload Solution.

6. In the dialog box that appears, browse to the folder that contains your .wsp file, in this case,

JumpstartBrandingSP2010\VS2010Projects\JumpstartBrandingSandbox\bin\Release\JumpstartBrandingSandbox.wsp.

7. After successfully uploading the solution a new dialog box will appear. In the ribbon of this dialog box

click Activateto 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 Brandingfeature.

Uninstall the Visual Studio 2010 Branding InstallationSolutionSandbox 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.


3. UnInstall-SPUserSolutionIdentify JumpstartBranding.wsp -Site http://yoursitecollection/4. Remove-SPUserSolutionIdentify JumpstartBranding.wsp -Site http://yoursitecollection/6. The solution has now been completed removed from your site collection

Via The BrowserNote: 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.


13/20


c. Look for the Jumpstart Brandingfeature.

d. Click Deactivatenext to the Jumpstart Branding feature to deactivate it.

3. Go to Site Actions->Site Settings

4. On the Site Settings page, under the Galleriessection, click Solutions.

5. On the Solutionspage, 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 Solutiondialog box appears, click on Deactivateto 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 OKto remove the solution from the site collection.


14/20


Modifying the Components of this Package

Using and Modifying the Basic Master Page

The basic Master Page, file name v4-JumpstartBranding-basic.masterfound in the Simple Master Pagedirectory is a rehash of the v4.master Master Page provided OOTB with SharePoint. The main difference is theall V3 (SharePoint 2007 code for backwards compatibility) was removed, additional Content Placeholders werehidden and finally the code blocks are heavily commented so as to make it easier to read and know what eachline or block is there for.

To use this Master Page simple copy and paste it into your _catalogs/masterpage directory and make edits asneeded. There are no additional files (CSS, JS, etc) required for this Master Page to function correctly but youcan easily add your own.

To link to your own custom Stylesheet, if you do not want to link to it using the Alternative CSSproperty thenadd one of the following CSSRegistration tags in the section.

Or if this is for a site with publishing enabled(Server based)

With either of these blocks simply change the nameproperty to link to your stylesheet.

To link to your own Javascript files then add the following ScriptLink tag in the section.

Again, just change the nameproperty 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 Pagedirectory, is based on the v4-JumpstartBranding-simple.master MasterPage. Refer to the previous section, Using and Modifying the Basic Master Page, for instructions on how tomake simple changes. The primary difference between these two Master Pages is that this Master Pagecreates a centered, fixed width site. With most web sites this is a rather simple process and there are quite afew simple attempts to accomplish this with SharePoints v4.master Master Page. The problem is thatSharePoint is not that simple. There are additional considerations that need to be addressed. This MasterPage attempts to bring together the different steps required to successfully create such a layout in SharePointwith as little code as possible.


15/20


A few additional files are required for this Master Page including a custom stylesheet. For installationinstructions please refer to the previous section. This stylesheet not only creates the centered, fixed width sidebut also changes a few colors, adds a border and finally adds padding to the bottom of the site. All of thesechanges can be easily modified or removed, but were added to provide you additional examples of what canbe done and how. This stylesheet should go in a Themabledirectory to take advantage of the theming enginebuilt into the stylesheet.

Two Javascript files are also required, jquery-1.7.1.min.js and jquery.custom.master. By default the MasterPage 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 differentversion.

NOTE:This jquery library changes the normal jQuery tag $() to $j(). This is because SharePoints OOTB jsfiles sometimes use $() for its own purposes, meaning that if we let jQuery use $() as well then we can run intounexpected 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 tendencyto overflow a centered, fixed width site. This code loads every time a page loads and checks to see if anycontent is wider than the #s4-bodyContainercontainer. If it is then it resizes the fixed width site to fit thecontent. The Javascript that handles the width issue is very lean, it normally only has to search 2-5 differentelements, which on my machine takes about 2 milliseconds when tested using a simple debugging timer.

Using and Modifying the Visual Studio 2010 BrandingSolutionBoth

Jumpstart Branding for SP 2010 includes two Visual Studio 2010 Solutions that provide shell features to helpinstall 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 effectwhat 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 notallowed in Sandboxed solutions because sandboxed solutions do not allow adding files outside of the contextof site collection itself. Second, with publishing enabled, sandboxed solutions will not automatically check in orpublish files. This makes sense for Sandboxed solutions in general as for security reasons you may want toreview what the feature added to your site collection, but in our case this can get in the way. Therefore theSandboxed 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 solutiondoes 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 shellstyles.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.


16/20


There are two Master Pages and one Page layout included in the MasterPageGallery module. By default thev4-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 theStyle 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 youwould like.

By default all files (Master pages, Page Layouts, Images, Style Sheets, etc) should be added to a directory, bydefault JumpstartBrandingas set in by the sBrandingFoldervariable in the feature receiver class. This isused 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, bydefault, then all files added during activation will be removed upon deactivation. This is highly recommendedfor housekeeping purposes.

Sandbox Solution Overview

The sandboxed solution only uses local directories (no shared folder) for the stylesheet, images and javascriptfiles 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 thev4-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 theStyle Library module and will also remove any currently set theme as with a theme applied the new MasterPage may not work correctly because the theme files may not yet exist. You can simply reset the theme if youwould like.

By default all files (Master pages, Page Layouts, Images, Style Sheets, etc) should be added to a directory, bydefault JumpstartBrandingSandbox as set in by the sBrandingFoldervariable 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, bydefault, then all files added during activation will be removed upon deactivation. This is highly recommendedfor housekeeping purposes.

Finally the sandboxed solution provides additional code that will review all of the files added by the modulesand checks to see if they are checked in. If a file is found that is not checked in, normally any file your solutionadded, 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 canturn 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-sharepoint-blog.blogspot.com/2011/01/automatically-publishing-files.html,for a great technique. In the Feature Receiverclass, you will also see a variable, bCheckInDuringActivate . When set to true, by default, then all files addedby your solution will be checked to make sure they are checked in and published. This is highly recommendedfor housekeeping purposes.
http://stefan-stanev-sharepoint-blog.blogspot.com/2011/01/automatically-publishing-files.htmlhttp://stefan-stanev-sharepoint-blog.blogspot.com/2011/01/automatically-publishing-files.htmlhttp://stefan-stanev-sharepoint-blog.blogspot.com/2011/01/automatically-publishing-files.htmlhttp://stefan-stanev-sharepoint-blog.blogspot.com/2011/01/automatically-publishing-files.htmlhttp://stefan-stanev-sharepoint-blog.blogspot.com/2011/01/automatically-publishing-files.htmlhttp://stefan-stanev-sharepoint-blog.blogspot.com/2011/01/automatically-publishing-files.html


17/20


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)andrename 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. JumpstartBrandingand rename it.

6. Double-click this feature to load the featuresproperty window.

7. In the feature property window change the Titleand Descriptionas 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 Propertiespanel, change the Site URLto 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 MasterPageGallerymodule.

2. By default the Elements.xml file in the MasterPageGallerymodule will be updated to reflect the new

file you added, but most likely not correctly.

3. Open the Elements.xml file.

4. Remove the element added for your file.

5. Add one of the following element blocksa. Master Page

We are telling SharePoint that this file should be Ghostable, that its for V4 and that the content typeis a Master Page (0x010105)

b. Page Layout

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


18/20


($Resources:cmscore,contenttype_pagelayout_name) and that the Associated Content Type is anArticle 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 Directorywill 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 element that was just added, i.e.

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 FilesAs an example let us assume that you want the stylesheet, styles.css found in the Style Librarymoduleunder 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 asubfolder, by default JumpstartBranding. If you wish to change this, i.e. you would like files installed to a

YourNameHeredirectory, the first, all assets should be installed to that sub directory within their specific


19/20


module or folder (i.e. the MasterPageGallery module or Style Library Module). This is so that it is easier toclean 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 Librarymodule to have the Style Library directory tree

display.

3. Right-click Style Libraryif the en-us directory does not exist. Mouse-over Newin 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, Themablein the en-us directory as well

as a JumpstartBrandingfolder in the Themablefolder.

6. Drag and drop the styles.cssfile from the /Themable/JumpstartBranding directory to the en-

us/Themable/JumpstartBranding directory.

7. Double-click the Elements.xmlfile found in the root of the Style Librarymodule.

8. Although the Elements.xml should have been updated for you, for this example, verify that the new

element for this file changed to:

9. For this example, the Pathvalue will need the full path to the file were as the Url does not. This is

because in the Moduleelement 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 Layoutsand Images

shared folders as well as the Style Librarymodule.

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 JumpstartBrandingtoYourNameHere. First, you will want to rename the directory names in themodules and/or shared folders as explained above.

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

2. Around line 32look for the line.

StringsBrandingFolder = "JumpstartBranding";

3. Rename JumpstartBranding toYourNameHere,, i.e.

StringsBrandingFolder = "YourNameHere";

Change Which Master Page is Set as Default

By default both Solutions include two Master Pages in the MasterPageGallerymodule. This is primarily as anexample as you will likely only need one. OOTB, JumpstartBranding as the v4-JumpstartBranding-centered.master set as your default and custom Master Page. For this example let us assume that you wish toset 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.


20/20

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

3. Around line 23look for the line.

//Default Master Page File NameStringsDefaultMasterPage = "v4-JumpstartBranding-centered.master";

//Custom Master Page File Name

StringsCustomMasterPage = "v4-JumpstartBranding-centered.master";

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

//Default Master Page File NameStringsDefaultMasterPage = "v4-JumpstartBranding-simple.master";

//Custom Master Page File Name

StringsCustomMasterPage = "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 menuselect Package. This will create a wsp file in either the Debug or Release folder, depending on which ActiveSolution Configuration you have set in the Configuration Manager. After debugging you can then take this .wspfile and follow the instructions provided above on installing this into your SharePoint site.

ReferencesPrimary references for the Jumpstart Solution include the following:

Starter Master Pages for SharePoint 2010 by Randy Drisgillhttp://startermasterpages.codeplex.com/

Deploying Branding Solutions for SharePoint 2010 Sites using Sandboxed Solutions by Ted Pattisonhttp://msdn.microsoft.com/en-us/library/gg447066.aspx

SharePoint 2010 CSS Reference Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.html

Please also refer to many references that have been added in the code itself for specific code examples ofsimilar code blocks that I either used for inspiration or I found after the fact while producing Jumpstart Brandingfor SharePoint 2010.

There are many other references that I am sure I am leaving out because I either havent recorded the addressof the reference, or I dont remember who the reference might have been. I apologize to those that havecontributed 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.
http://startermasterpages.codeplex.com/http://startermasterpages.codeplex.com/http://msdn.microsoft.com/en-us/library/gg447066.aspxhttp://msdn.microsoft.com/en-us/library/gg447066.aspxhttp://sharepointexperience.com/csschart/csschart.htmlhttp://sharepointexperience.com/csschart/csschart.htmlhttp://sharepointexperience.com/csschart/csschart.htmlhttp://msdn.microsoft.com/en-us/library/gg447066.aspxhttp://startermasterpages.codeplex.com/

JumpstartBrandingSP2010-Documentation-V1.pdf

Documents

Transcript of JumpstartBrandingSP2010-Documentation-V1.pdf