Как удалить границу как ящик

Я знаю, что теперь невозможно связать свой собственный css с подобным полем, чтобы настроить его, но эта проблема кажется, что это может быть выполнено с помощью мастера типа box. Все, что я хочу сделать, это изменить цвет рамки на то же, что и на фоне моей страницы, чтобы она вообще не была границей. Странно то, что кажется, что любой цвет, который я помещал в поле границы, вообще не влияет на результат. Вот мой сайт: 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="#" onclick="location.href='http://www.facebook.com/pages/Its-Salsa-Time/205870466141243'; return false;" data-width="260" data-height= "65" data-colorscheme="dark" data-show-faces="false" data-border-color="black" data-stream="false" data-header="false"></div>

Мысли?

Ответ 1

Это интересная проблема, потому что у нас нет доступа к CSS, управляющему стилем элементов HTML, потому что он внутри 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>

div fb-контейнера будет на 2 пикселя короче горизонтально и вертикально, чтобы вырезать границы. Здесь CSS:

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

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

И вот демо-версия jsfiddle:

http://jsfiddle.net/jK97V/

Ответ 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", и это решение, которое работает так же, как и с фоновыми изображениями. Изменение цвета границы не является серьезным решением, поскольку оно только скрывает границу и работает только с прочным фоном.

Ответ 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>

Ответ 4

Добавление этого атрибута сработало для меня:

data-border-color="#fff"

Или для темной схемы:

data-border-color="#333"

Ответ 5

Самое чистое решение состоит в том, чтобы настроить границу внутри самого генератора типа facebook,

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

Установите флажок "Показать границу" и используйте выходной код, сгенерированный после нажатия "Получить код".

Ответ 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, а затем переопределит его цветами, которые вы хотите.

Рассмотрим две вещи:

Это может быть еще один элемент, с которым вам нужно работать (используйте параметр "проверить элемент", чтобы увидеть, какие из них могут быть правильными.
Я не смог проверить это. Я скопировал ваш код в файл на моем компьютере, но ничего мне не показал.