Adam Breckler

Read the rest of this entry »

jamphat

Facebook provides a nifty little likebox widget that can be customized to display your facebook pages current fans (or likers), but the widget comes with an ugly blue border that cannot be overridden with css because it is in a facebook iframe.

The Solution: Wrap the likebox in an extra div (with a border color set to your pages background color, and position the wrapper to overlap the likebox). Code below.

The HTML

<div id="likebox-frame">
     <iframe src="http://www.facebook.com/plugins/likebox.php?id=XXXXXX&amp;width=900&amp;connections=16&amp;stream=false&amp;header=false&amp;height=190" scrolling="no" frameborder="0" style="z-index:9;border:none !important; overflow:hidden; width:900px; height:190px;" allowtransparency="false"></iframe>
    </div>

The CSS

#likebox-frame{
 border:2px solid #F0F9F4;
 width:894px;
 z-index:10;
 height: 156px;
 overflow: hidden;
 position:relative;
 top:-1px;
 left:-2px;
}
#likebox-frame iframe{
  left:-5px;
  overflow:hidden;
  position:relative;
  top:-1px;
}