Mastering your SharePoint Internet design

Quick Facts

About Us• 22nd Year• Grand Rapids &

Royal Oak• 30 Staff

Approach• Vendor

Independent• Non-reseller• Professional

Services Only

Partnerships• Microsoft Gold• VMware Enterprise• Citrix Silver• Cisco Registered• Novell Gold

Expertise

Microsoft Gold Partner

Competencies• Four Gold• Eight Silver

Successes• Customer Excellence

Award• Virtual Technical

Specialist (VTSP)• Managed Partner• Numerous Partner

Awards

Pinpoint• Microsoft’s official

partner directory• 5-star rating

Get Social with C/D/H

C/D/H Talks Tech C/D/H Tweets Tech

Your Presenter

Jeff KinnellyConsultant, Design / DevelopmentJeffK@cdh.com

Agenda

• Architecting Branding Solutions – On Premise– In the Cloud

• Creating Branding Features – Anatomy of a Custom Branding Feature– Deployment

• Q & A

Overall Project Strategies

Branding Approaches

Public websites– Light informational websites (60-100 hours)– Enterprise websites (300-1000+ hours)

Intranets– Custom themes (12-20 hours)– Low-impact designs (25-100 hours)– Fully custom solutions (300-1000+ hours)

General Branding Guidelines

• Office 365 solutions– Doesn’t use SP Central Admin– No farm deployments– Sites inherit branding from the root collection– My Sites cannot be branded– Is the model for SP 2013 (sandboxed solutions)

Common Goals for Branding Projects

• Common Goals for Branding Projects

Master Pages + Page Layouts

Master Page

Master Page

Page Layout

SharePoint Front-end:How the Site is Built

Master Pages

• Team site master page• User content pages (lists\content pages\etc)• _layouts pages (site settings, etc)

v4.master

• For app experiences, like Search or Office Web Applications• If you do not need site navigation, do not have a ribbon• If your app needs the space

minimal.master

• For error pages or login pages• Not customizable, but pages can be replacedsimple.master

• Show site using legacy interface• No Ribbon, no fluencydefault.master

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)

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 SP object model– Performance can 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

Kanwal Khipple - BrightStarr

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

Kanwal Khipple - BrightStarr

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 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/enus/library/gg447066.aspx

Kanwal Khipple - BrightStarr

Images and Styles

• Images and CSS files can be provisioned to a library within the site collection (i.e. Style Library), or to the 14 hive (.i.e. 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

Custom Ribbon Fonts & Styles

.ms-rteStyle-BlueBackground {;background-color: blue important!;

color: white;}

H1.ms-rteElement-H1Blue {color: blue important!;

}

Demo

Building a Brand Feature

Upcoming SharePoint Events

September 19: Business Intelligence in SharePointSeptember 26: West Michigan SharePoint User Group MeetingSeptember 29: SharePoint SaturdayOctober 17: SharePoint vNext

Royal Oak306 S Washington AveSuite 212Royal Oak, MI 48067p: (248) 546-1800

Thank You

Grand Rapids15 Ionia SWSuite 270Grand Rapids, MI 49503p: (616) 776-1600

(c) C/D/H 2007. All rights reservedwww.cdh.com