Hiding a SharePoint 2010/2013 Disabled Ribbon Buttons By User Permissions Using CSS

Many SharePoint users asking “Can we hide Ribbon buttons for current login user (by his permissions) rather than show it as disabled button !?

The answer is YES. When user did not have contribute permissions (like Add Item, Edit Item …etc.), these buttons will be shown in the Ribbon, but not active (Disabled), so the Ribbon button will not be clickable as following:

In SharePoint 2010

In SharePoint 2013 / Online

So, to hide these buttons in easy and simple way, we will use an existing CSS class in SharePoint 2010, 2013, and Online version. The CSS class name is “.ms-cui-disabled”, and this CSS class is added to all disabled buttons in the Ribbon?!? So the idea is to override the behavior of this CSS class in Master Page and hide any button that use this CSS class.

The following is the steps to hide disabled Ribbon buttons using this CSS class:

1. Open SharePoint Designer and Edit the site Master Page in Advanced Mode
2. Before the end of HTML head section “</head>”, Add the following HTML code:

   <style type="text/css">
      .ms-cui-disabled {display:none !important;}
   </style>

3. Save and Publish the Master Page to make changes available for all users.

Make sure the HTML code should placed in the right place and looks like the following:

After Publish and Approve the Master Page, the users will not see any disabled buttons (have no permissions to view it) in the Ribbon, and the result will be as following:

In SharePoint 2010:

In SharePoint 2013 / Online:

So far, we have a good quick trick, but people still hate empty white spaces in the Ribbon.My friend Monir Abu Hilal help me with great script files to hid empty groups in the Ribbon (SharePoint 2013 / Online). The Files must be uploaded to Style Library and add a link to these files in Master Page.

1. Download script files and upload it to the Style Library (HideRibbonButton.css and HideRibbonButton.js)
2. link the two files in the Master Page as following:

     <link rel="stylesheet" type="text/css" href="/Style%20Library/HidRibbonButtons/HideRibbonButton.css" />
     <script type="text/javascript" src="/Style%20Library/HidRibbonButtons/HideRibbonButton.js" ></script>
   

3. Save and Publish the Master Page and the results will be amazing as following:

 

That’s all the Tricks, And I hope this post was useful for you