• Like
  • Save
Intro to Design Manager
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Intro to Design Manager


Introduction to Design Manager session given at #SPSBMORE

Introduction to Design Manager session given at #SPSBMORE

Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Introduction toDesign Managerin SharePoint2013SharePoint Saturday Baltimore, #SPSBMORE
  • 2. D’arce HessDeveloper, Athlete and MusicianPixelMillBlog: www.thebrandingbutterfly.comWebsite: www.pixelmill.comEmail: dhess@pixelmill.comhttp://www.youtube.com/user/DarceHess@darcehesswww.linkedin.com/in/darcehess/
  • 3. DevelopingSharePointsolutions since2004SharePointBranding and UISpecialistsDeveloper ofCost effectiveSharePointTemplatesYourSharePointBrandingExperts
  • 4. Requirements Device ChannelsDesign PackageProblemsConvert HTML toMaster Page Composed LooksDisplay TemplatesAgendaPage LayoutsProblems
  • 5. Problems
  • 6. Requirements
  • 7.  Only available in SharePoint 2013Server and Enterprise. Requires that Publishing be enabled. Must have your design files ready togo i.e. HTML, CSS, JS, img files etc. .
  • 8. DeviceChannels
  • 9. Uses a separateMasterpage andCSS to target aspecific device. i.e.WindowsPhone, iPhone, iPadand Android devicesThis is NOTResponsiveDesign!
  • 10. Popular Device Inclusion Rules
  • 11. Converting HTML to Masterpage
  • 12. Upload your design files ( CSS, Images, JS, jQuery) into theMasterpage Gallery
  • 13. Time to add in the snippets
  • 14. Copy and paste intoyour HTMLCustomize
  • 15. Place snippet in your HTMLTIP: Place comments in your HTML where snippets will gobefore converting to HTML Masterpage
  • 16. DisplayTemplates
  • 17. Two kinds of Display TemplatesControl templates determine theoverall structure of how the resultsare presented. Includes lists, lists withpaging, and slide shows.Item templates determine how eachresult in the set is displayed. Includesimages, text, video, and other items.
  • 18. Two kinds of display templates:1)Control Display Template2)Item Template
  • 19. NOTE: The syncing goes in one direction only.Changes to the HTML display template aresynched to the associated .js file. Unlike masterpages and page layouts, when working withdisplay templates you cant choose to work onlywith the .js file by breaking the associationbetween the files. You must enter all the HTMLand JavaScript in the HTML file.
  • 20. CustomDocumentProperties
  • 21. ItemTemplate
  • 22. ControlTemplate@DarceHess
  • 23. Don’t touchtheJavascript!
  • 24. PageLayouts
  • 25. Step 6: Create a Page Layout
  • 26. Choose the following: Name of your pagelayout Name of theMasterpage it willreference The Content Type
  • 27. All of your content for your page layout will need to be placed inside<--MS:<asp:ContentPlaceHolder ID=“PlaceHolderMain” runat=“server”
  • 28. Make sure you check-in and publish your layout in SPD tochange the Approval Status to “Approved”
  • 29. DesignPackages
  • 30. Sounds too goodto be true, right?
  • 31. Gotchas• Brings in all un-ghostedfiles including Seattle &Olso Masterpages.• If you create a designpackage it doesn’t bringover several requiredContent Types.
  • 32. So, whatdo we do?
  • 33. Go to Site Settings --> Site Content Types.Find page in the list and adding the following content types back.
  • 34. Thank you for coming. Please besure to thank all of our sponsors.Without them, this event wouldnot be possible.Thank you!<PS> Be sure to fill out the speaker evaluations </PS>