Edit Facebook Like Box CSS

Hi, can you please advise which file in the plug-in editor i should use to edit the CSS for the Facebook Like Box widget? I would like to center the widget in my sidebar and remove the blue border.

Thanks!

Brad

  • Timothy
    • Chief Pigeon

    Hey again.

    The way that Facebook work here is with an iFrame, so you can’t control the CSS directly from your site as such.

    With you asking for the file where the code was contained I presumed you were looking for something specific in the code.

    When you add the widget in the admin the light and dark colour scheme can be selected there.

    You can find all the options Facebook has here:

    http://developers.facebook.com/docs/reference/plugins/like-box/

    Take care.

  • brad_paterson
    • Flash Drive

    Thanks Timothy. In the example on the FB Developers page, they have an option for border color. The widget provided in Ultimate Facebook does not. Any ideas how to add this or should i just add the FB code directly to a text box and stop using this widget in the plugin?

    Cheers

  • Timothy
    • Chief Pigeon

    Hey again.

    As I mentioned you will find the widget code here:

    /wpmu-dev-facebook/lib/class_wdfb_widget_likebox.php

    You’d have to change:

    echo '<iframe id="' . $id . '" src="' . WDFB_PROTOCOL . 'www.facebook.com/plugins/likebox.php?href=' .
    $url . '&width=' . $width . '&locale=' . $locale . '&colorscheme=' .
    $color_scheme .'&show_faces=' . $show_faces . '&stream=' .
    $show_stream . '&header=' . $show_header . '&height='.
    $height . '" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:' .
    $width .'px; height:' . $height . 'px;" allowTransparency="true"></iframe>'
    ;

    To something like:

    echo '<iframe id="' . $id . '" src="' . WDFB_PROTOCOL . 'www.facebook.com/plugins/likebox.php?href=' .
    $url . '&width=' . $width . '&locale=' . $locale . '&colorscheme=' .
    $color_scheme . '&border_color=%23fff' .'&show_faces=' . $show_faces . '&stream=' .
    $show_stream . '&header=' . $show_header . '&height='.
    $height . '" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:' .
    $width .'px; height:' . $height . 'px;" allowTransparency="true"></iframe>'
    ;

    Note the extra:

    . '&border_color=%23fff' .

    You would leave the %23 (this is #) and then replace the hex colour code with your own choice.

    Take care.

  • Timothy
    • Chief Pigeon

    Hello, hope you’re well.

    Just following up on some threads here and noted that we’ve not heard from you in a while.

    If you’re still looking for some assistance on this thread then please by all means reopen it or create a fresh thread for any new questions.

    Take care.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.