8

I'm attempting to add Custom CSS to Modern Pages. The method I attempted was trying to add alternate CSS to the Master Page. This worked on the homepage, but not the new "Modern" Site Pages. It appears that this may not be supported with 365 (annoying), but I wanted to see if anyone knew some kind of work around.

Simply, I have a File Viewer set up to read an Excel Doc. I'm literally only trying to extend out the .CanvasZone element beyond it it's max width of 1280px so that all cells can be read without scroll bars.

3

Probably not the answer you're looking for, but in the interest of letting you know that you're not crazy and possibly saving you some cycles: modern pages don't inherit from a master page that we have access to edit, nor do they use the alternate CSS setting. Basically everything you've come to understand about SP Online client-side development, SharePoint-hosted add-ins, etc ... throw a good chunk of it out when considering modern pages.

You can still land CSS into modern pages manually, possibly could script it out or create a modern web part with the content in it, but this would not work for list views or other built-in modern pages. As far as I know, nothing can be applied globally in modern mode, such as site-level user custom actions.

Check out Customizing "modern" site pages. You'll see the master page & alt css in the "not supported" list.

Supposedly more customization options are forthcoming. I haven't seen a date for any of that, though.

If any of you community-types out there know differently, please chime in.

2

You could investigate writing a SharePoint Framework Application Customizer:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions

Amongst other things, this will let you load custom CSS and JavaScript on modern pages.

  • Please don’t add just a link as answer to a question. If the link breaks, the answer you provided will not be useful for future visitors. Provide an answer of your own and use the link as reference. If needed, you can block quote the content from your link. More information is found in our help center, especially How do I write a good answer – Benny Skogberg Nov 19 '17 at 18:47
  • @joel-jeffery Thanks for posting this. Looks promising. – Jim Barntish Nov 20 '17 at 17:36
1

Although this method is NOT supported by Microsoft, as Joel mentioned, you can build an SPFx Extension (application customizer). Not supported because Microsoft can change the DOM and/or class name, which could break your CSS overrides. That being said it does work, but you'll want to communicate that to your client or IT management.

I recently used the Top Placeholder to drop CSS onto all modern pages. To get started, as Joel mentioned, go to Using Page Placeholders with Extensions.

In my code I was simply overriding styles, and fortunately I did not have to use any !important enforcement.

Add the .scss file to your project:

enter image description here

The CSS:

In your scss file, make sure everything is within :global{}, like this:

:global{
  .styleToOverride{
    background-color: f2f2f2;

  .anotherstyleToOverride{
    background-color: f9f9f9;
}

The ApplicationCustomizer.ts file:

Once you have your Top placeholder in place and working, you'll want to pull in your CSS into the placeholder. It should look something like this:

private _renderTopPlaceHolder(): void {

  if (!this._topPlaceholder) {
    this._topPlaceholder =
      this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Top,
        { onDispose: this._onDispose });

  if (this._topPlaceholder.domElement) {
    require("./css/customStyles.scss");
    this._topPlaceholder.domElement.innerHTML = "<div></div>";
  }
}

You should be able to test this by running:

gulp serve --nobrowser

Now, visit a modern page, and don't forget to add the query string to the end:

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"e5625e23-5c5a-4007-a335-e6c2c3afa485":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}

Also, don't forget to update the GUID in that query string to your solution id found in the package-solution.json file in your project. The bottom of Build a Hello World Extension shows you how to do this.

1

Theres a modern script editor now that you can utilize: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor

Install it, add it to a page and you can add CSS styling through <style> tags.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.