Всем привет, пришло время для новой статьи по переделке стандартного шаблона 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
