Intro to design_manager

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

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

Developing
SharePoint
solutions since
2004
SharePoint
Branding and UI
Specialists
Developer of
Cost effective
SharePoint
Templates
Your
SharePoint
Branding
Experts
@darcehess

Requirements Device Channels
Design Package
Problems
Convert HTML to
Master Page Composed Looks
Display Templates
Agenda
Page Layouts
Problems

 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

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

Popular Device Inclusion Rules
@darcehess

Converting HTML to Masterpage
@darcehess

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

Time to add in the snippets
@darcehess

Copy and paste into
your HTML
Customize
@darcehess

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

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.

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

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

Custom Document Properties
@darcehess

Control
Template
@DarceHess @darcehess

Don’t touch
the
Javascript!
@darcehess

Themes
&
Composed Looks
@darcehess

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

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

Where do you
find the
Composed Looks?
@darcehess

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

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

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

Step 6: Create a Page Layout
@darcehess

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

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

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

Sounds too good
to be true, right?
@darcehess

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

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

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

Intro to design_manager

More Related Content

Intro to design_manager