Apply CSS on a Specific SharePoint Ribbon Bar Button?

Question

Is there a way to simply hide a particular SharePoint ribbon bar button? I've see the CSS code for hiding the entire ribbon bar, but I only want to hide 1 button on it (the check-in button). I've tried referencing it several ways, such as:

a#Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large { display: none; !important }

ms-cui-ctl-large#Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large { display: none; !important }

a.ms-cui-ctl-large#Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large { display: none; !important }

It's possible that my CSS is just all wrong, or perhaps I'm going about it the wrong way. How can I hide this element?

Answer 1

Found the solution to this solely via CSS thanks to http://online.appdev.com/edge/blogs/doug_ware/archive/2011/08/02/hiding-a-sharepoint-ribbon-button-with-css.aspx

The trick is that for any '.' within the SharePoint ID (Which do unfortuenately include . as part of their names and are non-editable) you need to preceed each with '\' to become '\.' so in your original example you'll find that:

#Ribbon\.DocLibListForm\.Edit\.Commit\.CheckIn-Large {display:none;}

Works like a charm! :-)

Answer 2

Well, I found a solution. It doesn't use CSS, but rather javascript to hide a specific button in the ribbon bar. Here is the code to hide the Check-In button:

<script type="text/javascript">
var elem = document.getElementById("Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large");
elem.style.display = "none";
</script>

To implement this, I simply created a text file containing the above code, then dropped a CEWP onto my list edit form which linked to this file, and boom--done!

Thanks @Prozaker for your CSS tips--I learned something new today (besides that I suck at CSS :-)

Answer 3

It would be really helpful if you could post the part of the html you need help with.

However your css isn't using the important rule properly, the !important needs to be before the ; something like this:

You also need to separate with a space any child elements you are referencing, the first example needs to be written like this:

a#Ribbon .DocLibListForm .Edit .Commit .CheckIn-Large { 
     display: none !important; 
}

It could be re written like this:

a#Ribbon .DocLibListForm .CheckIn-Large { 
     display: none !important; 
}

Given that only 1 element is named .CheckIn-Large that is a child element of .DocLibListForm

For these kind of issues you can use the IE developer bar (or firebug if you use firefox), it should come bundled with ie8+ which can help you with this sort of things, letting you edit the css in real time.

I would advise against using the !important rule because it modifies the way that CSS normally operates.

{edit}

since dots are part of your ID, you can try this:

#Ribbon.DocLibListForm.Edit.Commit.CheckIn-Large { 
     display: none !important;
}

However without actual HTML code, it is still hard to tell, maybe you can paste the part that's giving you issues on pastebin.