SharePoint Online: How to Inject Custom CSS in Modern Sites?

Requirement: Add custom CSS to modern SharePoint Online sites.

How to Inject Custom CSS to Modern Sites in SharePoint Online?
The Alternate CSS and script editor web parts are not supported in the Modern SharePoint Online sites. However, if you want to inject a custom CSS to your SharePoint Online sites, you can use the react application customizer to inject CSS. Here are the steps at the high level:
  1. Create a CSS file with your customizations and upload to "Style library"
  2. Download or build the SPFx solution package from https://github.com/hugoabernier/react-application-injectcss
  3. Upload and deploy the .sppkg file to tenant App catalog
  4. Activate the SPFx Application customizer to the site through custom action

Step 1: Create a Custom CSS file and Upload to "Style Library"
In my case, we wanted to hide the "Export to Excel" button in all lists and libraries of a SharePoint Online site and used this CSS in my custom.css file and uploaded to "Style Library" folder of the site:
button[name="Export to Excel"] {
  display: none;
}

Step 2: Download the SharePoint Framework Solution Package
Go to https://github.com/hugoabernier/react-application-injectcss/tree/master/assets and download the "react-application-injectcss.sppkg" file to your computer. You can also download the source code and build a new solution with your own customizations.

Step 3: Upload and Deploy the .sppkg file to your App catalog Site
Once you have the SPFx package ready, you can deploy it to your app catalog to make it available on any site of your tenant.
  • Navigate to your App catalog site. E.g. https://crescent.sharepoint.com/sites/apps/
  • Click on "Apps for SharePoint" >>  Click on "Upload" >> Browse and select the "react-application-injectcss.sppkg" file you downloaded >> Deploy.
More info on How to Deploy an App to App Catalog in SharePoint Online?

Step 4: Activate the SPFx Application Customizer to the Site through Custom Action
The next step is to deploy the application customizer to the site or tenant using custom action. Here is the PowerShell to deploy the application customizer:
#Parameters
$SiteUrl = "https://crescent.sharepoint.com/Sites/Marketing"
$customCSSUrl = "https://crescent.sharepoint.com/sites/Marketing/Style%20Library/custom.css"

#Connect to Site
Connect-PnPOnline $SiteUrl -Credentials (Get-Credential)

#Add Custom Action
Add-PnPCustomAction -Title "Inject CSS Application Extension" -Name "InjectCssApplicationCustomizer" -Location "ClientSideExtension.ApplicationCustomizer" `
                    -ClientSideComponentId "5a1fcffd-dfeb-4844-b478-1feb4325a5a7" -ClientSideComponentProperties "{""cssurl"":""$customCSSUrl""}"
If you want to remove the application customizer, you can do by:
#Parameters
$SiteUrl = "https://crescent.sharepoint.com/Sites/Marketing"

#Connect to Site
Connect-PnPOnline $SiteUrl -Credentials (Get-Credential)

#Remove the Custom Action
Get-PnPCustomAction | Where { $_.Name -eq "InjectCssApplicationCustomizer"} | Remove-PnPCustomAction -Force

That's all, Your custom CSS should be in action! The "Export to Excel" button is hidden through our custom CSS:
sharepoint online inject custom CSS in modern sites

No comments:

Please Login and comment to get your questions answered!

Powered by Blogger.