Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

1

Изменение И Редактирование Социальных Иконок

Автор Stas_Y, 19 июля 2015 20:55

Авторизуйтесь для ответа в теме

Сообщений в теме: 10

#1 Stas_Y

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

Пользователи
548 сообщений

Отправлено 19 Июль 2015 - 20:55

Подскажите, как привязать к социальным иконкам свои ссылки? Как заменить значки иконок на свои?

Наверх

#2 RayLi

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

Модераторы
2 864 сообщений

Отправлено 20 Июль 2015 - 11:05

Stas_Y (19 Июль 2015 - 20:55) писал:

Подскажите, как привязать к социальным иконкам свои ссылки? Как заменить значки иконок на свои?

Здравствуйте.
Чтобы привязать вам ссылки на социальные иконки к соответствующим значкам на вашем сайте - вам нужно найти следующий код, в бэк-офисе вашего интернет-магазина, в разделе Сайт -> Редактор шаблонов, в шаблоне html :

			<!-- END: Logo -->
			<div class="header-right col-xs-8">
			  <div class="header-right-inner">
				<ul class="connect-us">
				  <li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="#" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="#" class="fa fa-vk"></a></li>
				</ul>
				<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
				  <div class="form-search">
					<input id="search" type="text" name="q" value="" class="inputText search-string" placeholder="Поиск по магазину...">
					<button type="submit" title="Искать" class="button search-submit"></button>
				  </div>
				</form>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	  <!-- /END Основная часть Шапки -->

И заменить в нём данные символы # на ссылки к нужным вам страницам социальных сетей.
Проверьте, пожалуйста.

Наверх

#3 Stas_Y

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

Пользователи
548 сообщений

Отправлено 20 Июль 2015 - 11:52

А как поменять сами иконки (картинки) на свои?

Наверх

#4 Vaccina

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

Модераторы
24 353 сообщений

Отправлено 21 Июль 2015 - 02:32

Блок:

<ul class="connect-us">
								  <li><a href="#" class="fa fa-facebook"></a></li>
								  <li><a href="#" class="fa fa-twitter"></a></li>
								  <li><a href="#" class="fa fa-youtube"></a></li>
								  <li><a href="#" class="fa fa-vk"></a></li>
								</ul>

замените на:

<ul class="connect-us">
								  <li><a href="#" class="fa"><img src="ссылка на иконку" alt="" /></a></li>
								  <li><a href="#" class="fa"><img src="ссылка на иконку" alt="" /></a></li>
								  <li><a href="#" class="fa"><img src="ссылка на иконку" alt="" /></a></li>
								  <li><a href="#" class="fa"><img src="ссылка на иконку" alt="" /></a></li>
								</ul>

Наверх

#5 Stas_Y

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

Пользователи
548 сообщений

Отправлено 21 Июль 2015 - 18:38

Подскажите а как добавить инстаграмм?

Наверх

#6 Danil

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

Пользователи
4 645 сообщений

Отправлено 21 Июль 2015 - 19:33

Stas_Y (21 Июль 2015 - 18:38) писал:

Подскажите а как добавить инстаграмм?

В шаблоне html айдите код

				 <li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="#" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="#" class="fa fa-vk"></a></li>

и замените на

				 <li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="#" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="#" class="fa fa-vk"></a></li>
				  <li><a href="#" class="fa fa-instagram"></a></li>

В main.css найдите код


.fa-facebook:before {content: "\f09";}
.fa-twitter:before {content: "\f099";}
.fa-youtube:before {content: "\f167";}
.fa-vk:before {content: "\f189";}

и замените на


.fa-facebook:before {content: "\f09";}
.fa-twitter:before {content: "\f099";}
.fa-youtube:before {content: "\f167";}
.fa-vk:before {content: "\f189";}
.fa-instagram {content: "\f16d";}

Так же найдите

#header .header-right .header-right-inner .connect-us li a.fa-vk:hover {border-color: #537599;color: #537599;}

и замените на

#header .header-right .header-right-inner .connect-us li a.fa-vk:hover {border-color: #537599;color: #537599;}
#header .header-right .header-right-inner .connect-us li a.fa-instagram:hover {border-color: Ваш цвет;color: Ваш цвет;}

Наверх

#7 Stas_Y

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

Пользователи
548 сообщений

Отправлено 21 Июль 2015 - 19:47

Подредактировать значки чтобы круги не было видно?!

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

Наверх

#8 Vaccina

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

Модераторы
24 353 сообщений

Отправлено 22 Июль 2015 - 04:22

В main.css найдите:

#header .header-right .header-right-inner .connect-us li a {
  border: 1px solid #dfdfdf;
  border-radius: 100%;
  color: #c9c9c9;
  display: inline-block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
}

замените на:

#header .header-right .header-right-inner .connect-us li a {
  border: 1px solid #dfdfdf;
  border-radius: 100%;
  color: #c9c9c9;
  display: inline-block;
  font-size: 20px;
  height: 40px;
  text-align: center;
  width: 40px;
}

Наверх

#9 era-saitov.ru

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

Пользователи
19 сообщений

Отправлено 06 Февраль 2017 - 05:01

Здравствуйте! Как изменить иконки соц сетей внизу сайта на совершенно другие значки? (App store, Play market, Visa и т.д.) Где их можно заменить и как загрузить? Спасибо!
Аккаунт SL 386608

Наверх

#10 Mr.Nito

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

Модераторы
1 364 сообщений

Отправлено 06 Февраль 2017 - 09:35

era-saitov.ru (06 Февраль 2017 - 05:01) писал:

Здравствуйте! Как изменить иконки соц сетей внизу сайта на совершенно другие значки? (App store, Play market, Visa и т.д.) Где их можно заменить и как загрузить? Спасибо!
Аккаунт SL 386608

Здравствуйте.
Загрузите значки в разделе Сайт - Редактор шаблонов - Добавить файлы.
В шаблоне HTML удалим стандартные значки заменив:

			 <ul class="link-follow">
			 <li><a class="googleplay fa fa-facebook" href="#" title="Google Play"></a></li>
			 <li><a class="appstore fa fa-twitter" href="#" title="App Store"></a></li>
			 <li><a class="visa fa fa-odnoklassniki" href="#" title="Visa"></a></li>
			 <li><a class="vk fa fa-vk" href="#" title="VK"></a></li>
			 <li><a class="youtube fa fa-instagram" href="#" title="Instagram"></a></li>
			 </ul>

на

			 <ul class="link-follow">
			 <li><a class="googleplay fa" href="#" title="Google Play"></a></li>
			 <li><a class="appstore fa" href="#" title="App Store"></a></li>
			 <li><a class="visa fa" href="#" title="Visa"></a></li>
			 <li><a class="vk fa fa-vk" href="#" title="VK"></a></li>
			 <li><a class="youtube fa fa-instagram" href="#" title="Instagram"></a></li>
			 </ul>

В main.css укажем ссылки на иконки в блоке:

/*Иконки*/
.link-follow .googleplay {background: url(ссылка на иконку) no-repeat center; background-size: cover;}
.link-follow .appstore {background: url(ссылка на иконку) no-repeat center; background-size: cover;}
.link-follow .visa {background: url(ссылка на иконку) no-repeat center; background-size: cover;}

Наверх

#11 era-saitov.ru

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

Пользователи
19 сообщений

Отправлено 07 Февраль 2017 - 07:13

Mr.Nito (06 Февраль 2017 - 09:35) писал:

Здравствуйте.
Загрузите значки в разделе Сайт - Редактор шаблонов - Добавить файлы.
В шаблоне HTML удалим стандартные значки заменив:

			 <ul class="link-follow">
			 <li><a class="googleplay fa fa-facebook" href="#" title="Google Play"></a></li>
			 <li><a class="appstore fa fa-twitter" href="#" title="App Store"></a></li>
			 <li><a class="visa fa fa-odnoklassniki" href="#" title="Visa"></a></li>
			 <li><a class="vk fa fa-vk" href="#" title="VK"></a></li>
			 <li><a class="youtube fa fa-instagram" href="#" title="Instagram"></a></li>
			 </ul>

на

			 <ul class="link-follow">
			 <li><a class="googleplay fa" href="#" title="Google Play"></a></li>
			 <li><a class="appstore fa" href="#" title="App Store"></a></li>
			 <li><a class="visa fa" href="#" title="Visa"></a></li>
			 <li><a class="vk fa fa-vk" href="#" title="VK"></a></li>
			 <li><a class="youtube fa fa-instagram" href="#" title="Instagram"></a></li>
			 </ul>

В main.css укажем ссылки на иконки в блоке:

/*Иконки*/
.link-follow .googleplay {background: url(ссылка на иконку) no-repeat center; background-size: cover;}
.link-follow .appstore {background: url(ссылка на иконку) no-repeat center; background-size: cover;}
.link-follow .visa {background: url(ссылка на иконку) no-repeat center; background-size: cover;}

Спасибо большое!