Question

I have used below code
This is my Iframe:

<iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=50'></iframe>

$('#fblike').contents().find('.pluginButton').css({'background','#FF8000'});

I have also applied Css directly

.pluginButton {
    background: none repeat scroll 0 0 #FF8000 !important;
}

Still it is not working.I want to change pluginButton’s background.I want to apply image to its background.How to apply?

Answer 1

If I understand you correctly, then what you want to do is inject CSS into the iframe which loads a Facebook page.

The short answer is that it is not possible. Here is an answer posted on SO with a more detailed explanation: Can I apply CSS to the elements within an iframe?

No, not from outside the iframe. An is its own world. If the domains etc. match, then Javascript can communicate in and out, and could (if it wanted to) inject CSS into a child frame.

If the contains content from a different domain, there’s pretty much nothing you can do. The parent page controls the size of the frame and whether it’s visible, and can put its own content over the frame by positioning etc, but it can’t directly effect the way the actual frame content is rendered.

Here is another explanation from: How to apply CSS to iframe?

Edit: This does not work cross domain.

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['frame1'].document.body.appendChild(cssLink);