CMS OpenCart 3.0 переделка стандартного шаблона (7 часть)

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

Комментарии

Меню навигации