SharePoint: Hiding the Checked Out Icon from Anonymous Users

 

When document has been checked out, SharePoint will overlay a little icon to show the checked out status. When a user moves their mouse over the icon it will display a popup with the name of the user who has it checked out.

 

       +      =    

 

And when they mouse over they see:

   

 

 

Anonymous users can see it too!

You may not want to display it to most users, but very likely not to read only and anonymous users. 

 

 

Hiding it:

There is no out of the box way to turn off this icon, so we need a trick to hide it.  You could use JavaScript or JQuery, but best bet is to use a tiny piece of Cascading Style Sheet (CSS) code.

The code to display the icon looks like this:

      <img src="/_layouts/images/checkoutoverlay.gif" class="ms-vb-icon-overlay" ...

The CSS looks like this:

     <STYLE>
        .ms-vb-icon-overlay { display:none }
     </STYLE>

The only problem with this is that it hides the icon from everyone. A better solution would be to hide it from selected users.

 

So what we do is:

• Add a style to hide it from all users  (display:none)
• Add a SPSecurityTrimmedControl to then show it for any user with appropriate permissions (the example below uses the “AddListItems” permission)

 

<style>

    .ms-vb-icon-overlay

    {

      display:none

    }

</style>

<Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="AddListItems">

  <style>

    .ms-vb-icon-overlay

    {

      display:inline

    }

  </style>

</SharePoint:SPSecurityTrimmedControl>

 

• If you want this for just a single page, put this CSS in a Content Editor Web Part on that page
• If you want this for an entire site then add this to your master page somewhere after where SharePoint add its CSS links (SharePoint:CssLink and SharePoint:Theme tags)

<SharePoint:CssLink runat="server"/>

<SharePoint:Theme runat="server"/>

    <style>

       <!-- your CSS goes here -->

    </style>

 

 

What might go wrong? 

SharePoint might be using the ms-vb-icon-overlay style for something other than checkout status. I've not run across it yet, but ...

 

 

If you want to hide the icon from everyone on every site on the server?

As a "hack" you can find the icon on the server ("checkoutoverlay.gif") and
  - delete it  (seems to work fine - no red x's)
  - rename it (a better plan)
  - back it up and replace it with a 1x1 transparent GIF (best plan)

This would need to be done on each web front end server (and added to your disaster recovery plan ;-)  )

The file is here:
   _layouts/images/checkoutoverlay.gif

 

.