Download presentation
Presentation is loading. Please wait.
Published byDustin Alvord Modified over 10 years ago
1
April Dunnam Lead SharePoint Consultant/Developer SharePoint 2013: Intro to Branding and Design Manager
2
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. @AprilDunnamSharePointSiren.com april.dunnam@thrivefast.com
3
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: http://www.tulsaspug.com @Tulspughttps://www.facebook.com/groups/TSPIG/
4
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
5
Theming
6
No More PowerPoint Themes Theming Engine with GUI Interface HTML Based Supports HTML5 and CSS3 Standards What’s New With Theming
7
Use can use an out-of-the-box theme OR Create your own with Composed Looks Site Settings Composed Looks Theming Options
8
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 master Composed Looks
9
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=38182http://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?
10
Theming Demo
11
Design Manager
12
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
13
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
14
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
15
Site Collection Level Feature Site Level Feature
16
Design Manager Demo
17
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
18
HTML Prototype MUST be XML Compliant!! Use online XML Validator to validate http://validator.w3.org/ HTML Master Page Gotchya’s
19
XML Compliancy error HTML Master Page Gotchya’s
20
Some Assembly is Required! Add SharePoint Functionality with Snippet Manager Top Navigation Control Quick Launch Control Footer Control Search Control HTML Master Page
22
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
24
Make sure to include the following snippets in your Master Page. Without these you will not be able to add Apps: --> --> HTML Master Page Formatting Tips
25
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
26
FireBug/IE Developer Tools Are Your Friend Troubleshooting Style Issues
27
HTML Master Page Demo
28
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
29
Page Layout Demo
30
The center of displaying SharePoint 2013 Search Replaces XSLT Control Templates Item Templates Don’t touch the javascript! Display Templates
33
Demo
34
Interfaces tailored and mapped to specific device(s) Based on User Agent 10 Device Channels per Site Collection Device Channels
35
Screen shot of creating a device channel and maping to a master page
37
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
38
Design Package Demo
39
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
40
Branding Made Easy… …..er SharePoint Design Manager
41
Thank You! Intro to Branding & Design Manager SharePoint 2013 @AprilDunnamSharePointSiren.com april.dunnam@thrivefast.com
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.