SharePoint Thoughts

At times, you want to hide something that’s rendered by default in SharePoint, for example some of the ribbon’s controls rendered right away with the page. I’ve seen some people going with the way of hiding the whole “New” group in a document library in order to prevent user from using the upload or new folder options.

For the new folder, everyone knows it can be easily disabled from the library’s settings, but for the Upload button in the ribbon, you can use pure CSS to do so, but you will need to find the right selector, and use it right. We all know how to use developer tools to pick the right css classes, so as can be seen below:

So you might be tempted to do something like this:

#Ribbon.Documents.New.AddDocument-Large{ display: none; }

And.. that won’t work, you might be tempted as well to add !important to the end to force it to apply, but again.. it won’t work. It’s because CSS considers the dot character as part of the css itself to identify a class, and it won’t understand it’s part of the ID. In this case, you need to use escaping characters in CSS which is the backslash!

So your code should look like this:

#Ribbon\.Documents\.New\.AddDocument-Large{
display: none;
}

Now you should end up with something similar to this:

Hope this will quickly help someone out there!