Create your own SharePoint Master Pages and Page Layouts

SharePoint Advocate and EnthusiastPixelMill

ERIC OVERFIELD | @ericoverfield

CREATE YOUR

OWN SHAREPOINT

MASTER PAGES AND

PAGE LAYOUTS

Wednesday August 26th

8:30 AM – 9:45 AM

Founder and SharePoint Branding/UI Lead, PixelMill

Speaker, Teacher, Advocate, Author

SharePoint Community Organizer

Located in Davis, CA

Co-author: “Black Magic Solutions for White Hat

SharePoint”

(August, 2013)

Co-author: “Pro SharePoint 2013 Branding and Responsive Web

Development”

(Apress – June 12th, 2013)

Order Your Copy

http://pxml.ly/zsqykd

INTRODUCTION

ericoverfield.com @ericoverfield

WHAT YOU WILL LEARN TODAY

1

2

3


TRADITIONAL MASTER PAGE AND PAGE LAYOUT OVERVIEW

DESIGN MANAGER: HTML MASTER PAGES & HTML PAGE LAYOUTS

DEMOS, IMPORTANT CONTROLS AND CONCEPTS

TRADITIONAL SHAREPOINT MASTER PAGES

Provides main HTML wrapper used by all pages

Defines HTML <html />, <head /> and <body /> tags

Loads resources such as JS and CSS files

Defines page flow and shared page components

Header, footer, logo, navigation, suite bar / ribbon, etc.

Uses ContentPlaceHolders for replaceable areas

OOTB, no longer uses tables for layout!


MASTER PAGE COMPONENTS


Suite Bar

Ribbon

Header

Current Nav

Page Wrapper

TRADITIONAL SHAREPOINT MASTER PAGES BEST PRACTICES

Start with seattle.master, oslo.master or a starter Master Page

Always include all ContentPlaceHolders found in seattle.master

Use hidden <div /> to hide unneeded ContentPlaceHolders

Keep the suite bar / ribbon at the top of the page

Replace <PublishingRibbon:PublishingRibbon /> if more control needed

Include your custom layout HTML within #s4-workspace

Must use <SharePoint:AjaxDelta /> blocks to allow for MDS

Must register tag prefixes to access SharePoint and .Net controls


DEMO

TRADITIONAL

MASTER PAGES

TRADITIONAL SHAREPOINT PAGE LAYOUTS

Specific to Publishing sites

Defines content layout for a given page

Contains “Content” blocks that link to Master Page

Does not contain <html />, <head />, <body /> and other common tags

Associated with a Content Type

May surface Content Type columns


PAGE LAYOUT COMPONENTS


Site Columns

Snippets

Content Place Holder

TRADITIONAL SHAREPOINT PAGE LAYOUTS BEST PRACTICES

Start with an existing page layout

Stick with same content type if possible

Always keep custom code within <asp:Content /> blocks

Consider different content viewing and authoring experiences

Use <Publishing:EditModePanel /> controls

Bake in specific rollup webparts, or default webparts in webpart zones

Must register tag prefixes to access SharePoint and .Net controls


DEMO

TRADITIONAL

PAGE LAYOUTS

THE NEW SHAREPOINT

BRANDING TOOL

DESIGN MANAGER

DESIGN MANAGER OVERVIEW

New to SharePoint 2013

Requires Publishing Infrastructure

Import a HTML prototype directly into SharePoint

SharePoint handles conversion

Interface for custom Master Pages and Page Layouts

Also includes Display Templates and Device Channels

No longer limited by SharePoint Designer


HTML MASTER PAGES

Convert a HTML prototype directly into SharePoint

Some assembly required – Snippet Gallery


HTML PAGE LAYOUTS

Must derive from a Master Page

Also tied to Content Types / custom Content Types

Also uses Snippets and Snippet Manager

Much easier way to include SharePoint controls

Only edit what is in “Content” blocks


DESIGN MANAGER BEST PRACTICES

Only edit the .html files – SharePoint controls the .master and .aspx

Only rename, move, delete, check out, publish, etc the .html files even

HTML Master Pages manage unneeded ContentPlaceHolders!

The Snippet Gallery and snippets are your friend

All code must be valid HTML / XML, thus why controls are “comments”

SharePoint may mangle your HTML, bummer


DEMO

DESIGN MANAGER

HTML MASTER PAGES

HTML PAGE LAYOUTS

IMPORTANT CONTROLS AND TAGS

Found in Microsoft.SharePoint.WebControls

<SharePoint:SPSecurityTrimmedControl /> - AuthenticationRestrictions, HideFromSearchCrawler, EmitDiv

<SharePoint:FieldValue /> - FieldName (ID or Internal Name)

<SharePoint:TextField /> - FieldName, InputFieldLabel (for editing)

Found in Microsoft.SharePoint.Publishing.WebControls

<Publishing:EditModePanel /> - PageDisplayMode, GroupingText, SuppressTag (doesn’t do what you think)

<Publishing:RichHtmlField /> - FieldName, InputFieldLabel (for editing), AllowFonts (and many more)

References Src="~/_controltemplates/15/Ribbon.ascx"

<PublishingRibbon:PublishingRibbon /> - Great for Office 365


A QUICK REVIEW

1 TRADITIONAL MASTER PAGE AND PAGE LAYOUT OVERVIEW

2 DESIGN MANAGER: HTML MASTER PAGES & HTML PAGE LAYOUTS

3 DEMOS, IMPORTANT CONTROLS AND CONCEPTS


RESOURCES


Starter on learning SharePoint Branding

http://pxml.ly/1CHNXKc

SharePoint 2013 Starter Master Pages

http://pxml.ly/1uFeG8Z

SharePoint 2013 Design Manager branding and design capabilities

http://pxml.ly/1vBC3PD

Responsive Frameworks for SharePoint 2010 and 2013

http://responsivesharepoint.codeplex.com

SP Blueprint for SharePoint 2013

http://pxml.ly/1ql6Dqa

Master pages, the Master Page Gallery, and page layouts in SharePoint 2013

http://pxml.ly/1rBdcLJ

CREATE YOUR OWN

SHAREPOINT MASTER PAGES

AND PAGE LAYOUTS

THANK YOUQUESTIONS?

@ericoverfieldSPTechCon Boston 2015

http://pxml.ly/EO-MP-PL

Order Your Copy

http://pxml.ly/zsqykd

“Pro SharePoint 2013 Branding and Responsive Web Development”

(Apress – June 12th, 2013)

Create your own SharePoint Master Pages and Page Layouts

Technology

Transcript of Create your own SharePoint Master Pages and Page Layouts