RSS

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

22 Sep

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
image

In SharePoint 2013 / Online
image

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:
image

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:
image

In SharePoint 2013 / Online:
image

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:image

 

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

 

Tags: , , , ,

5 responses to “Hiding a SharePoint 2010/2013 Disabled Ribbon Buttons By User Permissions Using CSS

  1. Ammar N Sattar

    March 10, 2015 at 9:25 am

    Good Think Dear but can i specific an item from the ribbon like (View all Page ) and disable it .?

    Thank you

     
  2. SharePoint Online Training

    July 18, 2015 at 8:09 am

    It was very clear and neat explanation about Hiding a SharePoint 2010/2013 Disabled Ribbon Buttons By User Permissions Using CSS

     
  3. bunny

    May 20, 2016 at 11:16 am

    Hi, can you pls. tell how to totally remove Check in Check out from Ribbon and Open menu (…)
    thank you very much

     
  4. Mandeep Kumar

    September 1, 2016 at 6:32 pm

    can we hide some controls from ribbon for all the users except admin.
    Actually my users has Design/contribute permssion in site as well as in my Library.
    i want to hide “Library Setting” tab from all the users without changing their current permission.

     
  5. australian dedicated webspace and domains

    March 27, 2017 at 3:58 pm

    Hello there! Quick question that’s entirely off topic.
    Do you know how to make your site mobile friendly? My blog looks weird when viewing from my iphone 4.
    I’m trying to find a template or plugin that might be able to fix this
    problem. If you have any recommendations, please share.
    With thanks!

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

 
%d bloggers like this: