I know I’m blogging a lot about CSS changes lately, and it’s not normally something I recommend. But for a very specific project of mine, I’ve been doing a lot of this and am sharing a few tips along the way in case they help others needing to accomplish something similar.
Hide the Browse and Edit buttons/tabs
In this post, I’ll share how to hide the Browse and Edit tabs from the ribbon menu of a SharePoint page. This only applies to classic experience pages. To hide these tabs/buttons, add the following CSS inside a <style> tag to the page(s) on which you wish to remove these options.
.ms-cui-tt a[Title='Browse'],.ms-cui-tt a[Title='Edit']{
display:none;
}
If you’re unsure how to add CSS to your page, this post details the steps with a different script. Just use the script above inside <style> tags instead.
You can also hide other tabs like Page, Files, Library, etc. by adding a comma right before the opening brace ({) and then pasting another .ms-cui-tt a[Title=’Page’] (substituting the tab name of course). This only works for some, but not all tabs.
Hide the Share, Follow, and Focus/Full Screen buttons
You may also wish to hide the three buttons on the right side of the ribbon seen here:
Similar to above, we’ll just set the #RibbonContainer-TabRowRight ID to not display. This one has to have !important added inside the semi-colon for it to override competing code and take effect as expected.
#RibbonContainer-TabRowRight{
display:none!important;
}
How do we add css code to a SharePoint Online page which does not have content or script editor functionality? Use primarily wiki pages in these sites.
Dear Mr. Chamberlain,
If I want to hide some permission button on ribbon when changing permission for list/task items, but there is no menu to edit the page and add webpart. What should I do to apply your advice of hiding button here?
Thanks!
Bach Han Phong