O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

SharePoint 2013 Branding

1.545 visualizações

Publicada em

SharePoint 2013 branding.

Publicada em: Tecnologia
  • How long does it take for VigRX Plus to start working? ♣♣♣ https://bit.ly/30G1ZO1
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Comparing VigRX Plus to ED Prescription Drugs ♥♥♥ https://tinyurl.com/yy3nfggr
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ★★★ https://tinyurl.com/rockhardxxx
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ★★★ https://tinyurl.com/rockhardxxx
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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?

×