Things you can do to brand Office 365 now

1. ThingsYouCan Do
to BrandOffice 365 Now
Presented By:Thomas Daly
1

2. Tom Daly
2
Senior Solution Developer
@_tomdaly_
linkedin.com/in/thomas-m-daly
tdaly@bandrsolutions.com

3. MIKE ORYSZAK
3
Managing Director
@next_connect
linkedin.com/in/michaeloryszak
moryszak@bandrsolutions.com

4. Agenda
Overview
Site Logo
Office 365 Theme
Composed Looks / SharePoint Theme
Azure AD Login Page
Alternate Style Sheets
Wrap Up

5. Overview 6

6. Why would you implement custom
branding?
Adhere to
corporate
identity
Differentiate
departmental
or micro sites
Create unique
experience on
a particular
site
Meet a
functional
business need
Move away
from the
‘stock’ look
Taking
ownership
over the
intranet

7. Best Practices
• As a rule of a thumb, we would like to provide the following high-level guidelines for
custom branding SharePoint sites
• Use Office 365 themes, SharePoint site theming experience components, and composed
looks to apply branding to SharePoint sites whenever possible.
• You can adjust some CSS settings using the alternate CSS option if the themes do not
support your requirements.
• You can use JavaScript embedding to modify or hide elements of a SharePoint site.
• You can customize SharePoint sites using custom master pages, but keep in mind
this will cause you additional long-term costs and challenges with future updates.
• In most cases, you can achieve all common branding scenarios with themes, composed
looks, and alternate CSS.
• If you chose to use custom master pages, be prepared to apply changes to the custom
master pages when major functional updates are applied to Office 365.
8

8. Best Practices (continued)
• Use remote provisioning to deploy and register themes, composed looks, and all
branding artifacts with SharePoint sites.
• Although still supported (not recommended) to use declarative code or sandbox
code to deploy and register themes, master pages, and other branding artifacts
with SharePoint sites.
9

9. Cost,Maintenance&
Capability
Comparison
• Your branding capabilities are
directly related to cost &
maintainability
• The more customizations you
require the higher cost to
implement and maintenance

10. Let’s get started 11

11. BrandingFlow
12Admin Center
O365 LandingO365 Login SharePoint
Delve
Outlook
OneDrive
Video
Newsfeed
SharePoint Sites

12. Themes

13. Office 365Themes
• As the admin of your Office 365 for business subscription, you can change the
default theme that appears in the top navigation bar for everyone in the
organization.
• You can add your company logo and colors to match your brand as shown here
(where 1 is the default theme and 2 is the customized theme).

14. Office365AdminCenter
• Settings > Organization
profile > Manage custom
themes for your
organization
• Here you can configure
the options for the Office
365 tenant branding
• As tenant admin you can
prevent users from
enabling their own
personal branding

15. Office365Themes
• Office 365 themes contain the
components listed below.
• custom logo
• url for custom logo
• background image
• base color
• accent color
• nav bar background color
• text and icons color
• app menu icon

16. Personal
Branding
• If you don’t restrict themes,
users can choose their own
theme.
• This will carry throughout
OneDrive, Delve, Outlook,
SharePoint,Video

17. Personal BrandingReach
O365 Landing Outlook O365 OneDrive SharePoint
Delve Video SharePoint Sites O365 Admin Portal

18. ComposedLooks&Themes

19. Office365Themes,SharePointThemes&
ComposedLooks
• It is important to understand that Office 365 themes and SharePoint themes are different.
• Office 365 themes are used to brand the top navigation bar in an Office 365 tenancy.They are
are only supported in Office 365 SharePoint sites, not on-premises.
• SharePoint themes apply colors to your SharePoint sites. (main part of composed look)
look)
• Composed Looks apply colors, fonts, master pages, and background images to your
SharePoint sites.

20. ComposedLook
• Include one or more of the
following components.
• color palette (.spcolor file) - Also
referred to as a SharePoint theme
• font scheme (.spfont file)
• background image
• master page (Site layout)

21. SharePointColor PaletteTool
• Allows you to create the color scheme
for a SharePoint theme.
• WYSIWYG experience of theme file
creation
• Generates the .spcolor file
• Custom color schemes provide a fair
amount of flexibility to brand a
SharePoint site.
• You can apply color schemes via
composed looks at a per site level.
When is creating custom color scheme
for SharePoint sites a good fit?
This option works well when your
branding needs include a new color
scheme but do not require layout changes
or showing and hiding various Office 365
SharePoint components.

22. Composed Looks
• Site Settings >Web Designer Galleries > Composed
Looks
• Composed looks are defined inside this list
• Here you can create new Composed Looks
23

23. Site Logo
• Apply Site Logo (publishing)
• Restricted Size
• 180px wide
• 64px tall
• Recommended deployment approach
• You can use the web browser to apply per site or the remote provisioning pattern to
upload a CSS file to a SharePoint site and apply it to a SharePoint site.

24. 25
Login
Page

25. Azure Login Page
• If you have a paid
subscription to Office
365 you have a free
subscription to Azure
Active Directory.
1. The large illustration
and/or its background
color
2. The banner logo
3. You can also add text to
this area

26. AzureAD

27. Customizations
• Banner Logo – displayed on the Azure
AD sign-in page, when users sign in to
cloud applications that use this
directory. It’s also used in the Access
Panel service.
• Square Logo - (previously referred to
as “Tile Logo”) is used to represent
accounts in your organization, on
AD web UI and in Windows 10.
• Sign In Page Text - This text appears at
the bottom of the Azure AD sign in
page, on the web, in apps and in the
Azure AD Join experience on Windows
10. Use this space to convey
instructions, terms of use and help tips
to your users.

28. Customizations
• Sign-In Page Illustration – This
large image is displayed on the
side of the Azure AD sign in
By design, this image is scaled
cropped to fill in the available
space in the browser window.
• Sign-In Page BG Color - On high
latency connections, the sign-in
page illustration may not load, in
which case the login page will fill
the space with a solid color.
If you have applied changes to your
sign-in page, it can take up to an hour
for the changes to appear.

29. AlternateCSS
30

30. AlternateCSS
• What is Alternate CSS?
• You can create custom cascading style sheet (CSS) file and set it as the alternate CSS
for a SharePoint site.
• Alternate CSS may be used to override the out-of-the-box CSS settings that come
SharePoint.
• You can use the alternate CSS approach to control to color, fonts and even layout
settings.
• Alternate CSS requires a medium amount of investment to implement and maintain
the short and long term.
• Alternate CSS provides a good amount of flexibility to brand a SharePoint site.
• You can use alternate CSS at a per-site level.

31. AlternateCSS (continued)
• When is using alternate CSS to brand a SharePoint site a good fit?
• This option works well when your branding needs include a new color scheme, fonts,
require minimal layout changes but do not include adding or manipulating Office 365
SharePoint components.
• Recommended deployment approach
• You can use the web browser to apply per site or the remote provisioning pattern to
upload a CSS file to a SharePoint site and apply it to a SharePoint site.
32

32. ApplyingAlternateCSS
• Site Settings > Look and Feel > Master page
• Here you can apply or clear an Alternate CSS file
• You can also have it apply to all subsites underneath
33

33. NextSteps
34

34. NextSteps
[Out of scope for this talk]
• JavaScript Injections
• Can be used to add, remove, or manipulate DOM elements
• DOM elements can be moved, changed or styled directly with JavaScript
• Custom Master Pages
• Almost full control of the main markup of your site
• Attach as many additional scripts or styles that you need
• As O365 rolls out new features or changes to their master page you would need to
compare and maintenance if you require those new features

35. ApplyingCustom Branding
• Microsoft recommends remote provisioning using SharePoint / Office Dev Patterns
and Practices (PnP)
• No Code Sandbox solutions (NCSS) can still be created and deployed to Office 365
however they are deprecated.
• Add-ins can also be used to deploy and apply Branding assets. See examples in
SharePoint PnP

36. Questions orComments?

37. References & Resources
• Add company branding to your sign-in and Access Panel pages
• Add your company branding to Office 365 Sign In page
• Customize the Office 365 theme for your organization
• Branding SharePoint sites in the SharePoint add-in model
• SharePoint Color PaletteTool
• Using alternate CSS for providing custom branding in SharePoint site

38. NextSteps
39
Need help designing and implementing
your custom brand?
Setup a consultation to see how B&R Business Solutions can help
address your specific needs!

39. Upcoming Events
40
SharePoint Fest DC
In-Person
April 17-20th
8am-5pm
https://bandr.at/2p1x5A6
NJ Azure Bootcamp
In-Person
April 22nd
1pm EST
http://bandr.at/2o6tFHP
SPS Houston
In-Person
April 29th
8am-6pm EST

40. 41