CODEWITHSUNDEEP
javascriptcssfacebook
Steven Matthews
Steven Matthews

Reputation: 11325

Is there any way to change the CSS of the Facebook Like Box?

So I'm trying, through whatever way possible, to modify the Facebook Like Box's CSS. I've found the offending value and I want to change it. This is inside of an iframe.

The CSS is this:

.pluginLikeboxStream {
overflow-x: hidden;
overflow-y: auto;
}

This is causing there to always be a scrollbar on the Like Box stream, which I really, really don't want.

I'm not seeing anyway to modify this - not the Javascript SDK (which is my best hope, I think), not through using Javascript or jQuery on it (as it creates an iframe, this is impossible, as far as I can tell - even though Firebug lets me change this).

Obviously the best solution would be to be able to set a style using CSS, but that also seems impossible.

Is there any way to fix this?

I've tried to load the iframe with no scrollbars, but that's just on the outside of the iframe - this is obviously internal.

All I want is for this class to be set to overflow: hidden;

Upvotes: 0

Views: 3418

Answers (4)

Kevin Lynch
Kevin Lynch

Reputation: 24723

If you set !important then it will over rule any other CSS applied to the element

.pluginLikeboxStream {
    overflow: hidden !important;
}

!important should only be used in circumstances like this.

EDITED

To apply it to the iFrame you need to use jQuery

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .pluginLikeboxStream {overflow: hidden !important;} /style>"));
});

This is how i've always done it.

Upvotes: 0

Andreyco
Andreyco

Reputation: 22872

You can create your own "Like" button - without like count (but you can fix this) and then use JS API to "like" URL's

Upvotes: 0

Tanner
Tanner

Reputation: 1214

It is not possible to change the CSS of the official Facebook Like Box because it is an external iframe.

Read more in this duplicate.

Upvotes: 1

Steven Lambert
Steven Lambert

Reputation: 5901

Since the content you want to change via CSS is in an iframe, you can inject a style into the iframe. But as Vector said, know what you are getting yourself into.

Upvotes: 0

Related Questions