SharePoint Online Modern Pages – Custom CSS

by | Sep 5, 2018 | Collaboration | 0 comments

Many of us have experienced the problem of working with custom display in modern pages. You can easily feel as if you are in handcuffs and unable to change any display aspect of the page. This short blog further explains that issue, as well as a way to remedy it.


Modern pages under SharePoint Online have very restricted customization in terms of look and feel. You are able to change the color scheme of the page but not the CSS on the pages. There are a couple of scenarios where you would likely want to customize the page using custom CSS:

  • If the logo on the modern pages looks different than on other SharePoint pages
  • If you are finding a lot of whitespace to the right due to the fact that the width of the zones on the main page are hard coded


The work around to accomplish the above listed scenarios on modern pages is to create SPFX application extensions to inject the Custom CSS on the page. NOTE: This method is NOT supported by Microsoft at this time because Microsoft can change the DOM and/or class name which could break the CSS overrides. However, the workaround will resolve the display issue.  Just be aware there could be issues in the future, so keep your eye out for any changes.

Have questions? Need help with building a scalable platform or with SharePoint Intranet? Send us an email at or call 630.832.0075 to start the conversation.