Welcome to the second post about options for branding modern SharePoint Online pages and sites. Before reading this new blog post, please read the first post in this series first:
Part 1: https://chrisstahl.wordpress.com/2019/12/31/branding-the-modern-ui-in-sharepoint-online-part-1/
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) Extension / Application Customizer.
Cool, but as I wrote in the previous post, for modern pages, when it comes to custom branding, we are limited to themes and site designs and with these means we will not go very far if we need to customize the interface the way we want, if we need to do more than it’s possibly by just a theme. Well, we are limited in this sentence, that’s true, this is the the way Microsoft want us to go, to stay away from rebuilding and modify the user interface of modern pages SharePoint. Maybe that’s not a big deal, the user interface just looks fantastic as it is nowadays.
But hey, wait a minute, now we are into philosophical discussions and reasoning, what is a fantastic design, is a great design good because of the users likes it, or is it great because it looks what people should call modern? Let’s leave this discussion for another day, instead what if you customer wants you to do some smaller adjustments to the UI of theirs modern SharePoint Intranet like adding a custom font to the links in the global navigation or add another background color for the SharePoint pages etc? Typical things you cannot do with just a theme in SharePoint. This typical things, my customers generally think it is very important for them to add for example corporate colors and fonts based on their graphic profile. For some of my customers it is very important and can be a go or no go for whether SharePoint is relevant as an Intranet.
Well, you can override SharePoint’s standard CSS if you need to, and it’s important for you or for the customer. That can be done by add your override CSS in a SPFx Extension, a application customizer. Ok, it can be done, but it’s not anything Microsoft
encouraging you to do, they will not give support to your modifications done in this way. More to think of is that Microsoft update the underlying DOM, for example class names and markup from and then.
Ok what can happen if something changes, well it should not be so dramatic depending of what, the worst thing is that your branding or part of it wont be applied anymore and if so, it’s just to update what’s needed. The important thing here is to understand what you are doing so you can fix what ever needs to be done if something changes in the underlying DOM that will result in the need of adjust something in your override CSS.
Ok, let’s take a look at an example. Let’s say you want to add some branding to the global navigation (mega menu) like the image below.
Ok, if you know your CSS you find out the classes needed to work with, with help of your developer toolbar. Next step is just to create an SPFx Extension with Visual Studio Code. I guess you know how to work with SPFx, if not let me know and hopeful I can create a post about that later on. Well, in the ApplicationCustomizer.ts file, just add a reference to your own CSS file in the Extension that contains your override CSS. For example if you have a CSS file with the name Main.css in a folder called assets, you can reference it like this:
require('../assets/Main.css');
The structure could look something like this:
Download the SPFx Application Customizer here!
Stay in tune for the next post of this series, see you!
</christian>
Me & My SharePoint [FrontEnd] 
Great tips, as always! Thanks Christian