CMS OpenCart 3.0 мы в соц. сетях (1 вариант)

Всем привет, в этой статье мы с вами займёмся выводом на главную страницу нашего интернет магазина на CMS OpenCart 3.0 кнопок-ссылок: Мы в социальных сетях.

Список задач на сегодня:

Подбираем иконки (иконочный шрифт)
Работаем с админкой магазина
Работаем с CSS стилями

Приступим:

1. Переходим на сайт https://fontawesome.com/v4.7.0/icons/ и подбираем иконки соц. сетей необходимых вам на главной странице вашего магазина, для примера я подобрал вот такие иконки:

<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-google-plus-square" aria-hidden="true"></i>
<i class="fa fa-odnoklassniki-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-vk" aria-hidden="true"></i>
<i class="fa fa-whatsapp" aria-hidden="true"></i>
<i class="fa fa-skype" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>

P.S. — я специально выбрал большее количество иконок чем мне нужно — чтобы показать вам CSS оформление каждой кнопки (из тех что вы можете использовать на своём сайте).

2. Заходим в админку и переходим: Модули / Расширения > Модули / Расширения > Текстовый блок — HTML > Добавить и заполняем:

Название модуля: Мы в социальных сетях
Заголовок: Мы в социальных сетях
Статус: Включено

Вкладку Текст переключаем в режим редактирования кода (Code View иконка </>) и вставляем эти строки:

<div class="social">
  <a href="ваша ссылка" class="facebook" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i> Мы в Facebook</a>
  <a href="ваша ссылка" class="google-plus" target="_blank"><i class="fa fa-google-plus-square" aria-hidden="true"></i> Google +</a>
  <a href="ваша ссылка" class="odnoklassniki" target="_blank"><i class="fa fa-odnoklassniki-square" aria-hidden="true"></i> Наши Одноклассники</a>
  <a href="ваша ссылка" class="twitter" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i> Наш Twitter</a>
  <a href="https://www.instagram.com/hruhru.87/" class="instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i> Наш Instagram</a>
  <a href="https://vk.com/moushe" class="vk" target="_blank"><i class="fa fa-vk" aria-hidden="true"></i> Мы в ВК</a>
  <a href="https://api.whatsapp.com/send?phone=79252062098" class="whatsapp" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i> 79252062098</a>
  <a href="skype:hruhru.87?call" class="skype" target="_blank"><i class="fa fa-skype" aria-hidden="true"></i> hruhru.87</a>
  <a href="ваша ссылка" class="youtube" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i> YouTube</a>
</div>

Повторно нажимаем кнопку CodeView (иконка </>) и только после этого нажимаем кнопку Сохранить.

Теперь переходим в админке: Дизайн > Макеты > Home > Редактировать > Верх страницы > Мы в социальных сетях > Добавить > Сохранить.

3. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки (782-796):

.social {
  text-align: center;
  padding-top: 10px;
}
.social a {
  border: 1px solid #000;
  border-radius: 3px;
  padding: 5px 10px;
  margin: 0 5px;
  color: #000;
}
.social a:hover {
  border: 1px solid #2196F3;
  color: #2196F3;
}

P.S. — все ссылки будут в едином стиле.

или эти (782-856):

.social {
  text-align: center;
  padding-top: 10px;
}
.social a {
  padding: 5px 10px;
  margin: 5px;
  border-radius: 3px;
  display: inline-block;
}
.social a:hover {
  color: #fff;
}
.facebook {
  border: 1px solid #425f9c;
  color: #425f9c;
}
.google-plus {
  border: 1px solid #dd4e41;
  color: #dd4e41;
}
.odnoklassniki {
  border: 1px solid #ee8208;
  color: #ee8208;
}
.twitter {
  border: 1px solid #006dbf;
  color: #006dbf;
}
.instagram {
  border: 1px solid #000;
  color: #000;
}
.vk {
  border: 1px solid #4a76a8;
  color: #4a76a8;
}
.whatsapp {
  border: 1px solid #1ebea5;
  color: #1ebea5;
}
.skype {
  border: 1px solid #0178ca;
  color: #0178ca;
}
.youtube {
  border: 1px solid #ff0000;
  color: #ff0000;
}
.facebook:hover {
  background: #425f9c;
}
.google-plus:hover {
  background: #dd4e41;
}
.odnoklassniki:hover {
  background: #ee8208;
}
.twitter:hover {
  background: #006dbf;
}
.instagram:hover {
  background: #000;
}
.vk:hover {
  background: #4a76a8;
}
.whatsapp:hover {
  background: #1ebea5;
}
.skype:hover {
  background: #0178ca;
}
.youtube:hover {
  background: #ff0000;
}

P.S. — все ссылки будут в индивидуальном дизайне.

На этом всё, вступайте в нашу группу в ВК и следите за выходом новых материалов.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru