Download - SharePoint 2013 Branding
![Page 2: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/2.jpg)
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
![Page 3: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/3.jpg)
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)
![Page 4: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/4.jpg)
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
![Page 5: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/5.jpg)
DemoComposed Looks
![Page 6: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/6.jpg)
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
![Page 7: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/7.jpg)
DemoCustomize OOB Master Page
![Page 8: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/8.jpg)
Make a Master Page MDS Complaint
![Page 9: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/9.jpg)
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
![Page 10: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/10.jpg)
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)
![Page 11: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/11.jpg)
DemoCreate Master Page using Design
Manager
![Page 12: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/12.jpg)
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" />
![Page 13: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/13.jpg)
DemoCreate Page Layout using Design
Manager
![Page 14: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/14.jpg)
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
![Page 15: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/15.jpg)
DemoCreate Device Channel Using
Design Manager
![Page 16: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/16.jpg)
Device Channel Panel
• Can not be used for web part zones
• Support preconfigured web parts
![Page 17: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/17.jpg)
DemoCreate Device Channel Panel Using
Design Manager
![Page 18: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/18.jpg)
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
![Page 19: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/19.jpg)
Starter master pages
• http://startermasterpages.codeplex.com/ (Randy Drisgill)
• http://responsivesharepoint.codeplex.com
![Page 20: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/20.jpg)
DemoCustom Master Page using Starter
Master page
![Page 21: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/21.jpg)
DemoResponse Design Master Page
![Page 22: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/22.jpg)
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
![Page 23: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/23.jpg)
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
![Page 24: SharePoint 2013 Branding](https://reader035.vdocument.in/reader035/viewer/2022062707/55849ffed8b42afd5b8b4577/html5/thumbnails/24.jpg)
Questions?