The Evolution of Branding in Office 365

Cathy DewSharePoint Saturday AtlantaMay 2015

Cathy Dew

Consultant at Planet Technologies

Graphic Designer, Consultant & SharePoint MVP

Author: SharePoint 2010: Six in One

catpaint1 on Twitter

www.sharepointcat.com

AgendaOffice 365 Options for BrandingChoosing OptionsCustomizing Master Pages Design Manager

Custom Composed LooksCreate PackagesDeploy and ApplyFuture of Branding

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

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

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

Global Tenant Theme As Global Tenant Admin

Theme Applied

Issues/Changes App Launcher changes periodically If Composed Look is applied Theme doesn’t

work in Sites Inconsistent UI

Inconsistent Theme

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

Composed Looks New “Themes” for SharePoint 2013

Master Page Color Palette CSS Font Palette Background Image

Predefined Options

Customize a Predefined Option

Create Your Own Custom Look

Create Composed Look Must have:

HTML file .Master file Preview File Spcolor file Spfont file

Can have: Background Image

Color Palette Tool Tool released for creating Color Palette:

http://social.technet.microsoft.com/wiki/contents/articles/16806.sharepoint-2013-color-palette-tool.aspx

Where to put files

Custom Composed Look

Options in Composed Looks Can create and use just a Color Palette or Font

Scheme

Create Custom Everything Use the Design Manager to import an HTML site

into SharePoint and apply it

Import HTML Site

Process to import HTML

Edit your Custom Master Page HTML file editing

Through your desired program

Map drive to your machine Or open Windows Explorer View

Master Page Gallery

Tips for Custom Master Page If working with HTML file… Don’t touch the

.master file Editing the .master will invalidate the HTML file

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.

HTML Code Snippets

• Customize the Look/Color/Behavior

• Copy the HTML Snippet

• Paste into HTML file in desired location

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

Inserted HTML

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

Create Custom CSS Reference a Custom CSS file with your Custom

Master Page <link href="style.css" rel="stylesheet" type="text/css"

/>

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;}

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

Package Designs

Solution Gallery Upload and Activate

Adding Branding via an App Patterns and Practices > GitHub

https://github.com/OfficeDev/PnP/wiki

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

Questions

40 SharePoint Saturday Atlanta40 |SharePoint Saturday Atlanta

41 SharePoint Saturday Atlanta41 |SharePoint Saturday Atlanta

42 SharePoint Saturday Atlanta42 |SharePoint Saturday Atlanta

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

Thank you for attending!

Cathy Dew, MVP@catpaint1

www.sharepointcat.com