Your SlideShare is downloading. ×
Intro to design_manager
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to design_manager


Published on

SharePoint Saturday New York City 2013 presentation

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Introduction to Design Manager in SharePoint 2013 SharePoint Saturday New York City, #SPSNYC
  • 2. @darcehess D’arce Hess Developer, Athlete and Musician PixelMill Blog: Website: Email:
  • 3. Developing SharePoint solutions since 2004 SharePoint Branding and UI Specialists Developer of Cost effective SharePoint Templates Your SharePoint Branding Experts @darcehess
  • 4. Requirements Device Channels Design Package Problems Convert HTML to Master Page Composed Looks Display Templates Agenda Page Layouts Problems
  • 5. Problems @darcehess
  • 6. Requirements @darcehess
  • 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. @darcehess
  • 9. @darcehess
  • 10. Device Channels @darcehess
  • 11. @darcehess
  • 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. Popular Device Inclusion Rules @darcehess
  • 14. @darcehess
  • 15. Converting HTML to Masterpage @darcehess
  • 16. Upload your design files ( CSS, Images, JS, jQuery) into the Masterpage Gallery @darcehess
  • 17. @darcehess
  • 18. @darcehess
  • 19. @darcehess
  • 20. @darcehess
  • 21. Time to add in the snippets @darcehess
  • 22. @darcehess
  • 23. Copy and paste into your HTML Customize @darcehess
  • 24. Place snippet in your HTML TIP: Place comments in your HTML where snippets will go before converting to HTML Masterpage @darcehess
  • 25. Display Templates @darcehess
  • 26. @darcehess
  • 27. @darcehess
  • 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. Two kinds of display templates: 1)Control Display Template 2)Item Template
  • 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. @darcehess
  • 32. Custom Document Properties @darcehess
  • 33. Item Template @darcehess
  • 34. Control Template @DarceHess @darcehess
  • 35. Don’t touch the Javascript! @darcehess
  • 36. Themes & Composed Looks @darcehess
  • 37. What is a Composed Look made of? • Master Pages • CSS • Color palettes • Font palettes • Background image
  • 38. @darcehess
  • 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. Where do you find the Composed Looks? @darcehess
  • 41. @darcehess
  • 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. Where is the .SPcolor file? /_catalogs/theme/15/ @darcehess
  • 44. @darcehess
  • 45. Do not edit the files directly. Make a copy of the file and rename to be your preference
  • 46. Page Layouts @darcehess
  • 47. Step 6: Create a Page Layout @darcehess
  • 48. Choose the following:  Name of your page layout  Name of the Masterpage it will reference  The Content Type @darcehess
  • 49. All of your content for your page layout will need to be placed inside <--MS:<asp:ContentPlaceHolder ID=“PlaceHolderMain” runat=“server” @darcehess
  • 50. Make sure you check-in and publish your layout in SPD to change the Approval Status to “Approved”
  • 51. @darcehess
  • 52. Design Packages @darcehess
  • 53. Sounds too good to be true, right? @darcehess
  • 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. So, what do we do? @darcehess
  • 56. Go to Site Settings --> Site Content Types. Find page in the list and adding the following content types back. @darcehess
  • 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. 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. Thanks to Our Sponsors!