SharePoint BrandingFrom Design to Provisioning

Principal Consultant at Cardinal Solutions Group

SharePoint Developer/Architect since 2007 JavaScript/AngularJS development Twitter

http://www.twitter.com/BartTowery Email

btowery@cardinalsolutions.com Durham, NC

Bart Towery

SharePoint Branding“How do we make it NOT look like

SharePoint”

What can be done with SharePoint?

Low Complexity Composed Looks Themes

Medium Complexity Design Manager Custom CSS

High Complexity Custom Master Pages Multi-site Branding Deployment

Branding Approaches

Pick Predefined Look Under site settings >

Look and Feel Change

Background Colors Layout/Master Page Fonts

Composed Looks

Configured in the Composed Looks Gallery

Custom “Theme” XML Files Custom Color Schemes Custom Fonts

SharePoint ColorPalette Tool http://

www.microsoft.com/en-us/download/details.aspx?id=38182

Creating Custom Composed Looks

Composed Looksand

SharePoint Color Palette Tool

DEMO

“For Designers to Brand SharePoint” (??)

Listed on Gear Menu (Site Actions)

Publishing Sites and Office 365 Public Facing Sites Only

Design Manager

Map a Drive to the Master Page Gallery How to configure and to troubleshoot mapped network drives that

connect to SharePoint Online sites in Office 365 - http://support.microsoft.com/kb/2616712

Use Your Favorite Tool to Edit Code Adobe Dreamweaver Microsoft Expression Web Visual Studio Notepad++

Tools for Design Manager

Create Master Page in HTML Convert Existing HTML

Designs into Working Master Pages

Converted HTML is Associated with Master Page

Each Update to HTML Causes Update to Master Page

Master Page Creation with Design Manager

Add SharePoint Functionality to Master Pages

HTML Code to Add

Snippet Gallery

Create Design in HTML with Images Map network drive to Master Page Gallery Add Design Files (HTML, Images, CSS,

JavaScript) Convert HTML Master Page using Design

Manager Add Snippets and Edit HTML as needed Customize CSS as necessary to change the look Publish ALL the files Apply the Master Page

Overview of Steps – Design Manager

Design Package

Source Site (Development) Target Site (Production)

Good for a Few Sites Deploys as a Sandbox Solution All Files Must be Checked In Additional Updates Deploy Over Previous Deployments

Design ManagerDEMO

Same as in SharePoint 2010 Use Randy Drisgill’s Starter Master Page

http://startermasterpages.codeplex.com/ Steps

Add Master Page and Design Files to Master Page Gallery Add HTML to Master Page/Update CSS Add Controls and Move Placeholders Publish and Apply

High Complexity Branding

Overriding OOTB CSS Often need to use Developer Tools

Finding HTML for Controls Use OOTB Master Pages

Take Your Time Make 1 Change at a Time Easier to Debug when Something Breaks

Not a Quick and Easy Task

Custom Master Page Tricks

SharePoint 2013 and SharePoint Online Solution Pack for Branding and Site Provisioning http://www.microsoft.com/en-us/download/details.aspx?id=42030

SharePoint 2013: Sample Pack for Solution Pack Samples http://code.msdn.microsoft.com/SharePoint-2013-Sample-81b03d1e

Multi-Site Branding Deployment

Questions?

Join us right after the event at Tyler’s Restaurant & Taproom! Socialize and unwind after our day of learning.

324 Blackwell St, Durham, NC 27701

Don’t Forget SharePint

Thank you for joining us Today!