SharePoint Online Modern Pages – Custom CSS

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.

Scenario:

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

Resolution:

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 info@peters.com or call 630.832.0075 to start the conversation.

By | 2018-09-26T14:14:44+00:00 September 5th, 2018|Collaboration|0 Comments

About the Author:

Shraddha Shah, Sr SharePoint Developer at Peters & Associates focused on developing SharePoint solutions for clients. Work with clients to understand their requirements, challenges and providing solutions in SharePoint. She has spent over 13 years in the IT and Software fields having experience in web development and SharePoint applications. Shraddha holds a M.S. in Computer Science from New York Institute of Technology, and a Bachelor of Science degree in Computer Engineering.

Leave A Comment