Sharepoint Online modern UI: hide page components

Question

I'm creating an external site for sharing documents with our customer.

I have:

1. Created an external site

2. Added an external user to Site Member Users with "Collaborate" permission

3. Set the document folder page as site home page

In the picture below there is the output.

Now I want:

1. Hide the GEAR ICON in the right of the ribbon because the "Site Content" menu is available. Otherwise I want to hide the "Site Content" menu
2. Hide the Sharing link in the right top of the page.
3. Hide the "Switch to the classic version of Sharepoint" in the down left side of the page.
4. Hide the "Comments and Feedback" in the down right of the page.

Is there a way to do this leaving the Modern UI Layout?

Answer 1

At least the Feedback button can be disabled tenant-wide via PowerShell using the Set-SPOTenant cmdlet:

Set-SPOTenant -UserVoiceForFeedbackEnabled $false

As for the other UI elements you are out of luck as far as configuration goes, they are just there. (For the "Return to classic SharePoint" link there is a UserVoice you can vote for.)

You could develop something to hide the other elements using the SharePoint Framework. But keep in mind that this is most likely not supported by Microsoft and will break with certainty. See my answer here elaborating on this.

Answer 2

To hide these options, we may need scripts such as JavaScript or CSS.

Currently, the following customizations are unsupported in "modern" team sites and modern pages:

• Custom master pages - More extensive branding will be supported later using alternative options
• User custom actions / Custom JavaScript - There will be a more controlled way to embed JavaScript on the pages through the SharePoint Framework Extensions (currently in dev preview)
• Custom CSS via AlternateCSSUrl web property

Learn more about customizing the “modern” experiences in SharePoint Online.

Try to use SharePoint Framework Extensions to add scripts to "modern" pages.

Answer 3

Create SharePoint Framework Extension project and update the css styles in header / footer of the page by implementing the below logic,

1. Identify the type of login user ( Internal User or External User)
2. If it is external user append the below css to run in the page,

button#O365_MainLink_Settings{ display:none; } div[class^='sideActionsWrapper-']{ display:none; }