65
Introduction to Design Manager in SharePoint 2013 SharePoint Saturday New York City, #SPSNYC
| Date post: | 05-Dec-2014 |
| Category: |
Technology |
| Upload: | darce-hess |
| View: | 907 times |
| Download: | 0 times |
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 HessDeveloper, Athlete and MusicianPixelMill
Blog: www.thebrandingbutterfly.com
Website: www.pixelmill.com
Email: [email protected]
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
Are we missing something?
Design View
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
Upload your design files ( CSS, Images, JS, jQuery) into the Masterpage Gallery
@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 Template2)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
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
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
Do not edit the files directly. Make a copy of the file and rename to be your preference
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”
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
Thanks to Our Sponsors!
