How To Customize Your Facebook Fanbox With CSS - V1

Some days ago I read a tutorial about designing a facebook like box on many blog.Before some days it was a very hard thing but daddydesigns makes it easy.I have also used my tricks to make it more beautiful.Their tutorial was well entertained but with the introduction of Facebook Like Box instead of Fan Box, the change in algorithms made it difficult to modify the plugin using the same guide. After several trials and errors, we managed somehow to make the necessary small changes made by DaddyDesigns to fully customize the Like box with custom flavors of fonts and colors. This would surely have not been possible with their brilliant help.


I have made this tutorial as easy to implement as possible. You just need to carefully follow the easy steps below. 


I have divided the tutorial in two parts:

• 1st Part  - Creating A Style Sheet For Like Box.
• 2nd Part - Creating A Code For Like Box.

1. Creating A Style Sheet For Like Box

For creating a style sheet -

• Copy below code and paste it in notepad.

/*---------------BTSNTS Custom Like Box Code Start--------------*/
.fan_box a:hover{ 
text-decoration: none; 
}

.fan_box .full_widget{ 
height: 200px; 
border: 0 !important; 
background: none !important; 
position: relative; 
}

.fan_box .connect_top{ 
background: none !important; 
padding: 0 !important; 
}

.fan_box .profileimage, .fan_box .name_block{ 
display: none; 
}

.fan_box .connect_action{ 
padding: 0 !important; 
}

.fan_box .connections{ 
padding: 0 !important; 
border: 0 !important; 
font-family: Arial, Helvetica, sans-serif; 
  font-size: 11px; 
  font-weight: bold; 
color: #666; 
}

span.total{ 
color: #0080ff; 
font-weight: bold; 
}

.fan_box .connections .connections_grid { 
padding-top: 10px !important; 
}

.fan_box .connections_grid .grid_item{ 
padding: 0 10px 10px 0 !important; 
}

.fan_box .connections_grid .grid_item .name{ 
font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
font-weight: normal; 
color: #289728 !important; 
padding-top: 1px !important; 
}

.fan_box .connect_widget{ 
position: absolute; 
bottom: 0; 
left: 0px; 
margin: 0 !important; 
}

.fan_box .connect_widget .connect_widget_interactive_area { 
margin: 0 !important; 
}

.fan_box .connect_widget td.connect_widget_vertical_center { 
padding: 0 !important; 
}

/*---------------BTSNTS Custom Like Box Code Box End--------------*/

To keep it simple make these changes:

• To change the font size edit font-size: 11px;
• Replace the heading color ( #0080ff ) with a color of your choice. You can use our color generator tool
• Replace the Profile Nick Names text color ( #289728 ) with one of your choice.

*Now save the file and give it name as FB.CSS. (See Image Below)

• Finally upload the file on your hosting server or you can try any other free hosting service.If you don't know how to host then follow this link...
• Once you have uploaded the stylesheet file, you will be provided with a direct link to it. Keep it safe as we would need it later.

You are done! :)

2. Creating A Code Custom Like Box

Instead of using the new code provided on the developers page, we will use and modify the code provided by daddydesigns. This is the modified code you need to use:

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> 
<script type="text/javascript">FB.init("");</script> 
<fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="300px" height="200px" header="0" logobar="0"   css="STYLE SHEET LINK"></fb:fan>

Now make these changes:

1. Replace LIKE PAGE ID with your ID. (Note - If you don't know your ID then click here )
2. Replace STYLE SHEET LINK with the link which you have uploaded
3. Now customize Connections i.e. Number of Profile Faces/pics, Width and Height Dimensions as you wish....

That's it!

Credits

All the designing credit goes to daddydesigns.Readers are requested to kindly link back to this page if they wish to share this working tutorial with their visitors.