SHAREPOINT 2013 BRANDING

Kashif Imran

KashifImran@outlook.com

Agenda

• SharePoint Branding

• Composed Looks

• Customize OOB Master Pages

• Custom Master Pages and Page Layouts• Design Manager and Starter Master Pages

• Device Channels

• Device Channel Panels

• Responsive Design in SharePoint

SharePoint Branding

• Branding• Marketing identity of a company/product

• SharePoint Users• Making SharePoint look not like SharePoint

• Developers• Changing the look and feel of SharePoint. Add a bunch of colors and styles

• Designers• User Experience (UX) development

• Availability of various Branding Features• Intranet, Extranet, Internet, On Premises, Online(Office 365 plans)

Composed Looks

• Low effort SharePoint Branding usually for Team sites

• Layout (Master Page) + Theme (Color Palette) + Font Scheme + Background Image

• SPFont and SPColor files in /_catalogs/ theme/15

DemoComposed Looks

Modifying OOB Master Pages

• Medium effort SharePoint Branding

• Each site has its own Master Page Gallery which is default location for branding assets in SharePoint 2013

• OOB SharePoint Master Pages • Seattle.master• Oslo.master

• Corev15.css

• SharePoint Designer

DemoCustomize OOB Master Page

Make a Master Page MDS Complaint

Custom Master Pages and Page Layouts• Master page that has very complex design

• Design Manager

• Starter Master Pages (http://startermasterpages.codeplex.com/)

• Dealing with errors• Modify web.config CallStack, AllowPageLevelTrace=True, CustomErors:

mode=Off

Design Manager

• Available only in publishing site or with publishing feature enabled

• Converts html design into master page

• Branding created with Designer Manager will work with team/collaboration sites but will require some changes for it to work with all features

• DOCTYPE is required and can not have form tag

• Snippet Gallery for Master Page and Page Layouts

• Export WSP Package (Sites Settings -> Sols)

DemoCreate Master Page using Design

Manager

Page Layout using Design Manager• Step 1: Create Content Type that will be associated to the Page

Layout

• Step 2: Create Page Layout in Design Manager

• Step 3: Add snippets from Design Manager into modified html page in SharePoint

• Step 4: Publish files

• Step 5: Apply Page Layout to page(s)

• <link rel="stylesheet" type="text/css" href="spug-welcome.css" ms-design-css-conversion="no" />

DemoCreate Page Layout using Design

Manager

Device Channels

• Rules to choose master page based on browser’s user agent string

• Not same as media queries. Media queries in CSS3 allows you to change style based on browser capabilities (resolution, orientation, height, width…)

• Use both for responsive mobile experience

• SharePoint server only feature

• Testing Device Channels: http://mysite.com/Pages/default.aspx?DeviceChannel=Chrome

DemoCreate Device Channel Using

Design Manager

Device Channel Panel

• Can not be used for web part zones

• Support preconfigured web parts

DemoCreate Device Channel Panel Using

Design Manager

WSP Package from design manager• Export WSP package to apply design to another site collection

• Design Manager adds all modified files from Master page gallery, style library, theme gallery and device channels

• Does not include content pages, navigation settings or stuff from term store

Starter master pages

• http://startermasterpages.codeplex.com/ (Randy Drisgill)

• http://responsivesharepoint.codeplex.com

DemoCustom Master Page using Starter

Master page

DemoResponse Design Master Page

Design Manager VS Custom Master Page• Design Manager

• SharePoint Server or Office 365• Quick branding• Lack of experience with SharePoint/Asp.NET• SharePoint Server and Publishing site• MDS support is not required

• Custom Master Page• SharePoint Server or Office 365• Very complex branding• Experience with Pre SharePoint 2013 branding• SharePoint foundation or non publishing site• Branding for Team site with MDS

Resources

• Develop the site design in SharePoint 2013 (MSDN)

• http://blog.drisgill.com/ (Randy Drisgill)

• http://blog.sharepointexperience.com (Dustin Miller, Heather Solomon)

• SharePoint classes that stuck and save the day

Questions?