SharePoint 2013 Branding
Post on 20-Jun-2015
288 Views
Preview:
DESCRIPTION
Transcript
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?
top related