Intro to design_manager
Upcoming SlideShare
Loading in...5
×
 

Intro to design_manager

on

  • 805 views

SharePoint Saturday New York City 2013 presentation

SharePoint Saturday New York City 2013 presentation

Statistics

Views

Total Views
805
Views on SlideShare
616
Embed Views
189

Actions

Likes
2
Downloads
17
Comments
0

4 Embeds 189

http://lanyrd.com 183
https://www.linkedin.com 3
https://twitter.com 2
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro to design_manager Intro to design_manager Presentation Transcript

  • 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
  • Problems @darcehess
  • Requirements @darcehess
  •  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
  • @darcehess
  • @darcehess
  • Device Channels @darcehess
  • @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
  • @darcehess
  • Converting HTML to Masterpage @darcehess
  • Upload your design files ( CSS, Images, JS, jQuery) into the Masterpage Gallery @darcehess
  • @darcehess
  • @darcehess
  • @darcehess
  • @darcehess
  • Time to add in the snippets @darcehess
  • @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
  • Display Templates @darcehess
  • @darcehess
  • @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
  • @darcehess
  • Custom Document Properties @darcehess
  • Item Template @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
  • @darcehess
  • 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
  • @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
  • @darcehess
  • Do not edit the files directly. Make a copy of the file and rename to be your preference
  • Page Layouts @darcehess
  • 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”
  • @darcehess
  • Design Packages @darcehess
  • 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
  • So, what do we do? @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!