Можно ли у социальных кнопок от Яндекса изменить фоновый цвет?

Question

[Юра]

Привет, всем, кто нить может подсказать, можно ли у социальных кнопок от Яндекса https://tech.yandex.ru/share/ изменить фоновый цвет, например по дефолту каждая кнопка имеет свой цвет, это не всегда сочетается с общим фоном сайта, можно ли задать для них один общий цвет - например background:rgba(0,0,0,0.5) - с сохранением счётчиков.

Answer 1

[Андрей Федоров]

Эти счетчики добавляются в DOM js кодом, после того как добавились, вам нужно своим js кодом перебить яндексовские стили. Каким конкретно элементам - смотрите в инспекторе браузера.

Comments

[tester_toster]

Не нужно ничего никакого js - что за костыль? Просто переопределите yandex стили в своем css, взяв за базу элемент на один уровень вложенности выше стандартных стилей yandex. Вставили иконки в свой блок с классом social-shares, а в css просто пошли .social-shares .ya-share {код} и.т.д.

[Юра]

Можно по подробней, размер кнопок я изменил, повернул сам блок на 90 градусов, развернул кнопки влево на 90 градусов, осталось только выровнять счётчики и изменить цвет.

/* Социальные кнопки */
.cocial-top { border:1px solid #DEDEDE; position:fixed; z-index:99; top:50%; right:30px; width:auto; height:auto; padding:7px 0 0 0; overflow:hidden; box-sizing:border-box; -o-transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg);}
.ya-share2__container_size_m .ya-share2__icon { height:26px!important; width:26px!important; background-size:26px 26px!important; -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); transform:rotate(-90deg);}
.ya-share2__counter_visible { display:block!important;}
.ya-share2__container_size_m .ya-share2__counter { border:1px solid #FFFFFF; font-size:13px!important; line-height:24px!important; padding:0 8px!important; float:right!important;}

[Андрей Федоров]

tester_toster, Проблема в том, что вам нужно контролировать процесс загрузки js кнопок и своего css. Так что внедрить стили во время - это не костыль, а совершенно нормально.

Answer 2

[Максим]

вот так ?
оригинал :

переделка

Comments

[Юра]

это как вам удалось яндекс закладки на синий поменять?

[Максим]

Юра, там сверху Андрей Федотов написал как это делается

Answer 3

[sincopa]

https://tech.yandex.ru/share/doc/dg/add-docpage/ - в документации все есть
data-bare - Признак того, что загрузка стилей отключена. Если добавить атрибут, соцсети будут отображаться в виде текстового вертикального списка.

И после пишешь все стили сам, все как тебе надо.

Comments

[Юра]

Работает только в Опера

[sincopa]

Юра, работает везде, проверенно ;)