Requirement: Add custom CSS to SharePoint Online modern page.
SharePoint Online: How to Inject CSS to a Modern Page?
- Build the SPFx solution package.
- Upload and deploy the .sppkg file to the Tenant App catalog.
- Create an App Instance on the site where you want a modern script editor web part.
- Edit the page, add the modern script editor web part and place CSS.
Step 1: Build the modern script editor web part – SPFx Solution Package
Build the SPFx solution package from https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-script-editor. The documentation is good enough. Or you can download the solution file directly from here:
Step 2: 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 site 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 “pzl-script-editor.sppkg” file you downloaded >> Deploy the package.
More info on How to Deploy an App to App Catalog in SharePoint Online?
Step 3: Create an App Instance in the SharePoint Online Site
How to add a script editor web part to SharePoint Online modern page? Well, Add an App instance to your SharePoint Online site first, where you need the modern script editor web part.
- Browse to your SharePoint Online site >> Click on Setting Gear >> Add an App.
- Click on “Modern Script Editor Web Part by Puzzlepart”.
This deploys the modern script editor web part to your SharePoint Online site.
As a final step, You have to add the modern script editor web part to your SharePoint Online page.
- Browse your modern SharePoint Online page >> Click on “Edit” in the top-right corner.
- Mouse over to the area where you would like to add the web part >> Click on the title “+” icon and choose “Modern Script Editor web part” from the list of choices.
- Now, click on the “Edit Snippet” button and place the CSS code in it. In my case, I’ve added the CSS to hide the “Site Contents” link in the left navigation.
- Save and Publish the page.
Thank you. but can we expand the framework, so that it wraps the entire page and is not only limited to the size of the web part?
Yea sorry doesn’t show up like said above. I’ll try recompile in node with the latest and see if it works.
Did you use PowerShell method to instantly enable the Custom Script? Because, the Admin Center settings may take 24 hours to reflect.
I’ve just completed this successfully following the steps above and using the downloaded package.
The little step I nearly missed was on the “My Apps” page.
Once I uploaded the package (that I had downloaded here) the Puzzlepart app was sitting in the “Apps you can add” section and I had to click a little text at the bottom of the box to actually add it.
Now it sits in the “Added apps” section and I can add it to the pages in my site.
Could you check if you have enabled the custom script for the site? How to enable custom script in SharePoint Online?
I am currently having an issue with getting this to work on my SharePoint modern page, it doesn’t seem to show at all when I attempt to add the app as Web Part into my app, does the site need any permissions activated at all ?
I have this installed to a SharePoint Online modern site but it is only displaying the changed card layout with shading etc. when I have the “edit snippet” window open. As soon as I click save and it closes this window, the page view returns to the normal view without curved edges and shading etc.
Any idea what could be causing this?
This is working only on Modern Page in SharePoint. But not in Classic Page.
For classic pages, You have Script editor/content editor web parts.
Uploaded and deployed and added app, but the icon isn’t showing in my Web Parts window. Showing in my apps list, but nowhere to be found to add the web part.
Same, doesn’t show anywhere in the add the web part
Enable custom script for the site! How to Enable Custom Script in SharePoint Online?
Hi and thanks. The webpart still doesn’t appear (the app is OK, custom script is enabled). Got an idea ?
I am seeing the same thing – the app is deployed and looks OK, custom scrip was already enabled, but when I go to add the web part (Step 4) I do not see the Modern Script Editor listed.
Salaudeen, I’m having issues downloading your sppkg, is there an issue on your end?
Confirmed there are no issues with the download link! Could be something like Web Proxy Server may be preventing you from download.