Hiding a SharePoint Ribbon Button with CSS

I spent far too long this morning trying to hide a single ribbon button on a single page. The page is part of a sandbox solution so I couldn’t do the work server side, and because the page was a one-off in a library I didn’t want to use a HideCustomAction.

My first attempt was CSS, but that didn’t work. I assumed (incorrectly) that the reason my style didn’t stick was because the ribbon’s JavaScript was toggling the display. The problem turned out to be that I didn’t understand CSS quite as well as I thought!

The ribbon’s various elements use ID attribute values that contain periods. The values correspond to the cmdui.xml file that defines the ribbons for SharePoint Foundation. To affect the elements by via their ID’s with CSS you have to use an escape (backslash) before the period. For example, to hide the New Item button, use the following syntax:

#Ribbon.ListItem.New.NewListItem-Large
{
display:none;
}

 

This is why I love software development! Frustration turns to joy!

–Doug

Author: Doug Ware