Grow your CSS skills. Land your dream job.

facebook likebox Css edit

  • # March 9, 2011 at 1:35 pm

    Hello friends,

    I am Trying to put a likebox for my facebook fanpage ie:
    http://www.facebook.com/pages/Magento-Developer/162785273742658?v=app_4949752878

    on my website page ie:
    http://www.aquilawebs.com/shopping-cart-development/magento-ecommerce-development.php

    can anyone tell me how do i edit the default css of the likebox, I have the API key for my Facebook developer account

    thanks in advance

    # March 11, 2011 at 1:41 am

    anyone ????

    # March 23, 2011 at 3:53 pm

    I am Still looking for an answer :(

    # March 23, 2011 at 4:04 pm

    Are you talking about the banner with the ‘Recommend’ button?

    Why can’t you just target it in your own CSS file? I don’t understand the problem.

    # March 24, 2011 at 6:07 am

    Thanks for the reply my concern is
    A default light theme like-box of FB plugin looks like this:

    http://www.daddydesign.com/wordpress/wp-content/uploads/2010/03/fb_fanbox_default1.jpg

    Is there any easy way that I can change the look of the LikeBox by background color or no border at all

    # March 24, 2011 at 6:29 am

    Do you have firebug in firefox? If you do, inspect the element to find out the different class names of the like button. Then when you have the class name you want to style go to your css stylesheet and do as you would normally but at the end of your styles make sure to add an !important. For example:

    .connect_widget_like_button { border:1px solid #000000!important; }

    !important ignores any other styles set to that element and uses the one you’ve set.
    Hope that helps :)

    # March 24, 2011 at 10:15 am

    Are you guys sure he can do that? I don’t think it’s possible to edit content within an iframe since that would be editing another website’s CSS. You can do it with firebug, but I’m pretty sure HTML doesn’t allow that.

    # March 24, 2011 at 11:25 am

    @jamy_za is right.

    You cannot override the styles inside an iframe.

    However, the Facebook API may allow for some CSS customisation before it loads the iFrame? Not sure if it does though. I’ve never seen on looking different from the standard one you have

    # March 24, 2011 at 12:20 pm

    Ah – didn’t see that it was an iframe. Thought he was talking about the banner – don’t mind me!

    # March 25, 2011 at 6:43 am

    Hey guys just check out this link:
    http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/

    this guy says if I do as below it should work.



    can anyone please verify that because it didnt worked for me

    Please check

    # March 25, 2011 at 6:45 am

    does that wrk for anyone please verify

    # March 25, 2011 at 6:46 am

    oops my content is been suppressed..
    Please check the above link and check out the trick this guy gave a Css path in the script

    # March 25, 2011 at 6:54 am

    “does that wrk for anyone please verify”

    Why don’t you try it yourself?

    # July 9, 2013 at 10:23 pm

    .w2bslikebox div {
    background: #cfe2f3;
    border: medium none;
    display: block;
    position: relative;
    }

    this css work for me in my fb like box
    check it here http://www.markleuterio.com/

    # July 20, 2013 at 10:47 am

    .w2bslikebox div { background: #cfe2f3; border: medium none; display: block; position: relative; }

    Add this code to your blogger custom css (work only for fb like-box)
    to get the code for like box go to [Facebook Developer](http://developers.facebook.com/docs/reference/plugins/like-box/ “”)
    Default background is transparent.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".