Intro to design_manager


Published on

SharePoint Saturday New York City 2013 presentation

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Intro to design_manager

  1. 1. Introduction to Design Manager in SharePoint 2013 SharePoint Saturday New York City, #SPSNYC
  2. 2. @darcehess D’arce Hess Developer, Athlete and Musician PixelMill Blog: Website: Email:
  3. 3. Developing SharePoint solutions since 2004 SharePoint Branding and UI Specialists Developer of Cost effective SharePoint Templates Your SharePoint Branding Experts @darcehess
  4. 4. Requirements Device Channels Design Package Problems Convert HTML to Master Page Composed Looks Display Templates Agenda Page Layouts Problems
  5. 5. Problems @darcehess
  6. 6. Requirements @darcehess
  7. 7.  Only available in SharePoint 2013 Server and Enterprise.  Requires that Publishing be enabled.  Must have your design files ready to go i.e. HTML, CSS, JS, img files etc. . @darcehess
  8. 8. @darcehess
  9. 9. @darcehess
  10. 10. Device Channels @darcehess
  11. 11. @darcehess
  12. 12. Uses a separate Masterpage and CSS to target a specific device. i.e. Windows Phone, iPhone, iPad and Android devices This is NOT Responsive Design! @darcehess
  13. 13. Popular Device Inclusion Rules @darcehess
  14. 14. @darcehess
  15. 15. Converting HTML to Masterpage @darcehess
  16. 16. Upload your design files ( CSS, Images, JS, jQuery) into the Masterpage Gallery @darcehess
  17. 17. @darcehess
  18. 18. @darcehess
  19. 19. @darcehess
  20. 20. @darcehess
  21. 21. Time to add in the snippets @darcehess
  22. 22. @darcehess
  23. 23. Copy and paste into your HTML Customize @darcehess
  24. 24. Place snippet in your HTML TIP: Place comments in your HTML where snippets will go before converting to HTML Masterpage @darcehess
  25. 25. Display Templates @darcehess
  26. 26. @darcehess
  27. 27. @darcehess
  28. 28. Two kinds of Display Templates Control templates determine the overall structure of how the results are presented. Includes lists, lists with paging, and slide shows. Item templates determine how each result in the set is displayed. Includes images, text, video, and other items.
  29. 29. Two kinds of display templates: 1)Control Display Template 2)Item Template
  30. 30. NOTE: The syncing goes in one direction only. Changes to the HTML display template are synched to the associated .js file. Unlike master pages and page layouts, when working with display templates you can't choose to work only with the .js file by breaking the association between the files. You must enter all the HTML and JavaScript in the HTML file. @darcehess
  31. 31. @darcehess
  32. 32. Custom Document Properties @darcehess
  33. 33. Item Template @darcehess
  34. 34. Control Template @DarceHess @darcehess
  35. 35. Don’t touch the Javascript! @darcehess
  36. 36. Themes & Composed Looks @darcehess
  37. 37. What is a Composed Look made of? • Master Pages • CSS • Color palettes • Font palettes • Background image
  38. 38. @darcehess
  39. 39. Do not modify the .master file. You will only want to work out of the HTML file. Only need to create a .preview file if you want to select your masterpage from the drop-down in the preview. @darcehess
  40. 40. Where do you find the Composed Looks? @darcehess
  41. 41. @darcehess
  42. 42. What did I just see? • The configuration of each Composed Look • The Masterpage used • The Color Palette file • The Background Img Location • Font Scheme used @darcehess
  43. 43. Where is the .SPcolor file? /_catalogs/theme/15/ @darcehess
  44. 44. @darcehess
  45. 45. Do not edit the files directly. Make a copy of the file and rename to be your preference
  46. 46. Page Layouts @darcehess
  47. 47. Step 6: Create a Page Layout @darcehess
  48. 48. Choose the following:  Name of your page layout  Name of the Masterpage it will reference  The Content Type @darcehess
  49. 49. All of your content for your page layout will need to be placed inside <--MS:<asp:ContentPlaceHolder ID=“PlaceHolderMain” runat=“server” @darcehess
  50. 50. Make sure you check-in and publish your layout in SPD to change the Approval Status to “Approved”
  51. 51. @darcehess
  52. 52. Design Packages @darcehess
  53. 53. Sounds too good to be true, right? @darcehess
  54. 54. Gotchas • Brings in all un-ghosted files including Seattle & Olso Masterpages. • If you create a design package it doesn’t bring over several required Content Types. @darcehess
  55. 55. So, what do we do? @darcehess
  56. 56. Go to Site Settings --> Site Content Types. Find page in the list and adding the following content types back. @darcehess
  57. 57. Thank you for coming. Please be sure to thank all of our sponsors. Without them, this event would not be possible. Thank you! <PS> Be sure to fill out the speaker evaluations </PS> @darcehess
  58. 58. 64 | SharePoint Saturday New York City 2013 Housekeeping • Please remember to turn in your filled out bingo cards and event evaluations for prizes. • SharePint is sponsored by Slalom at Whiskey Trader (Between 55th and 56th on 6th Avenue). • Follow SharePoint Saturday New York City on Twitter @spsnyc and hashtag #spsnyc
  59. 59. Thanks to Our Sponsors!