Всем привет, в этой статье мы с вами займёмся выводом на главную страницу нашего интернет магазина на 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