Branding the Modern UI in SharePoint Online – Part 3

 

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!