Facebook Widget – manipulating it with CSS

tiagodovale · Member · Apr 3, 2012 at 5:54 pm
Copy link

Add topic to favorites
Hi guys!

I’m trying to make the Facebook Like Box so that it matches my theme a bit better.

I found that I could manipulate it a bit, and added a dropshadow to it with this code:

#facebook-likebox-2 iframe { -moz-box-shadow:0 2px 8px #aaaaaa; -webkit-box-shadow:0 2px 8px #aaaaaa; box-shadow:0 2px 8px #aaaaaa; }

But what I’d really love to do would be to simply eliminate the border from Facebook’s Widget.
I think I can’t really do anything about that border directly -it’s on Facebook’s side- but I can resize the box from my side so that it is a couple of pixels smaller. This would clip the Widget by those two pixels and fix my problem.

The thing is, when I try to do it, the Widget align to top and left, and so only the right side and bottom borders are clipped..

Any ideas??

Thanks again :)

The blog I need help with is: (visible only to logged in users)
timethief · Member · Apr 3, 2012 at 5:56 pm
Copy link
All CSS editing is theme specific. Please post an active link starting with http:// to the blog you are CSS editing.
tiagodovale · Member · Apr 3, 2012 at 5:58 pm
Copy link
Thanks for that reminder :)
http://blog.tiagodovale.com
designsimply · Member · Apr 3, 2012 at 5:58 pm
Copy link
That’s actually not possible to do with CSS because the Facebook likebox is controlled on Facebook’s side (as you mentioned).
tiagodovale · Member · Apr 3, 2012 at 6:00 pm
Copy link
I was hoping that we could control the side and positioning of it on our side, defining a smaller box for it and placing it centered in it, so that the border is clipped… I managed to get to the first part… couldn’t center it, though..
tiagodovale · Member · Apr 3, 2012 at 6:00 pm
Copy link
(“control the size”)
designsimply · Member · Apr 3, 2012 at 6:05 pm
Copy link
There isn’t a way that I know of. It’s because of how Facebook loads their likebox.
tiagodovale · Member · Apr 3, 2012 at 6:06 pm
Copy link
Thanks again, designsimply :)
It’s nice to have your advice once again!
designsimply · Member · Apr 3, 2012 at 6:07 pm
Copy link
Sorry I didn’t have better new about the FB likebox.
tiagodovale · Member · Apr 3, 2012 at 6:10 pm
Copy link
We can’t win them all, though I didn’t quite quit yet: if I learn something new about it, I’ll report it here
Cheers! :)
tiagodovale · Member · Apr 3, 2012 at 6:22 pm
Copy link
This code

#facebook-likebox-2 { border:1px solid white!important; }

makes the left border go white… but only the left one… any ideas? :$
designsimply · Member · Apr 4, 2012 at 8:35 pm
Copy link
Looks like what you’re doing is shifting the element over a bit with the border and that force part of the likebox to the side and obscured the border on one side.

An iframe is universally handled like a different HTML page by most browsers. If the iframe is on a different domain, like it is in the case of Facebook’s likebox, then you cannot adjust that content using CSS on the site displaying the iframe. To adjust it, you would need to have access to the Facebook iframe content directly, which is something you cannot do from the WordPress.com side.

No items found.