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 – http://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:

After:


Hide OneDrive

Before:

CSS Snippet:

After:


Hide Sites

Before:

CSS Snippet:

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:

After:


Hide all 3 – Newsfeeds, OneDrive, & Sites + remove the min width of the box

CSS Snippet:

 

Thanks for reading!

 

Comments
  • Ethan
    Posted at 2:17 pm September 14, 2017
    Ethan
    Reply
    Author

    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

    • Tom Daly
      Posted at 2:37 pm September 14, 2017
      Tom Daly
      Reply
      Author

      instead of the display: none, use background-color: {color}

      https://www.w3schools.com/CSSref/pr_background-color.asp

      • Ethan
        Posted at 2:53 pm September 14, 2017
        Ethan
        Reply
        Author

        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

        • Tom Daly
          Posted at 3:13 pm September 14, 2017
          Tom Daly
          Reply
          Author

          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

  • Douglas
    Posted at 8:17 pm June 9, 2017
    Douglas
    Reply
    Author

    Nice post!

    Is there a way to disable this options by settings?

    Thank you!

    • Tom Daly
      Posted at 12:39 am August 9, 2017
      Tom Daly
      Reply
      Author

      I don’t believe that you can turn those off

  • Leave a Reply