How to Add Custom CSS or JavaScript to SharePoint Online Modern Page?
Requirement: Add custom CSS to SharePoint Online modern page.
SharePoint Online: How to Inject CSS to a Modern Page?
As the script editor web part is not supported in modern SharePoint, Power users often get stuck if they want to change the UI elements through CSS or JavaScript. Luckily, We have SPFx based react script editor web part to add custom CSS or JavaScript to modern SharePoint Online pages. Here are the steps at a high level:
- 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.
Step 4: Edit the page, Add a modern script editor web part and place CSS or JavaScript.
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.
Please note, This injects CSS or JavaScript into a specified modern page where you add the web part. If you want to inject CSS at the site level, you must create an SPFX application extension. Here is another post on SharePoint Online: How to Inject Custom CSS in Modern Sites?
Embed Another Page or Site using iFrame
Here is an example of how to display another web page or web site inside a modern script editor web part:
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#iframeContainer").attr("src","https://www.sharepointdiary.com/author/salaudeen-rajack");
});
</script>
<iframe width="500px" Height="500px" id="iframeContainer" src=""></iframe>
Wrapping up
In summary, to add CSS or JavaScript to a SharePoint Online modern page, You can use the “Modern Script Editor” web part. Deploy the SharePoint Framework (SPFx) first to your tenant, and add it to your modern pages wherever required.
In classic sites, You can upload the HTML file to a library and embed it to the page using the content editor or script editor web parts. For a modern site, use the Embed web part to add HTML code to a SharePoint Online modern page. More here: How to Embed HTML in SharePoint Online?
Hello,
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.
Salaudeen, firstly, thank you for making this available. I am also having issues getting this to work on a SharePoint modern page. I have followed all the steps, including enabling custom scripts for the site. I also failed at “Step 4: Edit the page, Add a modern script editor web part and place CSS or JavaScript in it”. The app isn’t there. It does show in my site contents. Can you help?
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.
I am currently having issue with getting this to work on my SharePoint modern page, I have added the script editor app, however when I did “Step 4: Edit the page, Add a modern script editor web part and place CSS or JavaScript in it” I cannot find the Modern Script editor app. Can you help?
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 ?
You must enable custom script! Use:
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.