How To Remove Border Around Like Box
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?
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/
<fb:fan profile_id="your-page-id-here" stream="0" connections="21" width="403" height="360" data-header="false" show-border="false"></fb:fan>
The attribute that removes the border is show-border="false", and this is the solution to go as it works also with background images. Changing border colour is not a serious solution as it only hides the border and work only with solid background.
add the following attribute to your fb-like-box div:
data-show-border="false"
I mean;
<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-show-border="false" data-stream="false" data-header="false"></div>
Adding this attribute worked for me:
data-border-color="#fff"
Or for dark scheme:
data-border-color="#333"
The cleanest solution is to configure the border within the facebook like-box generator itself;
http://developers.facebook.com/docs/reference/plugins/like-box/#
Toggle the 'Show Border' checkbox and use the output code generated after you click 'Get Code'.
Probably Facebook is providing its own CSS for that button. Try overriding this with JavaScript or your own CSS.
In JavaScript I would do the following:
<script>
function init(){
div = document.getElementById('connect_widget_like_button clearfix like_button_no_like');
div.style.background-color = some color
}
</script>
<body onload="init();">
I would use JavaScript in this way to guarantee that the browser firsts sets up the Facebook stuff, and then overrides it with the colors that you want.
Consider two things:
- It may be another element you need to work with (use the 'inspect element' option to see which may be the right ones.
- I was not able to test this. I copied your code into a file on my computer but it showed me nothing.
加载中,请稍侯......
精彩评论