Customizing facebook fan box css

HTML, with CSS set to a file on localhost:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="http://www.facebook.com/pages/abc/143772917800992?created" width="200" height="550" show_faces="true" stream="false" header="false" css="http://localhost/abc/templates/index/images/fb.css?1" >
</fb:like-box>

CSS:

@charset "utf-8";
/* CSS Document */
.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: #FF6600;
  font-weight: bold;
}
开发者_JAVA技巧.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: #666 !important;
  padding-top: 1px !important;
}
.fan_box .connect_widget{
  position: absolute;
  bottom: 0;
  right: 10px;
  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;
}

Facebook doesn't seem to be loading the CSS file. What's the problem?

CSS can't be loaded from localhost because Facebook needs to load (and cache) it from their servers. That is, it needs to be somewhere that's accessible to their servers.

Facebook has withdrawn this option. Now you can not add any such css file to your like box or fan box. It has been stopped working everywhere since 24th Jan 2013.

because the fan box is an iframe, and iframes cant be styled from the parant document. asfaik facebook dont want to let you customize this the design to stay ci conform, however you can have the inverted color version and some other fonts.