For SPO is there currently a way to change the CSS classes for the Modern Pages?

Question

For SharePoint Online Modern Pages, is there a way to alter existing Modern CSS on the pages (I think fabric UI is the actual style, not just the CSS style used to make classic pages look modern)? Not what I have seen with extensions, where they are globally adding CSS on top of the pages instead of alerting existing classes in the CSS on the Modern Pages.

Any direction would be appreciated(Extensions? SPFX? React-script editor? PowerShell?) I have asked around quite a bit and there is just not much info about this. There are special webparts that his

Of the many pages I made, the one below needs the left navbar removed, white space all around the titles removed, top links removed, slider extended to full screen, etc....I really I want the ability to completely alter the fabric UI as I want. Sounds like Microsoft doesn't want that...YET.

SharePoint Designer is a no go for SPO. Placing <script> and <style> in the header or even referencing external scripts and styles does nothing. Here are some of the MANY classes once the page renders:

class= "Canvas grid Canvas--withLayout"
<div class="SPPageChrome"><div class="removeFocusOutline"    
id="SuiteNavPlaceHolder" style="height: 50px; display: block; z-index: 
10;">;"><div class="o365cs-nav-header16 o365cs-base o365cst o365spo o365cs-
nav-header o365cs-topnavBGColor-2 o365cs-topnavBGImage o365cs-rsp-
affordance-off o365cs-newALV3-on" id="O365_NavHeader" autoid="_o365sg2c_l"> 
<div class="o365cs-nav-leftAlign">  

This seems to be a heavy lift right now the way Microsoft has practically disabled customizing Modern Pages. At this point anything that would lead to altering CSS on Modern Pages would be great.

On GitHUb I found "SPFX-Master" which has webparts for a mega menu, tabs, hideQuickLaunch, and hide an element etc. It sounds like I may have to piece this process together as best I can, with webparts and apps....

Answer 1

SPFx is Best option. Because modern page doesn't support script editor, content editor or master page.. Use spfx web part. Add your style to it..

Regards, Sukumar MS

Answer 2

There is no OOB solution to insert script to the Modern Pages. To add code to Modern Pages, you need to use ASPF. Read below article to learn more about SharePoint Framework (SPFx):

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/enterprise-guidance

Coming from old classic SharePoint pages you might have existing script solutions you want to re-use on a modern page without having to repackage it as a new SharePoint Framework web part.

You can create a similar web part as the classic Script Editor Web Part, and allows you do drop arbitrary script or html on a modern page. Below article tells more information about how to create a modern script editor web part, I think it is useful to you:

https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor

Answer 3

This question can be answered in two ways, depending on how supported your UI customization should be.

Is there an unsupported way to alter arbitrary CSS/styles in the UI?

Yes. Look at the other answers.

Using SPFx you can insert any CSS classes you want. What you will experience though is a small delay between rendering the page and the time SharePoint loads the SPFx solution that contains the CSS. This might cause a noticeable delay before the final style is in place. Usually this reduces the overall visual appeal of the UI.

Is there a supported way to alter arbitrary CSS/styles in the UI?

No, not arbitrary styles. Wildly changing the out-of-the-box UI is not encouraged and will break with certainty. This is also emphasized in the official branding guidance:

Updates provisioned to the service may affect the Document Object Model (DOM) structure of out-of-the-box pages and the content of out-of-the-box files (for example, master pages). Developers must keep this in mind and should not rely on unsupported customization approaches (for example, the position of specific elements in the DOM structure of the page).

Believe me, every single of such customizations we did in projects over the last years broke. Every. single. one.

So choose wisely :)

Answer 4

There is a quality CEWP that I have used on several SharPoint Online websites. You can find it here if you want to download the sppkg file: http://www.lancebitner.com/modern-cewp.sppkg