Here’s a quick little snippet of CSS if you are trying to hide the Newsfeed, OneDrive or Sites from the Waffle Menu in SharePoint 2016. If you are looking to do this in the Ribbon for SharePoint 2013 then check out my other posting – https://thomasdaly.net/2016/03/05/hide-newsfeed-onedrive-andor-sites-from-the-suite-bar-ribbon-area-for-sharepoint-2013/
Where do you put this? There are a number of places that you can put it. The best option would be in the Alternate CSS file [I’m going to get around to posting this cause I haven’t found a great article explaining this to newcomers]. You could also just add it to the MasterPage but that’s not the cleanest method.
Hide Newsfeed
Before:
CSS Snippet:
/* Hiding Newsfeed */
.o365cs-nav-appTile[id='O365_AppTile_Newsfeed'] {
display: none;
}After:
Hide OneDrive
Before:
CSS Snippet:
/* Hiding OneDrive */
.o365cs-nav-appTile[id='O365_AppTile_Documents'] {
display: none;
}
After:
Hide Sites
Before:
CSS Snippet:
/* Hiding Sites */
.o365cs-nav-appTile[id='O365_AppTile_Sites'] {
display: none;
}
After:
Bonus
After you hide 2 items you’ll get a space like this. Add the next line of CSS to tighten it up.
CSS Snippet:
/* To remove the minimum width off the size of the box */
.o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu {
min-width: 0;
}After:
Hide all 3 – Newsfeeds, OneDrive, & Sites + remove the min width of the box
CSS Snippet:
.o365cs-nav-appTile[id='O365_AppTile_Newsfeed'],
.o365cs-nav-appTile[id='O365_AppTile_Documents'],
.o365cs-nav-appTile[id='O365_AppTile_Sites'] {
display: none;
}
.o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu {
min-width: 0;
}
Thanks for reading!
Nice set of css!
I have just one cuestion, these Css works nice in the my site but how can I apply them to my content site? the one when you click on “On drive” icon
Regards
Americo
unfortunately you can’t use this on the ‘modern’ types of pages as there is not a quick way to hook up a css file. you could with an spfx application customizer
Thx Thomas it worked great with SP2016 Feature Pack 1. I added it to SP-Responsive-UI.css from (https://github.com/SharePoint/PnP-Tools/tree/master/Solutions/SharePoint.UI.Responsive) which is included in all pages without modifying the masterpage or using Alternate CSS file.
How can I add more links to the top suite bar? Which master page file do I edit?
You don’t know how long I’ve been waiting for clear cut answers like this! You sir are a gentleman and a scholar! Now if you could tell me how to change the background color of those for custom tiles I’ll buy ya a beer
instead of the display: none, use background-color: {color}
https://www.w3schools.com/CSSref/pr_background-color.asp
Hmm do you know how/if you can do that with Custom Tiles? Similar to how the background color changes on the different app tiles in O365? I’d share the link but it is a non public intranet
Without inspecting I’d be guessing. Here is how it’s done and maybe you can figure out the selector for your buttons.
Using the F12 tool bar I inspect the button. Look for the ID of the button as well use that in the CSS.
Below is the CSS you would use to change the background and hover color of the Delve button.
.o365cs-nav-appTile[id=’O365_AppTile_OfficeGraph’] {
background-color: red;
}
.o365cs-nav-appTile[id=’O365_AppTile_OfficeGraph’]:hover .o365cs-nav-appTileBackground {
background-color: blueviolet !important;
}
CSS Snapshot:
https://www.screencast.com/t/b2UWHRrB
Video Example:
https://www.screencast.com/t/zfMEmjsI
Will this also work with SharePoint 2016 on Prem? I’m rolling out our first ever SharePoint agency intranet – how exciting! I want to provide the “Sites” feature of My Sites, but hold off on OneDrive and Newsfeed until sometime later. Any advice you could provide would be super helpful!
absolutely, the css “should be” the same for SP2016 as O365.
Nice post!
Is there a way to disable this options by settings?
Thank you!
I don’t believe that you can turn those off