This document provides an introduction and overview of the Design Manager feature in SharePoint 2013. It discusses the requirements to use Design Manager, how to convert HTML files to master pages and display templates, create composed looks and page layouts, and issues that can arise with design packages. The presentation covers the different components that make up designs in SharePoint and how to properly structure and deploy custom designs using Design Manager.

1. Introduction to
Design Manager
in SharePoint
2013
SharePoint Saturday New York City, #SPSNYC

2. http://www.youtube.com/user/DarceHess
@darcehess
www.linkedin.com/in/darcehess/
D’arce Hess
Developer, Athlete and
Musician
PixelMill
Blog: www.thebrandingbutterfly.com
Website: www.pixelmill.com
Email: dhess@pixelmill.com

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

7. Requirements
@darcehess

8.  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

9. @darcehess

10. @darcehess

11. Device
Channels
@darcehess

12. @darcehess

13. 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

14. Popular Device Inclusion Rules
@darcehess

15. @darcehess

16. Converting HTML to Masterpage
@darcehess

17. Upload your design files ( CSS, Images, JS, jQuery) into the
Masterpage Gallery
@darcehess

18. @darcehess

19. @darcehess

20. @darcehess

21. @darcehess

22. Time to add in the snippets
@darcehess

23. @darcehess

24. Copy and paste into
your HTML
Customize
@darcehess

25. Place snippet in your HTML
TIP: Place comments in your HTML where snippets will go
before converting to HTML Masterpage
@darcehess

26. Display
Templates
@darcehess

27. @darcehess

28. @darcehess

29. 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.

30. Two kinds of display templates:
1)Control Display Template
2)Item Template

31. 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

32. @darcehess

33. Custom Document Properties
@darcehess

34. Item
Template
@darcehess

35. Control
Template
@DarceHess @darcehess

36. Don’t touch
the
Javascript!
@darcehess

37. Themes
&
Composed Looks
@darcehess

38. What is a
Composed
Look
made of?
• Master Pages
• CSS
• Color palettes
• Font palettes
• Background image

39. @darcehess

42. 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

43. Where do you
find the
Composed Looks?
@darcehess

44. @darcehess

45. 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

46. Where is the
.SPcolor
file?
/_catalogs/theme/15/
@darcehess

47. @darcehess

48. Do not edit the files directly. Make a copy of the
file and rename to be your preference

50. Page
Layouts
@darcehess

51. Step 6: Create a Page Layout
@darcehess

52. Choose the following:
 Name of your page
layout
 Name of the
Masterpage it will
reference
 The Content Type
@darcehess

53. All of your content for your page layout will need to be placed inside
<--MS:<asp:ContentPlaceHolder ID=“PlaceHolderMain” runat=“server”
@darcehess

54. Make sure you check-in and publish your layout in SPD to
change the Approval Status to “Approved”

55. @darcehess

56. Design
Packages @darcehess

59. Sounds too good
to be true, right?
@darcehess

60. 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

61. So, what
do we do?
@darcehess

62. Go to Site Settings --> Site Content Types.
Find page in the list and adding the following content types back.
@darcehess

63. 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

64. 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

65. Thanks to Our Sponsors!