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


Подвал: Добавить Вотсап В Контакты


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

#1 Andrew S.

Andrew S.

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

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 13 Май 2015 - 10:16

Добрый день!

Очень надо, помогите, пожалуйста, добавить WhatsApp в контакты!

WhatsApp-need.png

Это, наверное, иконка внутрь круга помещается?

whatsapp-16.png

Или скажите как сделать иконку, если я ошибся?

Как сделать надпись - видно на изображении справа. Можно текст просто вручную прописать! Желательно пока что не задействовать третий телефон, вдруг понадобится для третьего.

Только у меня шрифт на картинке чуть великоват получился. Всё чтобы было тем же шрифтом, что и есть вокруг везде.

Сообщение отредактировал Andrew S.: 13 Май 2015 - 10:29


#2 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 13 Май 2015 - 10:31

Просмотр сообщенияAndrew S. (13 Май 2015 - 10:16) писал:

Добрый день!

Очень надо, помогите, пожалуйста, добавить WhatsApp в контакты!

Прикрепленный файл WhatsApp-need.png

Это, наверное, иконка внутрь круга помещается?

Прикрепленный файл whatsapp-16.png

Или скажите как сделать иконку, если я ошибся?

Как сделать надпись - видно на изображении справа. Можно текст просто вручную прописать! Желательно пока что не задействовать третий телефон, вдруг понадобится для третьего.
Здравствуйте.
В шаблоне html найдите код
{% IF SETTINGS_STORE_SKYPE %}
и перед ним вставьте
										<li class="skype">
											<span class="WhatsAppImg"></span>
											<span class="skypeTxt">
												<span>WhatsApp:</span>
												<a href="WhatsApp:Номер">Номер</a>
											</span>
										</li>
Далее в конец main.css добавьте
.WhatsAppImg {
  display: inline-block;
  float: left;
  clear: both;
  width: 30px;
  height: 30px;
  margin-right: .6em;
  text-align: center;
  border: 1px solid #F7F7F7;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background-image: url('Ссылка на иконку');
  background-repeat: no-repeat;
  background-position: -2px -576px;
  -wibkit-border-radius: 15px;
  vertical-align: middle;
  padding-top: 3px;
}


#3 Andrew S.

Andrew S.

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

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 13 Май 2015 - 12:50

Просмотр сообщенияDanil (13 Май 2015 - 10:31) писал:

Здравствуйте.
В шаблоне html найдите код
{% IF SETTINGS_STORE_SKYPE %}
и перед ним вставьте
									 <li class="skype">
										 <span class="WhatsAppImg"></span>
										 <span class="skypeTxt">
											 <span>WhatsApp:</span>
											 <a href="WhatsApp:Номер">Номер</a>
										 </span>
									 </li>
Далее в конец main.css добавьте
.WhatsAppImg {
display: inline-block;
float: left;
clear: both;
width: 30px;
height: 30px;
margin-right: .6em;
text-align: center;
border: 1px solid #F7F7F7;
-moz-border-radius: 15px;
border-radius: 15px;
background-image: url('Ссылка на иконку');
background-repeat: no-repeat;
background-position: -2px -576px;
-wibkit-border-radius: 15px;
vertical-align: middle;
padding-top: 3px;
}

Спасибо! Только подскажите почему иконка не отображается. Может я неправильный размер иконки выбрал? Или ещё что.

#4 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 13 Май 2015 - 12:57

Просмотр сообщенияAndrew S. (13 Май 2015 - 12:50) писал:

Спасибо! Только подскажите почему иконка не отображается. Может я неправильный размер иконки выбрал? Или ещё что.
код
.WhatsAppImg {
  display: inline-block;
  float: left;
  clear: both;
  width: 30px;
  height: 30px;
  margin-right: .6em;
  text-align: center;
  border: 1px solid #F7F7F7;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background-image: url('http://st.technoimp.ru/6/1655/695/whatsapp-16.png');
  background-repeat: no-repeat;
background-position: -2px -576px;
  -wibkit-border-radius: 15px;
  vertical-align: middle;
  padding-top: 3px;
}
замените на
.WhatsAppImg {
  display: inline-block;
  float: left;
  clear: both;
  width: 30px;
  height: 30px;
  margin-right: .6em;
  text-align: center;
  border: 1px solid #F7F7F7;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background-image: url('http://st.technoimp.ru/6/1655/695/whatsapp-16.png');
  background-repeat: no-repeat;
  background-position: 5px 6px;
  -wibkit-border-radius: 15px;
  vertical-align: middle;
  padding-top: 3px;
}


#5 Ibra

Ibra

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 191 сообщений

Отправлено 18 Май 2016 - 18:24

Просмотр сообщенияDanil (13 Май 2015 - 12:57) писал:

код
.WhatsAppImg {
display: inline-block;
float: left;
clear: both;
width: 30px;
height: 30px;
margin-right: .6em;
text-align: center;
border: 1px solid #F7F7F7;
-moz-border-radius: 15px;
border-radius: 15px;
background-image: url('http://st.technoimp.ru/6/1655/695/whatsapp-16.png');
background-repeat: no-repeat;
background-position: -2px -576px;
-wibkit-border-radius: 15px;
vertical-align: middle;
padding-top: 3px;
}
замените на
.WhatsAppImg {
display: inline-block;
float: left;
clear: both;
width: 30px;
height: 30px;
margin-right: .6em;
text-align: center;
border: 1px solid #F7F7F7;
-moz-border-radius: 15px;
border-radius: 15px;
background-image: url('http://st.technoimp.ru/6/1655/695/whatsapp-16.png');
background-repeat: no-repeat;
background-position: 5px 6px;
-wibkit-border-radius: 15px;
vertical-align: middle;
padding-top: 3px;
}

скажите пожалуйста как сделать чтобы ватсап и емайл в шапке сайта не был кликабельный ,а чтобы был  как текст

#6 Firefly

Firefly

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

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

Отправлено 18 Май 2016 - 18:43

Просмотр сообщенияIbra (18 Май 2016 - 18:24) писал:

скажите пожалуйста как сделать чтобы ватсап и емайл в шапке сайта не был кликабельный ,а чтобы был  как текст

Здравствуйте.
Внес Вам поправки. Проверьте сейчас, пожалуйста.




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

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