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.

Intro to Design Manager

Introduction to Design Manager session given at #SPSBMORE

  • Be the first to comment

Intro to Design Manager

  1. 1. Introduction toDesign Managerin SharePoint2013SharePoint Saturday Baltimore, #SPSBMORE
  2. 2. D’arce HessDeveloper, Athlete and MusicianPixelMillBlog: www.thebrandingbutterfly.comWebsite: www.pixelmill.comEmail: dhess@pixelmill.com
  3. 3. DevelopingSharePointsolutions since2004SharePointBranding and UISpecialistsDeveloper ofCost effectiveSharePointTemplatesYourSharePointBrandingExperts
  4. 4. Requirements Device ChannelsDesign PackageProblemsConvert HTML toMaster Page Composed LooksDisplay TemplatesAgendaPage LayoutsProblems
  5. 5. Problems
  6. 6. Requirements
  7. 7.  Only available in SharePoint 2013Server and Enterprise. Requires that Publishing be enabled. Must have your design files ready togo i.e. HTML, CSS, JS, img files etc. .
  8. 8. DeviceChannels
  9. 9. Uses a separateMasterpage andCSS to target aspecific device. i.e.WindowsPhone, iPhone, iPadand Android devicesThis is NOTResponsiveDesign!
  10. 10. Popular Device Inclusion Rules
  11. 11. Converting HTML to Masterpage
  12. 12. Upload your design files ( CSS, Images, JS, jQuery) into theMasterpage Gallery
  13. 13. Time to add in the snippets
  14. 14. Copy and paste intoyour HTMLCustomize
  15. 15. Place snippet in your HTMLTIP: Place comments in your HTML where snippets will gobefore converting to HTML Masterpage
  16. 16. DisplayTemplates
  17. 17. Two kinds of Display TemplatesControl templates determine theoverall structure of how the resultsare presented. Includes lists, lists withpaging, and slide shows.Item templates determine how eachresult in the set is displayed. Includesimages, text, video, and other items.
  18. 18. Two kinds of display templates:1)Control Display Template2)Item Template
  19. 19. NOTE: The syncing goes in one direction only.Changes to the HTML display template aresynched to the associated .js file. Unlike masterpages and page layouts, when working withdisplay templates you cant choose to work onlywith the .js file by breaking the associationbetween the files. You must enter all the HTMLand JavaScript in the HTML file.
  20. 20. CustomDocumentProperties
  21. 21. ItemTemplate
  22. 22. ControlTemplate@DarceHess
  23. 23. Don’t touchtheJavascript!
  24. 24. PageLayouts
  25. 25. Step 6: Create a Page Layout
  26. 26. Choose the following: Name of your pagelayout Name of theMasterpage it willreference The Content Type
  27. 27. All of your content for your page layout will need to be placed inside<--MS:<asp:ContentPlaceHolder ID=“PlaceHolderMain” runat=“server”
  28. 28. Make sure you check-in and publish your layout in SPD tochange the Approval Status to “Approved”
  29. 29. DesignPackages
  30. 30. Sounds too goodto be true, right?
  31. 31. Gotchas• Brings in all un-ghostedfiles including Seattle &Olso Masterpages.• If you create a designpackage it doesn’t bringover several requiredContent Types.
  32. 32. So, whatdo we do?
  33. 33. Go to Site Settings --> Site Content Types.Find page in the list and adding the following content types back.
  34. 34. Thank you for coming. Please besure to thank all of our sponsors.Without them, this event wouldnot be possible.Thank you!<PS> Be sure to fill out the speaker evaluations </PS>