Create your own SharePoint Master Pages and Page Layouts
Download as PPTX, PDF6 likes2,705 views
This document outlines Eric Overfield's presentation on creating custom SharePoint master pages and page layouts. The presentation covers traditional master pages and page layouts, the new Design Manager tool in SharePoint 2013 for importing HTML prototypes, important controls and tags, and best practices. It provides an overview of the key components of master pages and page layouts, demonstrations of working with them, and resources for further learning.
Create your own SharePoint Master Pages and Page Layouts
- 1. SharePoint Advocate and Enthusiast PixelMill ERIC OVERFIELD | @ericoverfield CREATE YOUR OWN SHAREPOINT MASTER PAGES AND PAGE LAYOUTS Wednesday August 26th 8:30 AM – 9:45 AM
- 2. 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
- 3. WHAT YOU WILL LEARN TODAY 1 2 3 ericoverfield.com @ericoverfield TRADITIONAL MASTER PAGE AND PAGE LAYOUT OVERVIEW DESIGN MANAGER: HTML MASTER PAGES & HTML PAGE LAYOUTS DEMOS, IMPORTANT CONTROLS AND CONCEPTS
- 4. 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! ericoverfield.com @ericoverfield
- 5. MASTER PAGE COMPONENTS ericoverfield.com @ericoverfield Suite Bar Ribbon Header Current Nav Page Wrapper
- 6. 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 ericoverfield.com @ericoverfield
- 8. 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 ericoverfield.com @ericoverfield
- 9. PAGE LAYOUT COMPONENTS ericoverfield.com @ericoverfield Site Columns Snippets Content Place Holder
- 10. 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 ericoverfield.com @ericoverfield
- 12. THE NEW SHAREPOINT BRANDING TOOL DESIGN MANAGER
- 13. 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 ericoverfield.com @ericoverfield
- 14. HTML MASTER PAGES Convert a HTML prototype directly into SharePoint Some assembly required – Snippet Gallery ericoverfield.com @ericoverfield
- 15. 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 ericoverfield.com @ericoverfield
- 16. 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 ericoverfield.com @ericoverfield
- 17. DEMO DESIGN MANAGER HTML MASTER PAGES HTML PAGE LAYOUTS
- 18. 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 ericoverfield.com @ericoverfield
- 19. 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 ericoverfield.com @ericoverfield
- 20. RESOURCES ericoverfield.com @ericoverfield 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
- 21. CREATE YOUR OWN SHAREPOINT MASTER PAGES AND PAGE LAYOUTS THANK YOU QUESTIONS? @ericoverfield SPTechCon 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)
Editor's Notes
- #2: Slides will be available from blog and twitter In-depth look at SharePoint Online and 2013 Master pages and page layouts. Will be working on SPO, but 2013 is the same. Devs should be happy, we will walk through the process. Business users, you will see what is possible. Meat will be in the demos http://www.zengardner.com/wp-content/uploads/Manifest-Law-of-Attraction1-700x471.jpg Who has already worked with RWD and SP? Thoughts? Scratch, framework, how did you do it?
- #3: Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
- #8: Build a custom master page
- #12: Create page layout from demo, showing content blocks
- #13: Web Distributed Authoring and Versioning
- #18: Convert prototype for HTML Master page and HTML Page layout, including search results
- #22: Thank You! Don’t forget to check out my blog where you can download this presentation or the recording. Easiest way to get to the material I referenced