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