Branding Office 365 Modern Sites Personal Branding Tenant Branding Composed Looks Master Page Alternate CSS JavaScript Injection

2. • SharePoint Team Lead @ SoHo Dragon [NYC]
• 15+ years in web dev, 10+ in SharePoint
• Office Server and Services MVP 2017
• Active in the Office 365, Azure & SharePoint community
• New Jersey Office 365 User Group @ Microsoft - Iselin, NJ
[Every 4th Tues]
• SharePoint Saturday New York @ Microsoft – Times Square
[July 2017]
• Office 365 Global Dev Bootcamp @ Microsoft [NJ & NYC]
• NJ Azure Bootcamp @ Microsoft – Iselin, NJ [April 22, 2017]
• SharePoint Saturday NJ - [2013-2014]
• My SharePoint Blog
• Git Hub [corp directory / o365 sticky footer / bootstrap nav]

4. PAGE

6. PAGE
Your company has a specific set of colors and fonts that it used
to identify themselves as defined in a Corporate Branding
guideline or policy that you must adhere to.
Creating visually distinct areas of your intranet portal. Using
different headers, footers, fonts or colors to create appearance
of separation.
Taking ownership of the experience by abstracting SharePoint
/ Office 365 and creating what you believe is better.
Sometimes known as making it look less like SharePoint.
Adjustments to the look and feel to meet the needs of the
users. Ex: world clocks, stock tickers, locations, headers,
footers, optimized mobile experience.

7. PAGE
Customization Maintenance Capability
• Your branding capabilities are directly related to cost &
maintainability
• The more customizations you require the higher costs to
implement and maintenance

9. PAGE

12. PAGE

13. PAGE

14. PAGE

15. PAGE

28. PAGE
• Define custom themes and make them available
to site owners. Themes are defined in a JSON
schema that stores color settings and related
metadata for each theme.
• An online Theme Generator tool that you can use
to define new custom themes.
• A simplified set of default themes, with six light
themes and two dark themes presently available.
• An updated color palette, with 12 light colors and
6 dark colors, as well as 16 supplementary
themes.
• Control over which themes are. For example, you
can define custom themes based on your
organization's branding or identity, and make
those the only available themes within your sites.
New site theming options for
SharePoint sites in Office 365

29. PAGE
You can still use the classic themes
Because the modern SharePoint UI differs from
the classic UI, however, some limitations apply
when you use classic themes with modern
pages.
For the simplest experience, we recommend
that you use modern themes with modern
pages.
Learn More
• SharePoint site theming
• SharePoint site theming: PowerShell cmdlets
• SharePoint site theming: CSOM
• SharePoint site theming: REST API
See and learn more from two related
Ignite sessions.
1) “Using custom themes and
designs to standardize the
creation of clean, functional
SharePoint”
2) “What’s new and what's coming
for branding and organizing your
SharePoint sites”

30. PAGE
• As of right now … it’s just square

32. PAGE

33. PAGE

34. PAGE

35. PAGE

39. PAGE
Full page background image, designed for scaling
[New Portal] stays centered and clip the left/right edges
[Old Portal] stays left and clips the right edge
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.
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

40. PAGE
On high latency connections, the sign-in page illustration
may not load, in which case the login page will fill in the
space with a solid color.
(previously referred to as “Tile Logo”) is used to
represent user accounts in your organization, on Azure
AD web UI and in Windows 10.
Allows the user to select if they would like to remain
signed in to prevent being asked their password
multiple times.

41. PAGE

42. PAGE

43. PAGE

44. PAGE

50. PAGE
SP Editor – Chrome Plugin
A Google Chrome Extension for
creating and updating files (js, css) in
SharePoint Online from Chrome
Developer Tools
Creating and editing js / css files in
SharePoint Online from any device
which has Chrome desktop browser.
Also possibile to add local and
external js/css resources references
with user custom actions.

52. PAGE
Provides access to well-known
locations on SharePoint pages that you
can modify based on your business and
functional requirements.
Build your first SharePoint Framework
Extension

55. @_tomdaly_
tom.m.daly@gmail.com
SlideShare
LinkedIn Profile
GitHub - tom-daly
My O365 / SharePoint Blog