Branding the Modern UI in SharePoint Online – Part 1

If we look back at how SharePoint has worked in the past and since ancient times, the interface has been fully possible to customize through several different methods and tools, such as that we were able to build our own master pages, page layouts and added our own CSS to write over SharePoint’s default CSS files. We had complete control over how our SharePoint site would look like in the smallest detail. Well these approaches are still in heavy use on most on-premises sites active today, but times are changing, and we need new strategies and different angles for the future. Anyway, that was at the time when the SharePoint interface was part of what is now called classic SharePoint User Interface.

Intranet.png

However, now with the new modern interface, the conditions are completely different from the previous architecture in the classic model since Microsoft changed the way the user interface in SharePoint is working at its core. In the new modern UI of SharePoint, 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. Actually, it should be added that in most cases we can, build nice and customized interfaces according to what our customer wants with the help of Themes and that modern SharePoint itself has such a competent and well-functioning interface basically but what if we need to something extra on top of a theme like add a custom font or set a color to some element in SharePoint, like what we could do before with alternate CSS or just reference a custom CSS file through a Content Editor Web Part? Actually that can be done by SharePoint Framework in form of an Application Customizer (Extension) or actually just a single web part. You can achieve a lot with this techniques I will write about in the next posts, a bookmarks link button, a sliding pane or maybe a user reminder ticker etc.

There are also some important things to keep in mind, especially if you need to do overwrites of SharePoint’s own CSS as you need to understand what it means from a maintenance perspective, but I will try to work out the concepts here using my experience and give you the right recommendations so you don’t get lost here 🙂

The image above shows an example of how you can style the mega menu navigation as well as a few additional parts of the modern interface in a simple way with the help of an SPFx web party.

In this series starting from Part 2 (I’ll publish this post soon), I will show how you can add your own CSS or override SharePoint’s CSS for SharePoint modern UI with help of an SPFx web part. Of course, you will also be able to download the complete code for all examples I’ll provide.

Stay In tune for the next post!