Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SharePoint 2013 Branding

1,512 views

Published on

SharePoint 2013 branding.

Published in: Technology
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ★★★ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ★★★ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

SharePoint 2013 Branding

  1. 1. SHAREPOINT 2013 BRANDING Kashif Imran KashifImran@outlook.com
  2. 2. 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
  3. 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. 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
  5. 5. Demo Composed Looks
  6. 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
  7. 7. Demo Customize OOB Master Page
  8. 8. Make a Master Page MDS Complaint
  9. 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. 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)
  11. 11. Demo Create Master Page using Design Manager
  12. 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" />
  13. 13. Demo Create Page Layout using Design Manager
  14. 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
  15. 15. Demo Create Device Channel Using Design Manager
  16. 16. Device Channel Panel • Can not be used for web part zones • Support preconfigured web parts
  17. 17. Demo Create Device Channel Panel Using Design Manager
  18. 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
  19. 19. Starter master pages • http://startermasterpages.codeplex.com/ (Randy Drisgill) • http://responsivesharepoint.codeplex.com
  20. 20. Demo Custom Master Page using Starter Master page
  21. 21. Demo Response Design Master Page
  22. 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. 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
  24. 24. Questions?

×