Question

I am aware that it is now impossible to link your own css to the like-box to customize it, but this problem seems like it could be accomplished using the like box wizard. All I want to do is change the border color to the same as the background of my page so that there doesn’t appear to be a border at all. The strange thing is that is seems like any color I put in the border field doesn’t effect the outcome at all. Here is my site: http://www.uplatindance.com/SDO/

Here is the embedded code

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/pages/Its-Salsa-Time/205870466141243" data-width="260" data-height= "65" data-colorscheme="dark" data-show-faces="false" data-border-color="black" data-stream="false" data-header="false"></div>

Thoughts?

Answer 1

this is an interesting problem because we don’t have access to the CSS controlling the style of the HTML elements because it’s inside of an iframe. We can however wrap the div with a containing div like this:

<div class="fb-container">
<div id="bg-box" class="fb-like-box" data-href="http://www.facebook.com/pages/Its-Salsa-Time/205870466141243" data-width="260" data-height= "65" data-colorscheme="dark" data-show-faces="false" data-border-color="black" data-stream="false" data-header="false"></div>
<div>

The fb-container div will be 2px shorter horizontally and vertically to cut out the borders. Here’s the CSS:

.fb-container {
    width: 258px;
    height: 63px;
    overflow: hidden;
}

.fb-container > div {
     margin: -1px 0px 0px -1px;  
}

And here’s a jsfiddle live demo:

http://jsfiddle.net/jK97V/