1 / 22

SharePoint Branding

SharePoint Branding. From Design to Provisioning. Bart Towery. Principal Consultant at Cardinal Solutions Group SharePoint Developer/Architect since 2007 JavaScript/ AngularJS development Twitter http://www.twitter.com/BartTowery Email btowery@cardinalsolutions.com Durham, NC.

vernon
Download Presentation

SharePoint Branding

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SharePoint Branding From Design to Provisioning

  2. Bart Towery • Principal Consultant at Cardinal Solutions Group • SharePoint Developer/Architect since 2007 • JavaScript/AngularJS development • Twitter • http://www.twitter.com/BartTowery • Email • btowery@cardinalsolutions.com • Durham, NC

  3. SharePoint Branding “How do we make it NOT look like SharePoint”

  4. What can be done with SharePoint?

  5. Branding Approaches • Low Complexity • Composed Looks • Themes • Medium Complexity • Design Manager • Custom CSS • High Complexity • Custom Master Pages • Multi-site Branding Deployment

  6. Composed Looks • Pick Predefined Look • Under site settings >Look and Feel • Change • Background • Colors • Layout/Master Page • Fonts

  7. Creating Custom Composed Looks • Configured in the Composed Looks Gallery • Custom “Theme” XML Files • Custom Color Schemes • Custom Fonts • SharePoint ColorPalette Tool • http://www.microsoft.com/en-us/download/details.aspx?id=38182

  8. Composed LooksandSharePoint Color Palette Tool DEMO

  9. Design Manager • “For Designers to Brand SharePoint” (??) • Listed on Gear Menu (Site Actions) • Publishing Sites and Office 365 Public Facing Sites Only

  10. Tools for Design Manager • Map a Drive to the Master Page Gallery • How to configure and to troubleshoot mapped network drives that connect to SharePoint Online sites in Office 365 - http://support.microsoft.com/kb/2616712 • Use Your Favorite Tool to Edit Code • Adobe Dreamweaver • Microsoft Expression Web • Visual Studio • Notepad++

  11. Master Page Creation with Design Manager • Create Master Page in HTML • Convert Existing HTML Designs into Working Master Pages • Converted HTML is Associated with Master Page • Each Update to HTML Causes Update to Master Page

  12. Snippet Gallery • Add SharePoint Functionality to Master Pages • HTML Code to Add

  13. Overview of Steps – Design Manager • Create Design in HTML with Images • Map network drive to Master Page Gallery • Add Design Files (HTML, Images, CSS, JavaScript) • Convert HTML Master Page using Design Manager • Add Snippets and Edit HTML as needed • Customize CSS as necessary to change the look • Publish ALL the files • Apply the Master Page

  14. Design Package • Good for a Few Sites • Deploys as a Sandbox Solution • All Files Must be Checked In • Additional Updates Deploy Over Previous Deployments Source Site (Development) Target Site (Production)

  15. Design Manager DEMO

  16. High Complexity Branding • Same as in SharePoint 2010 • Use Randy Drisgill’s Starter Master Pagehttp://startermasterpages.codeplex.com/ • Steps • Add Master Page and Design Files to Master Page Gallery • Add HTML to Master Page/Update CSS • Add Controls and Move Placeholders • Publish and Apply

  17. Custom Master Page Tricks • Overriding OOTB CSS • Often need to use Developer Tools • Finding HTML for Controls • Use OOTB Master Pages • Take Your Time • Make 1 Change at a Time • Easier to Debug when Something Breaks • Not a Quick and Easy Task

  18. Multi-Site Branding Deployment • SharePoint 2013 and SharePoint Online Solution Pack for Branding and Site Provisioning • http://www.microsoft.com/en-us/download/details.aspx?id=42030 • SharePoint 2013: Sample Pack for Solution Pack Samples • http://code.msdn.microsoft.com/SharePoint-2013-Sample-81b03d1e

  19. Questions?

  20. Thank you for joining us Today! Don’t Forget SharePint • Join us right after the event at Tyler’s Restaurant & Taproom! Socialize and unwind after our day of learning. • 324 Blackwell St, Durham, NC 27701

More Related