Custom Branding Modern UI SharePoint and global

[EVERTON BATISTA PETRO ALEXANDRE]

Hi, I am trying to custom the SharePoint Branding for all modern pages about a site collection. I saw that isn't possible to create a masterpage to modern pages/sites. I opened a ticket in Microsoft Premier and they talked to open a post in techcommunity (hahaha). I would like to know what is the best practice or the options to custom the branding for modern ui.

1 - Can I use SharePoint Framework Extensions, like (https://blog.kloud.com.au/2017/10/30/global-navigation-and-branding-for-modern-site-using-sharepoint...)? Is it the unique option?

2 - Using the SPFX Extension, can I hide or remove the Office 365 menu Global?

3 - How can I change the CSS page (using SPFX Extension too)?

4 - When I create a SPFX Extension, do I need to add it for each modern page or I can add this custom for a entire site collection or subsite?

Thanks

Everton

[#2]

Did you try the custom site designs or site scripts? It can be applied to existing and new sites. https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-design-overview

[#3 · Accepted solution]

1. Correct: SPFx Extensions are the only way to customize modern SPO
2. No. For now, you can only place stuff at the botton and header of your SPO modern pages by means of SPFx Extensions
3. Use themes
4. You can globally add your SPFx Extensions

[#4]

Thanks Juan!

[#5]

Thanks Rishi!

[#6]

You can use SPFx Modern Theming Solutions created by MasterThemes Inc. to brand all modern sites available within SharePoint Online. For more info please visit:

https://www.masterthemes.net/tour-modern and https://www.sharepointpackages.com/index.php?main_page=index&cPath=80

[#7]

hello, did you use SPFX extensions? How did you create this UI? It is great!

[#8]

@Juan Carlos González MartínDoes that mean we cannot make font style/color etc. changes in Top Navigation  or any other section in Modern pages if required? I am trying to make some changes in top navigation with font style and with box model (css) and I am really not sure how this can be achieved. I felt probably this could be achievable using Extension but again no luck. Not sure if implementation is wrong or what.

Also, I applied custom theme by referring this article https://developer.microsoft.com/en-us/fabric#/styles/themegenerator  where it works fine however I do not see Emphasis background option which is available on default themes in modern pages. Is this something expected or is there any other way of doing this which I could be missing.

Can someone please help with the details if this is possible and if yes, then How. Please help me with the steps and the code so I can try.