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


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

соц сети

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

#1 mrsimon90

mrsimon90

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

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

Отправлено 18 Январь 2018 - 10:58

Здравствуйте! Хочу добавить кнопки соцсетей в шапку сайта (instagram, vk, facebook) на скрине показано где именно они должны располагаться. (красные квадратики, размеры примерные, на скрине размеры разные, но должны быть одинаковые) При нажатии конечно же должно переадресовывать на соц сеть. Шаблон рассвет, Аккаунт SL-404966

P.S. расстояние между кнопками такое же как между элементами меню шапки, цвет кнопок белый, если возможно как то сделать что бы при наведении курсора кнопка перекрашивалась в розовый (как в других элементах шапки) то отлично:) Спасибо!

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

  • Скрин соц сетей.jpg


#2 Firefly

Firefly

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

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

Отправлено 19 Январь 2018 - 10:05

Просмотр сообщенияmrsimon90 (18 Январь 2018 - 10:58) писал:

Здравствуйте! Хочу добавить кнопки соцсетей в шапку сайта (instagram, vk, facebook) на скрине показано где именно они должны располагаться. (красные квадратики, размеры примерные, на скрине размеры разные, но должны быть одинаковые) При нажатии конечно же должно переадресовывать на соц сеть. Шаблон рассвет, Аккаунт SL-404966

P.S. расстояние между кнопками такое же как между элементами меню шапки, цвет кнопок белый, если возможно как то сделать что бы при наведении курсора кнопка перекрашивалась в розовый (как в других элементах шапки) то отлично :) Спасибо!

Здравствуйте.
В шаблоне main.css добавил Вам код:
#custommenu .mainnav > li.social_top > a {width:40px;background:#fa6dad;color:#fff;text-align: center;}
#custommenu .mainnav > li.social_top > a:hover {background:#620337;}

А так же в шаблоне HTML добавил код:
			  <li class="social_top">
				<a href="#"><i class="fa fa-instagram"></i></a>
			  </li>
			  <li class="social_top">
				<a href="#"><i class="fa fa-vk"></i></a>
			  </li>
			  <li class="social_top">
				<a href="#"><i class="fa fa-facebook"></i></a>
			  </li>

Проверьте результат, пожалуйста.

#3 mrsimon90

mrsimon90

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

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

Отправлено 19 Январь 2018 - 10:19

Просмотр сообщенияFirefly (19 Январь 2018 - 10:05) писал:

Здравствуйте.
В шаблоне main.css добавил Вам код:
#custommenu .mainnav > li.social_top > a {width:40px;background:#fa6dad;color:#fff;text-align: center;}
#custommenu .mainnav > li.social_top > a:hover {background:#620337;}

А так же в шаблоне HTML добавил код:
			 <li class="social_top">
			 <a href="#"><i class="fa fa-instagram"></i></a>
			 </li>
			 <li class="social_top">
			 <a href="#"><i class="fa fa-vk"></i></a>
			 </li>
			 <li class="social_top">
			 <a href="#"><i class="fa fa-facebook"></i></a>
			 </li>

Проверьте результат, пожалуйста.
Я успел увидеть как кнопки были без розового фона и при наведении появлялась сверху полоска и менялся цвет, можно сделать так же, только что бы размер белых логотипов соц сетей был того же размера как сейчас с учетом розового фона кнопок?

#4 Firefly

Firefly

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

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

Отправлено 19 Январь 2018 - 10:44

Просмотр сообщенияmrsimon90 (19 Январь 2018 - 10:19) писал:

Я успел увидеть как кнопки были без розового фона и при наведении появлялась сверху полоска и менялся цвет, можно сделать так же, только что бы размер белых логотипов соц сетей был того же размера как сейчас с учетом розового фона кнопок?

Код в main.css:
#custommenu .mainnav > li.social_top > a {width:40px;background:#fa6dad;color:#fff;text-align: center;}
#custommenu .mainnav > li.social_top > a:hover {background:#620337;}

Поменял на:
#custommenu .mainnav > li.social_top > a {width:40px;color:#fff;text-align: center;}
#custommenu .mainnav > li.social_top > a:hover {color: #620337;}
#custommenu .mainnav > li.social_top > a i {font-size: 25px;vertical-align: middle;margin-top:-3px;}

Проверьте, пожалуйста, устроит Вас такой вариант?

#5 mrsimon90

mrsimon90

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

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

Отправлено 19 Январь 2018 - 10:47

Просмотр сообщенияFirefly (19 Январь 2018 - 10:44) писал:

Код в main.css:
#custommenu .mainnav > li.social_top > a {width:40px;background:#fa6dad;color:#fff;text-align: center;}
#custommenu .mainnav > li.social_top > a:hover {background:#620337;}

Поменял на:
#custommenu .mainnav > li.social_top > a {width:40px;color:#fff;text-align: center;}
#custommenu .mainnav > li.social_top > a:hover {color: #620337;}
#custommenu .mainnav > li.social_top > a i {font-size: 25px;vertical-align: middle;margin-top:-3px;}

Проверьте, пожалуйста, устроит Вас такой вариант?
Да, именно так и хотел! Спасибо огромное:) Скажите как теперь присвоить ссылки на соц сети и если я добавлю еще пункт меню, например "Новости" не собью ли я все что сейчас было сделано?

#6 Firefly

Firefly

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

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

Отправлено 19 Январь 2018 - 10:55

Просмотр сообщенияmrsimon90 (19 Январь 2018 - 10:47) писал:

Да, именно так и хотел! Спасибо огромное :) Скажите как теперь присвоить ссылки на соц сети и если я добавлю еще пункт меню, например "Новости" не собью ли я все что сейчас было сделано?

В добавленном коде:
			  <li class="social_top">
				<a href="#"><i class="fa fa-instagram"></i></a>
			  </li>
			  <li class="social_top">
				<a href="#"><i class="fa fa-vk"></i></a>
			  </li>
			  <li class="social_top">
				<a href="#"><i class="fa fa-facebook"></i></a>
			  </li>

Вместо # укажите Ваши ссылки на соцсети.
Новые пункты меню, если Вы их добавите, будут отображаться до соцсетей (слева).

#7 mrsimon90

mrsimon90

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

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

Отправлено 19 Январь 2018 - 10:57

Просмотр сообщенияFirefly (19 Январь 2018 - 10:55) писал:

В добавленном коде:
			 <li class="social_top">
			 <a href="#"><i class="fa fa-instagram"></i></a>
			 </li>
			 <li class="social_top">
			 <a href="#"><i class="fa fa-vk"></i></a>
			 </li>
			 <li class="social_top">
			 <a href="#"><i class="fa fa-facebook"></i></a>
			 </li>

Вместо # укажите Ваши ссылки на соцсети.
Новые пункты меню, если Вы их добавите, будут отображаться до соцсетей (слева).
Спасибо большое еще раз!

#8 mrsimon90

mrsimon90

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

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

Отправлено 19 Январь 2018 - 11:04

Просмотр сообщенияFirefly (19 Январь 2018 - 10:44) писал:

Код в main.css:
#custommenu .mainnav > li.social_top > a {width:40px;background:#fa6dad;color:#fff;text-align: center;}
#custommenu .mainnav > li.social_top > a:hover {background:#620337;}

Поменял на:
#custommenu .mainnav > li.social_top > a {width:40px;color:#fff;text-align: center;}
#custommenu .mainnav > li.social_top > a:hover {color: #620337;}
#custommenu .mainnav > li.social_top > a i {font-size: 25px;vertical-align: middle;margin-top:-3px;}

Проверьте, пожалуйста, устроит Вас такой вариант?
Приношу свои извинения, я пытался создать бэкап и все сбил... могу я попросить Вас повторить то что было сделано?

#9 Firefly

Firefly

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

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

Отправлено 19 Январь 2018 - 11:59

Просмотр сообщенияmrsimon90 (19 Январь 2018 - 11:04) писал:

Приношу свои извинения, я пытался создать бэкап и все сбил... могу я попросить Вас повторить то что было сделано?

Изменения Вам произвел и создал бэкап 19.01.2018 11:59:11

#10 mrsimon90

mrsimon90

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

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

Отправлено 19 Январь 2018 - 12:21

Просмотр сообщенияFirefly (19 Январь 2018 - 11:59) писал:

Изменения Вам произвел и создал бэкап 19.01.2018 11:59:11
Спасибо!

#11 mrsimon90

mrsimon90

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

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

Отправлено 24 Январь 2018 - 14:26

Просмотр сообщенияFirefly (19 Январь 2018 - 10:55) писал:

В добавленном коде:
			 <li class="social_top">
			 <a href="#"><i class="fa fa-instagram"></i></a>
			 </li>
			 <li class="social_top">
			 <a href="#"><i class="fa fa-vk"></i></a>
			 </li>
			 <li class="social_top">
			 <a href="#"><i class="fa fa-facebook"></i></a>
			 </li>

Вместо # укажите Ваши ссылки на соцсети.
Новые пункты меню, если Вы их добавите, будут отображаться до соцсетей (слева).
Добрый день! Сейчас на сайте изменился цвет букв в шапке, подскажите как изменить цвет "перекрашивания" иконок соц сетей на такой же как цвет остальных элементов шапки?

#12 Firefly

Firefly

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

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

Отправлено 24 Январь 2018 - 15:58

Просмотр сообщенияmrsimon90 (24 Январь 2018 - 14:26) писал:

Добрый день! Сейчас на сайте изменился цвет букв в шапке, подскажите как изменить цвет "перекрашивания" иконок соц сетей на такой же как цвет остальных элементов шапки?

Здравствуйте.
В шаблоне main.css найдите код:
#custommenu .mainnav > li.social_top > a:hover {color: #620337;}

Замените на:
#custommenu .mainnav > li.social_top > a:hover {color: #fa6dad;}


#13 mrsimon90

mrsimon90

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

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

Отправлено 24 Январь 2018 - 16:35

Просмотр сообщенияFirefly (24 Январь 2018 - 15:58) писал:

Здравствуйте.
В шаблоне main.css найдите код:
#custommenu .mainnav > li.social_top > a:hover {color: #620337;}

Замените на:
#custommenu .mainnav > li.social_top > a:hover {color: #fa6dad;}
Сделал, спасибо!

#14 urbandemon

urbandemon

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

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

Отправлено 01 Февраль 2018 - 22:34

Здравствуйте!
как заменить иконку твитера на инстаграм?

#15 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 02 Февраль 2018 - 06:53

Здравствуйте.

На данный момент у вас в подвале сайта нет иконки твитера.





Темы с аналогичным тегами соц сети

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

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