Question

我知道现在不可能将你自己的css链接到喜欢的盒子来定制它，但是这个问题似乎可以使用类似的盒子向导来完成。我想要做的就是将边框颜色更改为与我的页面背景相同，以便根本看不到边框。奇怪的是，看起来我放在边框区域的任何颜色都不会影响结果。这是我的网站：http://www.uplatindance.com/SDO/

这是嵌入代码

<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>

思想？

Answer 1

这是一个有趣的问题，因为我们无法访问控制HTML元素样式的CSS，因为它位于iframe内部。但是我们可以用这样的包含div来包装div：

<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>

fb-container div水平和垂直缩短2px，以切割边框。这是CSS：

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

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

这是一个jsfiddle现场演示：

http://jsfiddle.net/jK97V/

Answer 2

<fb:fan profile_id="your-page-id-here" stream="0" connections="21" width="403" height="360" data-header="false" show-border="false"></fb:fan>

删除边框的属性是show-border="false"，这是解决方案，因为它也适用于背景图像。更改边框颜色并不是一个严肃的解决方案，因为它只隐藏边框并且只能使用纯色背景。

Answer 3

将以下属性添加到fb-like-box div：

data-show-border="false"

我的意思是;

<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>

Answer 4

添加此属性对我有用：

data-border-color="#fff"

或暗示计划：

data-border-color="#333"

Answer 5

最干净的解决方案是在facebook like-box生成器中配置边框;

http://developers.facebook.com/docs/reference/plugins/like-box/#

切换“显示边框”复选框，并使用点击“获取代码”后生成的输出代码。

Answer 6

可能Facebook正在为该按钮提供自己的CSS。尝试使用JavaScript或您自己的CSS覆盖它。

在JavaScript中，我会执行以下操作：

<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();">

我会以这种方式使用JavaScript来保证浏览器第一次设置Facebook的内容，然后用你想要的颜色覆盖它。

考虑两件事：

这可能是您需要使用的另一个元素（使用'inspect element'选项查看哪些可能是正确的。
我无法测试这个。我将你的代码复制到我的计算机上的一个文件中，但它没有向我显示任何内容。

如何删除像盒子一样的边框

6 个答案: