Cutomize sharepoint online side bar

Question

How can I customize sharepoint side bar, like applying my wanted fonts, styles and so on? Can I achieve this by customizing ma theme?

Answer 1

Hi @Coachizera,

Customizing the modern experience is indeed very limited. The only official support is creating a custom theme (main color, text color, background color) and applying it to the sites you want.

To go beyond in the simplest way, and for example, loading a CSS file, you will need a SharePoint Framework solution to load the CSS file into the page, as it is not officially or natively supported by Microsoft.

Such a solution is actually quite simple, with a SPFx solution with a single Application Customizer that adds a link to you stylesheet on the site on every page.

A quick google search gave me this project with this kind of approach: https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-injectcss/README.md

The downside however, is that your code (and thus your stylesheet) will not be immediately loaded at the page load, as it is loaded after the page load, resulting in a potential visual glitch (<0.5s normally) if your modification are important (such as changing the font or the layout of the page).

If to you looks is everything, I would suggest dropping the modern experience and going back to the classic experience, where you have a master page (.aspx) where you can add all the css you want. But doing so would change the whole experience on your site and should be pondered appropriately.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.