Jquery – Apply CSS on a Specific SharePoint Ribbon Bar Button

cssjqueryribbonsharepointsharepoint-2010

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?

Best Answer

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! :-)

Related Solutions

Html – How to apply CSS to iframe

Edit: This does not work cross domain unless the appropriate CORS header is set.

There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

The style of the page embedded in the iframe must be either set by including it in the child page:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

Or it can be loaded from the parent page with Javascript:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

Javascript – How to apply !important using .css()

The problem is caused by jQuery not understanding the !important attribute, and as such fails to apply the rule.

You might be able to work around that problem, and apply the rule by referring to it, via addClass():

.importantRule { width: 100px !important; }

$('#elem').addClass('importantRule');

Or by using attr():

$('#elem').attr('style', 'width: 100px !important');

The latter approach would unset any previously set in-line style rules, though. So use with care.

Of course, there's a good argument that @Nick Craver's method is easier/wiser.

The above, attr() approach modified slightly to preserve the original style string/properties, and modified as suggested by falko in a comment:

$('#elem').attr('style', function(i,s) { return (s || '') + 'width: 100px !important;' });

Best Answer

Related Solutions

Html – How to apply CSS to iframe

Javascript – How to apply !important using .css()

Related Topic