Change Facebook Like box border, background color styles

Facebook Like box is most convenient way to build subscribers and likes for your fanpage. You can easily add Facebook Like Box to your WordPress website by manually generating code from official website. While there are few options to customize look of the Facebook Like Box, you can even do more using custom CSS styling like modifying background color and border styling.

UPDATE - Facebook has made changes that does not allow CSS customization. We will update with new code soon – Jan 01, 2013.

CSS style for Border & Background of Facebook Like Box

1. First make sure, you can generated HTML5 code for the Facebook Like Box. Follow this tutorial to get going with code generation. Copy first code between [body] tags and second code (as shown below) at place where you want to display the Facebook Like Box (like on sidebar).

1
<div class="fb-like-box" data-header="false" data-stream="false" data-border-color="#f4f4f4" data-show-faces="true" data-height="180" data-width="320" data-href="http://www.facebook.com/basicwp"></div>

2. Now lets style this box further using custom CSS. By default, the HTML5 code of Facebook Like Box uses “fb-like-box” class. Hence, you can start styling by adding this class to style.css file. Add following code to style.css file of your blog.

STYLE ONE – Thick border & background color

1
2
3
4
5
6
7
.fb-like-box {
background:#f4f4f4;
width:320px;
padding:0px;
margin:10px 0px;
border:solid 6px #e9e8e8;
}

Above will add thick border (of 6px) with custom color (#e9e8e8) and background color (#f4f4f4). You also modify margin and padding for exact style look by changing respective values in the above code. Please note, you can also control border color in the original HTML5 code but not the border thickness.

STYLE TWO – Curve effect to thick border

1
2
3
4
5
6
7
8
9
10
.fb-like-box {
background:#f4f4f4;
width:320px;
padding:0 0px;
margin:10px 0;
border:solid 6px #e9e8e8;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Above code curves border of the Facebook Like Box. You can increase 10px value of “border-radius” for more curved effect or decrease it for less curved effect as per requirement.

STYLE THREE – External shadow effect to the border

1
2
3
4
5
6
7
8
9
10
.fb-like-box {
background:#fafafa;
width:320px;
padding:0 0px;
margin:10px 0;
border:solid 1px #c7c7c7;
-webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30);
-moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30);
box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30);
}

Above code adds cool looking external shadow to Facebook Like Box using “box-shadow” property. You can play around with its values for more custom looking shadow effect.

STYLE FOUR – Gradient (two color) background effect

1
2
3
4
5
6
7
8
9
10
11
12
.fb-like-box {
background: rgb(0, 255, 0);
background: -moz-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);
background: -webkit-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);
background: -o-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);
background: -ms-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);
background: linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);
width:320px;
padding:0 0px;
margin:10px 0;
border:solid 1px #c7c7c7;
}

Above code adds gradient (2 color seamless) background effect to the Facebook Like Box. Using above examples: you can mix match different styles and get ultimate custom look for your Facebook Like Box.

SHARE

Comments

  1. Awesome and simple!!

  2. Thanks for sharing the effects styling!

  3. hi i have tried this mod as my like box is located on a dark background and i needed it to have its own solid background however it still isnt working any ideas anyone
    as this is the perfect mod for me i would like to see it working
    please take a look at site and you will see what i mean

    many thanks justhorse.tv

  4. Valeu pela dica. abraço

  5. you know if Facebook allow css customization to like box?

  6. this is very useful, thanks!!!

  7. Hi,
    It works perfect,
    one more question, how can i change its position ?
    if i try to add lines, it stop working

  8. houses in dallas texas says:

    Hello there! I could have sworn I’ve been to this blog before but after going through some of the articles I realized it’s
    new to me. Anyways, I’m definitely pleased I came across it and I’ll be book-marking it and checking back frequently!

  9. faysal shahi says:

    bro, it’s not working?

Speak Your Mind

*

Subscribe to our mailing list

* indicates required
Close