Branding the Modern UI in SharePoint Online – Part 3


Welcome to the third post about options for branding modern SharePoint Online pages and sites. Before reading this new blog post, please read the first two posts in this series before you read this one:

Part 1: 2:

Great, now in this post I’ll show you how to work with and apply your custom branding in a Modern site, with a little help of an SharePoint Framework (SPFx) Web Part. Let’s say you need to override some of SharePoint Out Of The Box CSS in just one page, then it can be handy to apply a web part onto the page with a portion of your CSS overrides. This technique is similar to what you could do in SharePoint classic sites with help of the Content Editor Web Part or the Script Editor Web part.



As you can see onto the image above, I’ve only done a few minimal changes on the page, replaced the standard font for all web part headers in this page, and I’ve also replaced the site title to a font named Ubuntu. This font is free to use as a custom web font (ttf), and you can find it at Google Font library.

Ok, this can sure be a way forward when your client has a strict guideline for branding that requires custom fonts or colors, matching the graphical profile, and you need to create a branding for SharePoint and not be so limited by what’s possible to do with a theme. By a web part, you can only affect the page where you add this web part. If you want to add some CSS overrides globally onto all modern sites, then you need to do it with help of an application customizer (SPFx Extension).

Last thing, don’t forget that Microsoft is constantly adding new features to SharePoint Online and also updates the DOM. The overrides and customizations you make with adding and injecting custom CSS may just stop working one day, not so dramatic perhaps but it’s important to know this and have a plan for this. You can read more about that in my previous post.

The idea is to add a CSS file in the Web Part and reference this into public render, with help of require.

Another thing that maybe could be useful here, is to hide the web part it self if the page is saved or published, and only display the web part if the state of the page is in edit mode. This could be done with help of a portions of JavaScript and to import the function called DisplayMode from SP core library. Maybe I’ll do a blog post about that later on.. Let’s see. Anyway, feel free to download my web part from here and test this out!

Stay in tune for the next post of this series, see you!



Please enter your comment!
Please enter your name here