3. 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)
4. 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
6. 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
9. 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
10. 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)
12. 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" />
14. 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
18. 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
22. 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
23. 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