Intro to Branding With Design Manager

SharePoint 2013:
Intro to Branding and
Design Manager
April Dunnam
Lead SharePoint Consultant/Developer
April started her career as an IT Intern at Cherokee Casino. It
was there she found her niche and a passion for design &
development and began to focus her efforts on
development, c# and SharePoint.
She went on to complete dual degrees in MIS and Marketing
from Northeastern State University and got a job at a
telecommunications firm where she worked her way up to
SharePoint Developer. Several years later, April was invited to
join the ThriveFast team as senior consultant.
April is dedicated to continual self-improvement. She is constantly
reading up on the latest technologies & career publications and
routinely participating in professional conferences including Tech
Fest & SharePoint Saturdays.
Leadership: Vice President of the Tulsa SharePoint Interest
[email protected]
Tulsa SharePoint User Group
Meets Last Wednesday of Every Month
Time: 12:00 – 1:00
**Lunch is provided!
For More Info including meeting location, times visit:
 Theming
 Page Layouts
 Color Palette Tool
 Display Templates
 Design Manager
 Device Channels
 Accessing Design Manager
 Design Packages
 Import a Site Design
 Publish and Apply
What’s New With Theming
• No More PowerPoint Themes
• Theming Engine with GUI Interface
• HTML Based
• Supports HTML5 and CSS3 Standards
Theming Options
• Use can use an out-of-the-box theme OR
• Create your own with Composed Looks
• Site Settings  Composed Looks
Composed Looks
• New to SharePoint 2013
• Components:
• Image URL – Image for Theme Gallery
• Font Scheme URL - Defines font styles for your theme
• Theme URL – Building Block – Defines all colors
• Master Page URL – Use out-of-the-box or custom
So How Do I Create A Composed Look?
• Super Easy thanks to the Color Palette Tool
• Free! Brought to you by Microsoft
• Download Here:
• GUI Interface to Create SPColor File (Theme URL)
• Live Preview of Changes
• Save SPColor File and Upload to Theme Gallery
• Site Settings  Theme Gallery
Theming Demo
Design Manager
Design Manager
• New to SharePoint 2013
• Theming is great but can only get you so far
• Use Design Manager if you want to make SharePoint look
less like SharePoint
• Custom Master Page
• Page Layouts
• Custom CSS
• Javascript
Design Manager
• Create complete custom branding through the UI
• Bye Bye SharePoint Designer!
• Design View is no more
• Opens Doors to Designers
• Web Designer Creates HTML/CSS
• You import into SharePoint and Convert to SharePoint
Design Manager Caveats
• Publishing Infrastructure is Required!
• Must treat Branding Assets as Local Files
• Use WebDAV
• Open in Explorer or Map to Network Drive
• Must have Full Control or Designer Permissions
Site Collection Level Feature
Site Level Feature
Design Manager
Design Manager Step 1
• First Step is to Import your HTML Master Page File
• HTML Master Page should be the Skin Only
• Should Include:
• Suite Bar / Welcome Styling
• Top Navigation Styling
• Left Navigation Styling
• Footer Styling
• Page Layouts will be imported later
HTML Master Page Gotchya’s
• HTML Prototype MUST be XML Compliant!!
• Use online XML Validator to validate
HTML Master Page Gotchya’s
XML Compliancy error
HTML Master Page
• Some Assembly is Required!
• Add SharePoint Functionality with
Snippet Manager
• Top Navigation Control
• Quick Launch Control
• Footer Control
• Search Control
HTML Master Page Formatting Tips
• Plan your Prototype with Design Manager in Mind
• Have containers for each SharePoint Element
• Navigation
• Search
• Site Logo
• Site Title
• Put comments and have container names match
SharePoint element names
HTML Master Page Formatting Tips
• Make sure to include the following snippets in your Master
Page. Without these you will not be able to add Apps:
<!--CE: End PlaceHolderMain Snippet-->
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderLeftNavBar"
BlockElement="true" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar"
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea"
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea"
HTML Master Page Formatting Tips Cont’d
• And Last But Not Least……
• DO NOT Touch the .Master!!
• SharePoint creates .master file when HTML file is
• Make any changes to your HTML file NOT your .Master
• Changes made to HTML files are synced to the .Master
Troubleshooting Style Issues
FireBug/IE Developer Tools
Are Your Friend
HTML Master Page
Page Layouts
• Controls Layout of Main Content
• Many out-of-the-box Layouts
• Assembly Required: Uses Snippets and Snippet Manager
• Associated with a Master Page
• Don’t touch the .aspx file!
• Make any changes to your html file
• Make sure you have containers for web part zones in your
page layout
Page Layout
Display Templates
• The center of displaying SharePoint 2013 Search
• Replaces XSLT
• Control Templates
• Item Templates
• Don’t touch the javascript!
Display Templates
Device Channels
• Interfaces tailored and mapped to specific device(s)
• Based on User Agent
• 10 Device Channels per Site Collection
Screen shot of creating a device channel
and maping to a master page
Screen shot of creating a device channel
and maping to a master page
Design Packages
• Design Manager will Package your Custom Branding
• Re-Deployable to another Web App or even another Farm
• Creates a WSP
• To Import your Design Package:
• Site Settings  Design Manager  Import a Design
Design Package
Publish and Apply Design
• Design Manager will Import and Apply your Design Files
• Must Publish and Approve Design Files after added
• Use Design Manager or Master Page Gallery to do this
SharePoint Design Manager
Branding Made Easy…
SharePoint 2013
Intro to Branding & Design Manager
Thank You!
[email protected]

similar documents