Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Facebook Widget - manipulating it with CSS

  1. tiagodovale
    Member

    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 {<br /> -moz-box-shadow:0 2px 8px #aaaaaa;<br /> -webkit-box-shadow:0 2px 8px #aaaaaa;<br /> box-shadow:0 2px 8px #aaaaaa;<br /> }

    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 blog.tiagodovale.com.

  2. timethief
    Member

    All CSS editing is theme specific. Please post an active link starting with http:// to the blog you are CSS editing.

  3. tiagodovale
    Member

    Thanks for that reminder :)
    http://blog.tiagodovale.com

  4. designsimply
    Staff

    That's actually not possible to do with CSS because the Facebook likebox is controlled on Facebook's side (as you mentioned).

  5. tiagodovale
    Member

    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..

  6. tiagodovale
    Member

    ("control the size")

  7. designsimply
    Staff

    There isn't a way that I know of. It's because of how Facebook loads their likebox.

  8. tiagodovale
    Member

    Thanks again, designsimply :)
    It's nice to have your advice once again!

  9. designsimply
    Staff

    Sorry I didn't have better new about the FB likebox.

  10. tiagodovale
    Member

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

  11. tiagodovale
    Member

    This code

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

    makes the left border go white... but only the left one... any ideas? :$

  12. designsimply
    Staff

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags