Skip to content

Commit 1f434c4

Browse files
authored
Edit of Solution guidance > Modernizing topics (SharePoint#1688)
* Edit pass * Edit pass * Edit pass * Edit pass * Edit pass * Edit pass * Updated Modernization section * Fixed link * Combined steps * Edit pass * Edit pass
1 parent ab2e4a0 commit 1f434c4

8 files changed

+356
-264
lines changed

docs/toc.yml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1290,14 +1290,14 @@
12901290
- name: Modernize the user interface
12911291
href: transform/modernize-userinterface.md
12921292
items:
1293-
- name: Maximize your use of the modern list and library user interface
1293+
- name: Maximize use of modern lists and libraries
12941294
href: transform/modernize-userinterface-lists-and-libraries.md
1295-
- name: Modernize the customizations
1295+
- name: Modernize customizations
12961296
href: transform/modernize-customizations.md
1297+
- name: Modernize site branding
1298+
href: transform/modernize-branding.md
12971299
- name: Connect to an Office 365 Group
12981300
href: transform/modernize-connect-to-office365-group.md
1299-
- name: Modernize the site branding
1300-
href: transform/modernize-branding.md
13011301
- name: Branding and site provisioning solutions
13021302
href: solution-guidance/Branding-and-site-provisioning-solutions-for-SharePoint.md
13031303
items:

docs/transform/modernize-branding.md

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
---
2-
title: Modernize the site branding
3-
description: Guidance on moving to modern customization experiences within SharePoint
4-
ms.date: 03/23/2018
2+
title: Modernize site branding
3+
description: Guidance on moving to modern customization experiences within SharePoint, including how to handle the custom master pages and alternate CSS configurations.
4+
ms.date: 04/17/2018
55
ms.prod: sharepoint
66
---
77

8-
# Modernize the site branding
8+
# Modernize site branding
99

10-
The SharePoint modern user interface does handle branding differently than classic SharePoint, more in particular it simply ignores custom master page or alternate CSS configurations. You can opt to leave these configurations in place in your modernized site so it still applies to a page being shown in a classic user interface, but it's cleaner to switch back the OOB master pages and remove the alternate CSS configuration. Next to these master pages and alternate CSS settings you could have used a classic custom theme. These classic custom themes do work on both classic as modern pages, but the more future proof model is the new tenant controlled SharePoint theme which obviously also applies to both classic as modern pages.
10+
The SharePoint modern user interface handles branding differently from classic SharePoint; in particular, it simply ignores custom master pages or alternate CSS configurations (which are incompatible in the modern user interface). You can opt to leave these configurations in place in your modernized site so that it still applies to a page being shown in a classic user interface, but it's cleaner to switch back the OOB master pages and remove the alternate CSS configuration.
1111

12-
## Detecting sites using master pages or alternate CSS, which is incompatible the modern user interface
12+
Next to these master pages and alternate CSS settings, you could have used a classic custom theme. These classic custom themes work on both classic and modern pages, but the more future-proof model is the new tenant-controlled SharePoint theme, which obviously applies to both classic and modern pages.
1313

14-
The recommended approach to find out which sites use a custom master page or use the alternate CSS option is running the [SharePoint "Modern" user interface experience scanner](https://github.com/SharePoint/PnP-Tools/tree/master/Solutions/SharePoint.UIExperience.Scanner). This tool will perform a deep analysis of all the sites in your tenant and create reports giving you details on sites still have incompatible master pages or alternate CSS settings. Based on the scanner output you can remediate these sites.
14+
## Detect sites that use master pages or alternate CSS
1515

16-
Below is a PnP PowerShell script that shows how to revert back to the default configuration:
16+
The recommended approach to find out which sites use a custom master page or use the alternate CSS option is to run the [SharePoint "Modern" user interface experience scanner](https://github.com/SharePoint/PnP-Tools/tree/master/Solutions/SharePoint.UIExperience.Scanner). This tool performs a deep analysis of all the sites in your tenant and creates reports that give you details about sites that still have incompatible master pages or alternate CSS settings. Based on the scanner output, you can remediate these sites.
1717

18-
```PowerShell
18+
### Revert back to the default configuration
19+
20+
Following is a PnP PowerShell script that shows how to revert back to the default configuration:
21+
22+
```powershell
1923
$minimumVersion = New-Object System.Version("2.24.1803.0")
2024
if (-not (Get-InstalledModule -Name SharePointPnPPowerShellOnline -MinimumVersion $minimumVersion -ErrorAction Ignore))
2125
{
@@ -34,13 +38,15 @@ $web.AlternateCssUrl = ""
3438
$web.Context.ExecuteQuery()
3539
```
3640

37-
## Using a tenant controlled SharePoint theme
41+
## Use a tenant-controlled SharePoint theme
3842

39-
SharePoint offers a series of default themes out-of-the-box which you can use, but if you want to push your company branding it's recommended that you create your company theme and hide the out-of-the-box themes. Once that configuration is done your users can only select from the company SharePoint themes you've configured and you can programmatically set such a company SharePoint theme as part of the modernization effort.
43+
SharePoint offers a series of default themes out-of-the-box that you can use, but if you want to push your company branding, we recommend that you create your company theme and hide the out-of-the-box themes. After that configuration is complete, your users can only select from the company SharePoint themes that you've configured, and you can programmatically set such themes as part of the modernization effort.
4044

41-
Sample PnP PowerShell script showing how to add a company SharePoint theme
45+
### Add a company SharePoint theme
4246

43-
```PowerShell
47+
Following is a sample PnP PowerShell script showing how to add a company SharePoint theme:
48+
49+
```powershell
4450
$minimumVersion = New-Object System.Version("2.24.1803.0")
4551
if (-not (Get-InstalledModule -Name SharePointPnPPowerShellOnline -MinimumVersion $minimumVersion -ErrorAction Ignore))
4652
{
@@ -83,9 +89,11 @@ $themepalette = @{
8389
Add-PnPTenantTheme -Identity "CustomCompanyTheme" -Palette $themepalette -IsInverted:$false
8490
```
8591

86-
To use your company SharePoint theme you can use the below script:
92+
### Use your company SharePoint theme
93+
94+
To use your company SharePoint theme, you can use the following script:
8795

88-
```PowerShell
96+
```powershell
8997
$minimumVersion = New-Object System.Version("2.24.1803.0")
9098
if (-not (Get-InstalledModule -Name SharePointPnPPowerShellOnline -MinimumVersion $minimumVersion -ErrorAction Ignore))
9199
{
@@ -99,6 +107,7 @@ Connect-PnPOnline -Url "<your site url>"
99107
Set-PnPWebTheme -Theme "CustomCompanyTheme"
100108
```
101109

102-
## Learn more
110+
## See also
103111

104-
You can find all the details in the [SharePoint site theming](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-theming/sharepoint-site-theming-overview) article.
112+
- [SharePoint site theming](../declarative-customization/site-theming/sharepoint-site-theming-overview.md)
113+
- [Modernize your classic SharePoint sites](modernize-classic-sites.md)
Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,76 @@
11
---
22
title: Modernize your classic SharePoint sites
3-
description: Guidance on modernizing classic SharePoint sites
4-
ms.date: 03/23/2018
3+
description: Steps to transform your SharePoint classic site into a modern Office 365 Group-connected team site or communication site.
4+
ms.date: 04/17/2018
55
ms.prod: sharepoint
66
---
77

88
# Modernize your classic SharePoint sites
99

10-
SharePoint Online is continuously evolving and improving, which is a great thing for you as consumer of the service. One of the key improvements is the availability of modern sites, being modern Office 365 Group connected team sites or communication sites, combined with more and more functionality that can be consumed from a beautiful modern user interface. All of this is great...but you might ask yourself the question: "I've lots of classic (team) sites...how do I bring those into the modern SharePoint world?". There's no magic switch that automatically transforms your classic sites into modern sites, but it is possible to transform a classic site into a modern site following the guidance described in this article series.
10+
SharePoint Online is continuously evolving and improving, which is a great thing for you as a consumer of the service. One of the key improvements is the availability of modern sites, which are modern Office 365 Group-connected team sites or communication sites, combined with improved functionality that can be consumed from a beautiful modern user interface.
1111

12-
## Steps in a site modernization
12+
All of this is great, but you might ask yourself, *I have lots of classic (team) sites...how do I bring them into the modern SharePoint world?*
1313

14-
If you want to transform (or also referred to as "modernize") a classic site into a modern Office 365 Group connected site then you can do this by following the below outlined steps.
14+
You can transform (or "modernize") a classic site into a modern Office 365 Group-connected site by following the guidance in this section.
15+
16+
> [!TIP]
17+
> You can decide which steps to run and the order in which to run them. Although there's no one-size-fits-all process to modernize your site, the following is the recommended approach.
1518
1619
> [!IMPORTANT]
17-
> It's not currently supported to start using modern page experience in sites where classic Publishing Features have been activated.
20+
> It's not currently supported to start using the modern page experience on sites where classic publishing features have been activated.
1821
19-
### Enable your sites to fully leverage the modern user interface
22+
## Enable your site to fully leverage the modern user interface
2023

21-
The most visible aspect of a modern site is obviously it's modern user interface. If you've not turned of the modern experience at tenant level (**SharePoint Lists and Libraries experience** setting in tenant admin center) then already certain pages will show up using a modern user interface:
24+
The most visible aspect of a modern site is its modern user interface. If you haven't turned off the modern experience at the tenant level (the **SharePoint Lists and Libraries experience** setting in the tenant admin center), certain pages appear in the modern user interface:
2225

2326
- List and library pages for most lists and libraries
24-
- Site Contents page
25-
- Site Usage page
27+
- Site contents page
28+
- Site usage page
2629
- Recycle Bin pages
2730

28-
If you navigate your site you'll however notice that following pages are still shown using the classic user interface:
31+
However, if you navigate your site, you will notice that the following pages still use the classic user interface:
2932

3033
- Home page and all other site pages (wiki pages and/or web part pages)
3134
- List and library pages for certain lists and libraries
3235

33-
If you want to maximize the use of the modern user interface for your site pages plus list and library pages then checkout the [Modernize your user interface](modernize-userinterface.md) article. During this user interface you'll modernization you will also have to handle the modernization of your customizations as explained in [Modernize your customizations](modernize-customizations.md).
36+
You probably already have the out-of-the-box modern user interface for lists and libraries enabled at the tenant level, so it makes sense to further maximize its use. SharePoint tries to show your lists and libraries by using the modern user interface, but you might have customizations or configurations that prevent this.
37+
38+
To maximize the use of the modern user interface for your site pages and list and library pages, see [Modernize the user interface](modernize-userinterface.md).
39+
40+
To learn more about how to unblock your lists and libraries when using the modern user interface, see [Maximize use of modern lists and libraries](modernize-userinterface-lists-and-libraries.md).
3441

35-
### Connect your sites to Office 365 Groups
42+
You will also need to modernize your customizations as explained in [Modernize customizations](modernize-customizations.md).
3643

37-
Classic (team) sites are not connected to an Office 365 Group whereas modern team sites are: the connection to an Office 365 Group does open up the site for consuming other Office 365 Services like Teams, Planner, Outlook. So connecting your site to an Office 365 Group is an essential part of a site modernization. There are two options to make this happen:
44+
## Connect your site to an Office 365 Group
3845

39-
- You can have each site owner do this on their behalf using a wizard that can be launched from the user interface
40-
- You perform a bulk operation in which you connect an Office 365 Group to a series of sites in one go. This option is the preferred one for enterprise customers as it will allow you to control the used configuration (public/private, site classification, alias name)
46+
Classic (team) sites are not connected to an Office 365 Group, whereas modern team sites are. Connecting your site to an Office 365 Group is an essential part of modernizing a site. The connection to an Office 365 Group enables the site to consume other Office 365 services such as Teams, Planner, and Outlook.
4147

42-
Learn more from the [Connect to Office 365 Group](modernize-connect-to-office365-group.md) article.
48+
There are two options to connect your sites to an Office 365 Group:
4349

44-
### Switch to a modern tenant scoped branding
50+
- You can have each site owner do this on their behalf by using a wizard that can be launched from the user interface.
51+
- You can perform a bulk operation (known as a **groupify**) in which you connect an Office 365 Group to a series of sites at one time. This option is preferred for enterprise customers because it enables you to control the configuration (public/private, site classification, alias name).
4552

46-
Having SharePoint (team) sites use your company branding is a very common thing and for classic sites you've used one or more of the following components: site themes, alternate CSS and master pages. Master pages and alternate CSS are however not compatible with the modern user interface, so you will need to evaluate whether these branding customizations are still relevant or not. Classic site themes are respected in a modern user interface but since we now have tenant controlled site theming, switching over to that model will future proof your modernized site.
53+
For more information about connecting to an Office 365 Group and performing a **groupify**, see [Connect to an Office 365 Group](modernize-connect-to-office365-group.md).
4754

48-
Learn more from the [Modernize your site branding](modernize-branding.md) article.
4955

50-
## What process to follow?
56+
## Switch to a modern tenant-scoped branding
5157

52-
There's **no one size fits all process** for site modernization: the previous chapter introduced the steps in a site modernization but whether you run all steps and if so in which order you run them is up to you to decide. Although there's no one size fits all process there's a recommended approach for site modernization:
58+
Connecting your site to an Office 365 Group not only gives you the benefits of a group-connected site, but also provides you with a new modern site home page. Depending on your needs, this new home page might be adequate, but you can choose to create your own modern home page. At that point, it makes sense to include other modernization tasks as well, such as switching to a modern site theme.
5359

54-
### Step 1: Enable the out-of-the-box modern user interface for lists and libraries
60+
Using your company branding on SharePoint (team) sites is very common, and for classic sites you used one or more of the following components: site themes, alternate CSS, and master pages. However, alternate CSS and master pages are not compatible with the modern user interface, so you must evaluate whether these branding customizations are still relevant.
5561

56-
Given you typically already have this enabled at tenant level it makes sense to further maximize the use. SharePoint will try to show your lists and libraries using the modern user interface but you might have customizations and/or configurations that prevent this. Checkout the [Maximize your use of the modern list and library user interface](modernize-userinterface-lists-and-libraries.md) article to learn more about how to unblock your lists and libraries for using the modern user interface.
62+
While classic site themes are respected in a modern user interface, we now have tenant-controlled site theming, so switching over to that model will future-proof your modernized site.
5763

58-
### Step 2: Connect your site to an Office 365 Group + switch to modern branding when needed
64+
For more information, see [Modernize site branding](modernize-branding.md).
5965

60-
Connecting your site to an Office 365 Group does not only give you the benefits of a group connected site, but it will also bring you a new modern home page for your site. Depending on your needs this new home page might be good but do know that you can also opt to create your own modern home page as well. If you need a custom home page or if you want to perform a bulk "groupify" then you'll need to use a PowerShell script. After that point it makes sense to include other modernization tasks as well, like switching to a modern site theme.
66+
## Transform your classic site pages into modern pages
6167

62-
You can learn more about "groupify" and switching to a modern site theme in these articles:
68+
The final step in a site transformation is transforming your site pages. After you have completed the other steps, your site pages still appear in the classic user interface. Page transformation is not a simple process because there's no one-on-one mapping between the functionality offered by classic web parts and what's offered by the first-party client-side web parts on modern pages. Therefore, we recommend that you transform only the pages that are frequently used.
6369

64-
- [Connect to Office 365 Group](modernize-connect-to-office365-group.md)
65-
- [Modernize your site branding](modernize-branding.md)
70+
Information about transforming site pages is coming soon. In the meantime, you can find an overview at [Modernize the user interface](modernize-userinterface.md).
6671

67-
### Step 3: Transform your classic site pages into modern pages
72+
<!--For more information about page transformation, see [Transform classic pages to modern client-side pages](modernize-userinterface-site-pages.md).-->
6873

69-
The final step in a site transformation is transforming your site pages: if you've done step 1 and 2 then the pages in your site are the last thing that still shows up in a classic user interface. Page transformation is not a simple process as there's no one-on-one mapping between functionality offered by classic web parts versus what's offered by the 1st party client side web parts on modern pages.
74+
## See also
7075

71-
Therefore we recommend to only transform the pages that are frequently used. You can learn more about page transformation from the [Transforming classic pages to modern client side pages](modernize-userinterface-lists-and-libraries.md) article.
76+
- [Solution guidance](../solution-guidance/office-365-development-patterns-and-practices-solution-guidance.md)

0 commit comments

Comments
 (0)