Embed Size (px)
Citation preview
Intro to Branding and Design Manager
April DunnamLead SharePoint Consultant/Developer
SharePoint 2013
Introductions
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 asp.net 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 Group.
@AprilDunnam
SharePointSiren.com
Agenda
Theming
Color Palette Tool
Design Manager
Accessing Design
Manager
Import a Site Design
Page Layouts
Display Templates
Device Channels
Design Packages
Publish and Apply
Theming
• No More PowerPoint Themes
• HTML Based Theming Engine
• Supports HTML5 and CSS3 Standards
• Site Settings Change The Look
What’s New With Theming
• Use can use an out-of-the-box them OR
• Create your own with Composed Looks
• Provide Easy Way to Apply Light Branding
• Site Settings Composed Looks
Theming Options
• New to SharePoint 2013
• Components:
• Image URL – Background Image Link
• 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
master
Composed Looks
• Super Easy thanks to the Color Palette Tool
• Free! Brought to you by Microsoft
• Download Here:
http://www.microsoft.com/en-us/download/details
.aspx?id=
38182
• GUI Interface to Create SPColor File (Theme URL)
• Live Preview of Changes
• Save SPColor File and Upload to Theme Gallery
• Site Settings Theme Gallery
So How Do I Create A Composed Look?
Theming Demo
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 Elements
Design Manager
• 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
Design Manager Caveats
Site Collection Level Feature
Site Level Feature
Access Design Manager
Demo
• 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
Design Manager Step 1
• HTML Prototype MUST be XML Compliant!!
• Use online XML Validator to validate
• http://validator.w3.org/
HTML Master Page Gotchya’s
XML Compliancy error
HTML Master Page Gotchya’s
• Some Assembly is Required!
• Add SharePoint Functionality
with Snippet Manager
• Top Navigation Control
• Quick Launch Control
• Footer Control
• Search Control
HTML Master Page
• 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
• And Last But Not Least……
• DO NOT Touch the .Master!!
• SharePoint creates .master file when HTML file
is converted
• Make any changes to your HTML file NOT
your .Master file
• Changes made to HTML files are synced to
the .Master
HTML Master Page Formatting Tips Cont’d
FireBug/IE Developer
Tools Are Your Friend
Troubleshooting Style Issues
HTML Master PageDemo
• 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 Layouts
Page LayoutDemo
• The center of displaying SharePoint 2013 Search
• Replaces XSLT
• Control Templates
• Item Templates
• Don’t touch the javascript!
Display Templates
Display TemplatesDemo
• Interfaces tailored and mapped to specific device(s)
• Based on User Agent
• 10 Device Channels per Site Collection
Device Channels
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 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 Package
Design Packages
Design PackageDemo
• 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
Publish and Apply Design
Publish and ApplyDemo
Branding Made
Easy……..er
SharePoint Design Manager
Thank You!
Intro to Branding & Design Manager
SharePoint 2013
@AprilDunnam
SharePointSiren.com
