DEVELOPING AND DEPLOYING CUSTOM BRANDING SOLUTIONS IN SHAREPOINT 2010

By: Ajay Nayak

Cap Area .NET SharePoint Special Interest Group

About Me

SharePoint jack of all trades (Developer, Admin, Architect)

4 years of SharePoint experience Booz Allen Hamilton Twitter: @ajaynayak

Anatomy of a SP2010 Master Page

Header and Ribbon Left navigation (Quick Launch) Content Placeholders

Where are they stored?

\Global directory in the 12 or 14 hive Located on the web front end (WFE) server C:\Program Files\Common Files\Microsoft

Shared\14\Template\Global Pointer to 12/14 hive is stored in the Master

Page Gallery

Master Page Gallery in a Site Collection Located in the content database (database

server)

UI Changes in SharePoint 2010 Server Ribbon

Rich AJAX interactions Dubbed “Fluent UI”

Placement of controls Site Actions, Edit Page, Search, etc.

Out-of-the-box Master Pages V4.master

SP2010 Team Site master page User content pages

Minimal.master Search and Office Web Applications No site navigation or ribbon

Simple.master For error and login pages Not customizable

Default.master Included for backwards compatibility (SP2007) No ribbon or AJAX interactions

Compatibility Improvements

Improved HTML markup DIVs for content instead of TABLEs (for the

most part) More W3c XHTML compliant Better browser support

Doc Types and CSS standards IE 7-9, Firefox 3.6+, Safari 4.04+ IE 6 NOT supported

Development Tools

SharePoint Designer 2010 WYSIWYG, ASP/HTML/CSS code, deployment

Visual Studio 2010 ASP/HTML/CSS code, solution development, deployment

IE Developer Toolbar Debugging, identifying CSS elements

Photoshop Image creation/manipulation, color selection

GIMP Image creation/manipulation, color selection

Notepad

SharePoint Development in VS2010 SharePoint 2010 item templates

Web Part, Workflow, Module, Content Type, List Definition, etc Automated build and deployment File references and Modules (sets of files)

Once files are added to the solution, references automatically appear in the element files

Modules are automatically added to Feature elements Sandboxed solutions

Live in the site collection Can be run by site administrators Can only manipulate a subset of objects in the SP object

model Performance an be throttled

Master Page Deployment Options Manual deployment to the Master Page Gallery

Followed by a manual application of the master page

Does not require Visual Studio

OR

WSP solution deployment to the Site or Farm solution store Followed by an automated application via a

Feature

Elements in a Master Page Solution Module

Group of files to be provisioned .master files, CSS files, images

Elements.xml file specifies where file will be provisioned to

Feature Facilitate the provisioning/de-provisioning of

master pages Event Receiver

Piece of code that runs when feature is activated Can be used to apply the master page to sites

Where to start

Start with a copy of V4.master (or minimal.master if you do not need the ribbon or top nav)

Create a new CSS file, and copy/paste the elements that you wish to modify from COREV4.css

Create a module for the CSS files and master page file CSS files should be provisioned to the Style Library or to

the 14 hive Master pages should be provisioned to the Master Page

Gallery or to the 14 hive

http://msdn.microsoft.com/en-us/library/gg447066.aspx

Custom Page Layouts

You can make copies of default page layouts (Welcome page, Blank web part page, etc), and customize them

Layout files should be provisioned to the Master Page Gallery (_catalogs/masterpage)

Example Module declaration in Elements.xml file:<Module Name="masterpage" Url="_catalogs/masterpage"><File Path="masterpage\MyCustomPageLayout.aspx" Url="MyCustomPageLayout.aspx" Type="GhostableInLibrary">      <Property Name="Title" Value="My Custom Page Layout" />      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />      <Property Name="PublishingPreviewImage" Value="~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/CustomPageLayout.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/CustomPageLayout.png" />      <Property Name="PublishingAssociatedContentType" Value=";#$Resources:cmscore,contenttype_articlepage_name;;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900242457EFB8B24247815D688C526CD44D;#"/></File></Module>

Images and Styles

Images and CSS files can be provisioned to a library within the site collection (ie. Style Library), or to the 14 hive (.ie IMAGES folder)

Provisioning to a library Advantages: Site admins can easily modify files Disadvantages: Each page load will require calls to the DB

for the images and styles Provisioning to the 14 hive

Advantages: WFE server can cache file for faster loading Disadvantages: Modification of files will require another

deployment, or access to the 14 hive in the WFE Personal recommendation

Deploy images to the IMAGES folder in the 14 hive, and CSS files to the Style Library in the root site of the site collection

CSS Registration

<SharePoint:CSSRegistration Name=“a.css“ After=“b.css” runat="server" />

Element used to specify CSS files Available in SP2007, but rendering (as

“<link rel”) was not consistent Revamped in SP2010

Supports ordering CSS files using “After=“ Supports conditional expressions (“IF IE 8”)

Upgrading SP2007 Master Pages Add SP2010 Content Placeholders

Add the Server Ribbon Cut and paste HTML code

Add controls ScriptManager SPPageManager ScriptLink

http://msdn.microsoft.com/en-us/library/ee539981.aspx

<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" runat="server">

The top of the Quick Launch menu.

<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" runat="server">

The bottom of the Quick Launch menu.

Example #1- treasury.gov

Example #2 - cognifide.com

Example #3 – recovery.gov

Resources

Links Real World Branding with SP2010 Publishing Sites SP2010 Base CSS Classes Themes and Resources for Upgrading a Custom Master Page

Blogs Marcy Kellar-

http://www.thesharepointmuse.com/sharepoint-2010-branding/ Andrew Connell- http://www.andrewconnell.com Randy Drisgill- http://blog.drisgill.com/ Heather Waterman- http://www.heatherwaterman.com Heather Soloman- http://www.heathersolomon.com/blog

Books http://

www.amazon.com/Professional-SharePoint-Branding-Interface-Programmer/dp/0470584645

Demo…