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

[cc]

[/cc]

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

[cc]
.fb-like-box {
background:#f4f4f4;
width:320px;
padding:0px;
margin:10px 0px;
border:solid 6px #e9e8e8;
}
[/cc]

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

[cc]
.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;
}
[/cc]

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

[cc]
.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);
}
[/cc]

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

[cc]
.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;
}
[/cc]

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.