Как поменять картинки социальных кнопок?

Question

Как поменять картинки социальных кнопок?

Разработчик

12 ноября 2015

1

"Картинки" социальных кнопок (речь идёт о "Рассказать друзьям") можно поменять только в том случае, если у вас выбран сервис соцаильных кнопок: собственные. Только в данном случае вы имеете контроль над ними.

Теперь о том почему "картинки" в кавычках.
Потому что это не картинки, а шрифтовые иконки.

Если вы хотите поменять цвета данных иконок, то вам нужно прописать их в блок пользовательских стилей flatty.user_style. Ниже приведён css код, который вам нужно вставить в блок.

Цвета стандартные, когда вставите, меняйте на свои.

/* Кнопка VK */
.social-likes__widget_vkontakte { background:#587e9f; }
.social-likes__icon_vkontakte { color:#fff; }
/* Кнопка FB */
.social-likes__widget_facebook { background:#3d5b95; }
.social-likes__icon_facebook { color:#fff; }
/* Кнопка OK */
.social-likes__widget_odnoklassniki { background:#f59310; }
.social-likes__icon_odnoklassniki { color: #fff; }
/* Кнопка TW */
.social-likes__widget_twitter { background:#24aadd; }
.social-likes__icon_twitter { color:#fff; }
/* Кнопка G+ */
.social-likes__widget_plusone { background:#d23e30; }
.social-likes__icon_plusone { color:#fff; }

3 ответа

Владимир Сергеев

Разработчик

Решение

17 ноября 2015 21:03

1

Добавьте в flatty.user_style код, затем замените на свои цвета

.social a.ivk {
	color: #bbc7d3;
}
.social a.ivk:hover {
	color: #4C6E92;
}

.social a.ifb {
	color: #a2b4db;
}
.social a.ifb:hover {
	color: #4E69A2;
}

.social a.iok {
	color: #fed496;
}
.social a.iok:hover {
	color: #F79400;
}

.social a.itw {
	color: #a9d6f8;
}
.social a.itw:hover {
	color: #309ced;
}

.social a.iin {
	color: #e7dbce;
}
.social a.iin:hover {
	color: #b69c7d;
}

.social a.iyt {
	color: #f7b6b5;
}
.social a.iyt:hover {
	color: #bf1916;
}

.social a.ipi {
	color: #f79ea6;
}
.social a.ipi:hover {
	color: #9c0614;
}

.social a.igp {
	color: #ec9188;
}
.social a.igp:hover {
	color: #c22e20;
}

.social a.irss {
	color: #facba3;
}
.social a.irss:hover {
	color: #ef6f04;
}

ответить

Владимир Сергеев

Разработчик

Решение

28 июля 2016 22:47

1

Для кнопок "поделится" Instagram, к сожалению, добавить нельзя.
А в подвал ссылку на инстаграм в виде иконки добавить можно.
В теме для приложения сайт найдите файл footer.social.html.
В нём, внутрь блока <div class="social"> добавьте следующий код:
<a href="ссылка на инстаграм" class="tooltips" title="Мы в инстаграм" target="_blank" style="color: #F2445D"><i class="fa fa-instagram"></i></a>

ответить

Тюкин Владимир

Решение

1 августа 2016 13:46

1

Спасибо!!!

ответить