Всем привет, пришло время для новой статьи по переделке стандартного шаблона CMS OpenCart, в этой статье мы с вами выведем на главную страницу сайта текст о компании и доработаем оформление меню навигации и кнопок (в корзину, с сравнение, в закладки).
Список задач на сегодня:
1. Вставляем текст о компании
2. Правим CSS стили
Приступим:
1. Находим подходящее изображение, в моём случае это вот такая картинка:
(Изображение взято с сайта: ru.freepik.com)
1.2. Заходим на сайт через файловый менеджер (панель хостинга, filezilla и т.д.) и переходим: ../image/catalog/ и загружаем нашу картинку, запомним её название и разрешение.
P.S. — Вы можете просто открыть в админке любой товар, загрузить через него изображение на ftp и отменить редактирование товара.
1.3. Заходим в админку сайта и переходим: Модули / Расширения > Модули /Расширения > Текстовый блок — HTML > Добавить и заполняем:
- Название: О компании
- Статус: Включить
Текст переключаем на редактирование кода (иконка </>) и заполняем (текст просто для примера):
<div class="row company"> <div class="col-xs-12 col-sm-6 pull-left"> <img src="image/catalog/handshake-close-up-of-executives.jpg" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 pull-left"> <h3>О компании</h3> <hr> <p>Уважаемые посетители добро пожаловать на сайт Интернет магазина About-all.ru, в нашем каталоге вы найдёте огромное количество разнообразных товаров: телевизоры, ноутбуки, телефоны и т.д. от самых известных производителей: Samsung, LG, Huawei, Honor, на все товары мы предоставляем фирменную гарантию от 14 дней и гарантируем оригинальность товара (мы не торгуем подделками! Только оригинальный, сертифицированный товар.)</p> <p>Если у вас возникли вопросы вы можете задать их нам по телефону: +7 (999) 999-99-99 или электронной почте: help@about-all.ru</p> </div> </div>
Обязательно нажмём кнопку редактирование кода (</>) и только после этого нажимаем кнопку сохранить.
1.4. Теперь необходимо вывести наш блок на витрину интернет магазина, открываем админку и переходим: Дизайн > Макеты > Главная / Home > Верх страницы > Добавить > О компании > Сохранить.
P.S. — При необходимости вы можете поменять свои модули местами, я поменяю местами слайдер брендов и блок О компании.
1.5. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:
.company { font-size: 14px; padding: 20px 0; } .company img { filter: grayscale(100%); }
P.S. — Мы просто увеличили размер текста и наложили серый фильтр на фотографию, обязательно чистим все кеши и смотрим на результат.
2. Мне не очень нравятся выбранные для меню и кнопок цвета (я их выбрал просто для примера), поэтому немного изменим их и заодно увеличим размеры меню категорий, высоту кнопок боковой колонки (корзина, закладки, сравнение), уберём лишние отступы и т.д. Открываем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк ():
#menu { background: #3F51B5; min-height: 40px; } #menu .fa { font-size: 10px; color: #C5CAE9; } #menu a { font-weight: bold; text-transform: uppercase; } #menu .nav > li > a { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); padding: 10px 15px 10px 15px; min-height: 15px; background-color: transparent; } #menu .nav > li > a:hover, #menu .nav > li.open > a { background-color: rgba(0, 0, 0, 0.1); }
вставляем эти:
#menu { background: #1E88E5; min-height: 40px; } #menu .fa { font-size: 12px; color: #ffffff; padding-right: 5px; } #menu a { font-weight: bold; text-transform: uppercase; } #menu .collapse { padding: 0; margin: 0; } #menu .nav > li > a { color: #fff; padding: 15px 10px; min-height: 15px; } #menu .nav > li > a:hover, #menu .nav > li.open > a { background-color: rgba(0, 0, 0, 0.1); }
P.S. — на сайте примере я сделал на меню навигации градиентную заливку слева-направо, если вам интересно как именно, напишите в комментариях и в следующей статье я вставлю для вас CSS код.
вместо этих строк:
#cart > .btn { font-size: 12px; line-height: 18px; color: #FFF; background: #3f51b5; border-radius: 0; } #cart > .btn:hover { background: #F44336 } #cart.open > .btn { background-image: none; background-color: #FFFFFF; border: 1px solid #E6E6E6; color: #666; box-shadow: none; text-shadow: none; }
вставляем эти:
#cart > .btn { font-size: 12px; line-height: 18px; color: #FFF; background: #1e88e5; border-radius: 0; border: none; padding: 15px 0; } #cart > .btn:hover { background: #1976D2; } #cart.open > .btn { background-image: none; background-color: #FFFFFF; border: 1px solid #E6E6E6; color: #666; box-shadow: none; text-shadow: none; }
а вместо этих строк:
.head-button .hicon a { background: #3f51b5; color: #fff; } .head-button .hicon a:hover { background: #F44336; }
вставим эти:
.head-button .hicon a { background: #1e88e5; padding: 15px; color: #fff; } .head-button .hicon a:hover { background: #1976D2; }
Чистим все кеши и смотрим результат:
На этом всё, вступайте в нашу группу в ВК и следите за выходом новых материалов.
Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru