Things you can do to brand Office 365 now
Download as PPTX, PDF0 likes1,192 views
This document provides guidance on custom branding Office 365 using various tools like themes, composed looks, alternate CSS, and Azure Active Directory customizations. It discusses when each approach is best suited and how to implement options like applying site logos, customizing the Office 365 theme, and setting alternate CSS. Best practices are outlined around using these tools to adhere to corporate identity while avoiding high maintenance customizations.
![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](https://image.slidesharecdn.com/thingsyoucando-170427035619/85/Things-you-can-do-to-brand-Office-365-now-34-320.jpg)
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 [email protected]
- 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
- 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
- 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
Editor's Notes
- #11: You can see from this chart that the more custom you go, the more capabilities that you will have and will ultimately cost you more. Office 365 is a moving target and if you make some major changes those costs will have a maintenance aspect.
- #15: Many people ask to change the ribbon color inside their sharepoint site but ultimately it’s best to make this change in the tenant so that it flows down into the other products.
- #16: Mention preventing personal branding
- #19: Add what products there are
- #22: Must be at least an
- #25: Applying Site Logo to multiple site collections requires scripting Get-SPWebApplication "http://sharepointSite" | Get-SPSite -Limit "All" | Get-SPWeb -Limit "All" | foreach { $_.SiteLogoUrl="pathToLogoImage"; $_.update(); Write-host "Changing Logo for:"$_.Url; }
- #32: When simple colors won’t How to apply CSS Add screen shot
- #41: Branding Office 365 - using front end tooling No more WSPs, No more deployments! Looking for a fast and reliable way to build your branding on Office 365? You can use front end development tooling to create an automated build process on your desktop to deploy your assets instantaneous or on demand to Office 365. In this session we will create a bunch of Gulp tasks to build and process our branding assets [Page Layouts, Master Pages, SASS/CSS, JavaScript and Images]. For those familiar with the SharePoint framework build process there will be some similarities. It's recommended that you have a good grasp JavaScript to attend this session.