Global CSS for entire SharePoint websitecollection (modern pages)

Question

I have a question regarding the adaptation of modern pages via CSS. Because I find the standard sytles terrible... The large distances between web parts, especially between text and image. I also want to have images always left-aligned... etc.

As I could find out by researching, there is a script editor web part - I could throw CSS in there... But I do not want to have to touch every single page. Is there another SharePoint plugin that allows me to globally set up CSS instructions for my entire SharePoint websitecollection? Unfortunately I could not find anything suitable for my requirements.

Answer 1

I suppose what you are looking for is the master page for modern pages.

However, according to this Microsoft document: Customizing "modern" site pages:

These customizations are currently not supported for "modern" pages:

Custom master pages (more extensive branding will be supported later using alternative options)

I’m afraid the only option supported for the time being is to add your custom code individually on modern pages.

Answer 2

You can accomplish this using a SharePoint Framework (SPFx) Application Customizer extension. Your extension can either bundle the CSS directly (simply use an import statement) or can load it dynamically using SPComponentLoader.loadCss('addressofyourcssfile')

Here is a blog by Hugo Bernier showing how to do this: Inject Custom CSS on SharePoint Modern Pages using SPFx Extensions

Here is a video by David Warner II demonstrating various ways to write your CSS and deploy using an extension: Community Demo - Optimizing SPFx extension performance with dynamic loading of CSS styles to be used along with this sample: Optimize CSS/SCSS Style Bundling and Dynamic Loading of Styles

Find more details on the SPComponentLoader in the docs here: Load CSS from the URL using the SPComponentLoader

You'll likely end up with a lot of !important on the end of your styles.

Once you've got your Application Customizer built, you'll likely want it deployed everywhere. You can do this with Tenant-wide Deployment of SharePoint Framework Extensions

---

Disclaimer: While there are some uses cases, in general You should NOT do this. Overriding the styles is not only tricky to do well, it is highly fragile. Microsoft controls the page and this includes styles, DOM structure, element ids, etc. Many of the styles will be targeted using hashed class names that are generated at build of the individual components meaning your style overrides will likely be targeting a specific version of the style that may change at any point at Microsoft's discretion and you will be scrambling to update your CSS.