This presentation shows the evolution of branding for SharePoint Online in Office 365 as of May 2015.

1. The Evolution of
Branding in
Office 365
Cathy Dew
SharePoint Saturday Atlanta
May 2015

2. Cathy Dew
 Consultant at Planet Technologies
 Graphic Designer, Consultant & SharePoint MVP
 Author: SharePoint 2010: Six in One
 catpaint1 on Twitter
 www.sharepointcat.com

3. Agenda
Office 365 Options for Branding
Choosing Options
Customizing Master Pages
 Design Manager
Custom Composed Looks
Create Packages
Deploy and Apply
Future of Branding

4. Picking the Right Option
 Composed Looks
 Design Manager
 Custom Master/CSS/Page Layouts
 Device Channels

5. Working with Office 365
 Constant Changes
 New Features Added Frequently
 CSS and JavaScript updated often

6. What’s Allowed?
 Global Tenant Theme
 Composed Looks
 Custom Everything – with a tax

7. Global Tenant Theme
 As Global Tenant Admin

8. Theme Applied

9. Issues/Changes
 App Launcher changes periodically
 If Composed Look is applied Theme doesn’t
work in Sites
 Inconsistent UI

10. Inconsistent Theme

11. Who, What, Where?
 Publishing Infrastructure: Custom Everything
 Collaboration or Anything Else: Theme
 Apps: Global Theme

12. Composed Looks
 New “Themes” for SharePoint 2013
 Master Page
 Color Palette
 CSS
 Font Palette
 Background Image

13. Predefined Options

14. Customize a Predefined Option

15. Create Your Own Custom Look

16. Create Composed Look
 Must have:
 HTML file
 .Master file
 Preview File
 Spcolor file
 Spfont file
 Can have:
 Background Image

17. Color Palette Tool
 Tool released for creating Color Palette:
 http://social.technet.microsoft.com/wiki/contents/articles/
16806.sharepoint-2013-color-palette-tool.aspx

18. Where to put files

19. Custom Composed Look

20. Options in Composed Looks
 Can create and use just a Color Palette or Font
Scheme

21. Create Custom Everything
 Use the Design Manager to import an HTML site
into SharePoint and apply it

22. Import HTML Site

23. Process to import HTML

24. Edit your Custom Master Page
 HTML file editing
 Through your desired
program
 Map drive to your
machine
 Or open Windows Explorer View

25. Master Page Gallery

26. Tips for Custom Master Page
 If working with HTML file… Don’t touch the
.master file
 Editing the .master will invalidate the HTML file

27. Make use of Preview Pages
 Create a couple custom Preview Pages of
different site types.
 Allows you to view your branding with content
from different sites and pages.

28. HTML Code Snippets
• Customize the
Look/Color/B
ehavior
• Copy the
HTML Snippet
• Paste into
HTML file in
desired
location

29. Look for Additions to HTML
 On import the Design Manager will insert some
<div>s to contain content and
the head tags for SharePoint
 Ribbon
 MainContentPlaceholder

30. Inserted HTML

31. Publish & Apply Custom Master
 In order to apply the custom designs you have
created with publishing and the design
manager
 Publish all files
 CSS
 Page Layouts
 Master Pages (HTML only)
 Apply the Master Page from the List
 Publishing only

32. Create Custom CSS
 Reference a Custom CSS file with your Custom
Master Page
 <link href="style.css" rel="stylesheet" type="text/css"
/>

33. Take it Further with CSS
 With the Color Palette you can use the palette
colors in your Custom CSS files
{
/* [ReplaceFont(themeFont:”title”)] */ font-family: “Segoe
UI Light”, “Segoe UI”, “Segoe”,
Tahoma,Helvetica,Arial,sans-serif;
/* [ReplaceColor(themeColor: “SiteTitle”)] */
color:#005050;
}

34. How to apply in O365
 Solutions are still an option (Sandboxed)
 Apps can be created to house your branding
 Visual Studio
 Design Manager
 Package your Design
 Add to the Solution Gallery
 Apply to Multiple Site Collections

35. Package Designs

36. Solution Gallery
 Upload and Activate

37. Adding Branding via an App
 Patterns and Practices > GitHub
 https://github.com/OfficeDev/PnP/wiki

38. Future of Branding
 Microsoft is moving away from heavy UX
customizations
 CSS and JavaScript are the areas to invest in
 Designers are becoming Developers – Apps are
the future
 Office 365 – Constant Changes
 Plan for updates with new feature releases
 Plan for not getting new features if you do choose
to customize the master page

39. Questions

40. 40 SharePoint Saturday Atlanta40 |SharePoint Saturday Atlanta

41. 41 SharePoint Saturday Atlanta41 |SharePoint Saturday Atlanta

42. 42 SharePoint Saturday Atlanta42 |SharePoint Saturday Atlanta

43. 43 SharePoint Saturday Atlanta43 |SharePoint Saturday Atlanta
 5 Seasons Brewery (North)


directly in front of brewery
 See the SPSATL Website
for more info and directions
Join us for SharePint sponsored by

44. Thank you for
attending!
Cathy Dew, MVP
@catpaint1
www.sharepointcat.com