Перейти к содержимому


Кнопки Соцсетей


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4

#1 Светлана У.

Светлана У.

    Пользователь

  • Пользователи
  • PipPip
  • 37 сообщений
  • ГородСамара

Отправлено 20 Май 2017 - 18:07

Здравствуйте!
Подскажите, пожалуйста:
  • как можно изменить внешний вид кнопок соцсетей (например, скачать в интернете и загрузить на сайт- куда?)
  • убрать лишние кнопки соцсетей
  • сделать надпись "Мы в социальных сетях" и создать ссылку на конкретную группу в соцсети
  • на странице товара сделать ссылку "Поделиться" с кнопками соцсетей (как на картинке)
Спасибо большое заранее !

Аккаунт 408993

Прикрепленные изображения

  • 2017-05-20_18-01-41.png


#2 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 20 Май 2017 - 18:45

Просмотр сообщенияСветлана У. (20 Май 2017 - 18:07) писал:

Здравствуйте!
Подскажите, пожалуйста:
  • как можно изменить внешний вид кнопок соцсетей (например, скачать в интернете и загрузить на сайт- куда?)

  • убрать лишние кнопки соцсетей

  • сделать надпись "Мы в социальных сетях" и создать ссылку на конкретную группу в соцсети

  • на странице товара сделать ссылку "Поделиться" с кнопками соцсетей (как на картинке)
Спасибо большое заранее !

Аккаунт 408993


Здравствуйте.
1. Иконки соцсетей в подвале сайта выводятся с помощью шрифтов (сам значок )и оформления. Уточните, как именно Вы бы хотели изменить отображение, возможно нужно изменить заливку, увеличить в размерах или сделать границы без скругления.
2. В шаблоне HTML у Вас есть код:
			  <div class="social">
				<a href="https://www.facebook.com/" title="FaceBook.com" target="_blank"><span class="fa fa-facebook"></span></a>
				<a href="https://twitter.com/" title="Twitter.com" target="_blank"><span class="fa fa-twitter"></span></a>
				<a href="https://google.com/" title="Google Plus" target="_blank"><span class="fa fa-google-plus"></span></a>
				<a href="https://vk.com/" title="VK.com" target="_blank"><span class="fa fa-vk"></span></a>
				<a href="https://www.youtube.com/" title="YouTube.com" target="_blank"><span class="fa fa-youtube"></span></a>
			  </div>

Те социальные сети, что не нужны можно удалить построчно.
3. Ссылки на соцсети меняются в коде из предыдущего пункта. Например, для vk.com - нужно заменить в коде https://vk.com/ на свою ссылку.
4. В разделе Сайт - редактор шаблонов - шаблон Товар найдите код:
</div>
		<div class="clear"></div>
  </form>
  <!-- /END Форма карточки товара -->

Перед ним вставьте строку кода:
<div class="shareb1">Понравилось?</div>
<div class="shareb1">Поделись...</div>
<div class="shareb2">
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></div>
</div>

И в конце шаблона main.css добавьте код:
.shareb1, .shareb2 {display: inline-block;position: relative;vertical-align: middle;}
.shareb2 {margin-left:5px;}


#3 Светлана У.

Светлана У.

    Пользователь

  • Пользователи
  • PipPip
  • 37 сообщений
  • ГородСамара

Отправлено 20 Май 2017 - 19:56

Спасибо большое, очень удивилась такой оперативности!
  • Насчет пункта 1: насчет вида кнопок соцсететй - думаю, такие-же круглые только размер побольше и заливка разноцветная, как в карточке товаров;
  • по п. 3 - все сделала несколько раз (как на скриншоте), но почему-то каждый раз попадаю на несуществующую страницу (кэш чистила каждый раз)
2017-05-20_19-35-12.png
2017-05-20_19-36-57.png

Еще раз спасибо!

#4 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 20 Май 2017 - 20:06

Просмотр сообщенияСветлана У. (20 Май 2017 - 19:56) писал:

Спасибо большое, очень удивилась такой оперативности!
  • Насчет пункта 1: насчет вида кнопок соцсететй - думаю, такие-же круглые только размер побольше и заливка разноцветная, как в карточке товаров;
  • по п. 3 - все сделала несколько раз (как на скриншоте), но почему-то каждый раз попадаю на несуществующую страницу (кэш чистила каждый раз)
Прикрепленный файл 2017-05-20_19-35-12.png
Прикрепленный файл 2017-05-20_19-36-57.png

Еще раз спасибо!

В main.css найдите код:
#footer-middle .social {width: 226px;margin: 20px auto;}

Замените на:
#footer-middle .social {width: 82px;margin: 20px auto;}

После кода:
#footer-middle .social span {height:34px;width:34px;display:inline-block;border-radius:50%;border:1px solid #dddddd;line-height:34px;text-align:center;padding:0 10px;margin-right:10px;background:#ffffff;position:relative;}

Добавьте код:
#footer-middle .social span.fa-vk {background:#48729e;border:0;color:#fff;}
#footer-middle .social span.fa-facebook {background:#3b5998;border:0;color:#fff;}

В конце ссылки для vk уберите / и она заработает.

#5 Светлана У.

Светлана У.

    Пользователь

  • Пользователи
  • PipPip
  • 37 сообщений
  • ГородСамара

Отправлено 20 Май 2017 - 21:31

Большое спасибо! Все работает!

Просто в восторге от такой скорости, не ждала до завтра, а тут ответ через час пришел !




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных