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

Всем привет, долгое время у нас был перерыв с выходом новых статей по Cms OpenCart, но сейчас у меня появилось свободное время и я решил выпустить несколько новых статей. В этой статье мы с вами поработаем над CSS стилями нашего шаблона, переделаем оформление кнопок В корзину, Сравнение и Закладки (плавающие кнопки в правой части нашего сайта), немного отредактируем стили блока наших преимуществ и удалим лишнее из подвала нашего сайта.

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

1. Работаем со стилями кнопок боковой колонки (Корзина, Закладки, Сравнение)

2. Работаем со стилями блока преимуществ

3. Работаем с подвалом сайта

Приступим:

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

.head-button .hicon {
    margin-bottom: 2px;
}
.head-button .hicon a {
    background: #3f51b5;
    color: #fff;
}
.head-button .hicon a:hover {
    background: #F44336;
}

При желании кнопки можно увеличить в размерах (к примеру по высоте), перекрасить, разделить иконку с счётчиком (количество товаров будет под иконкой, а не сбоку) и т.д. Если вам это нужно — напишите в комментариях.

Теперь подкорректируем внешний вид кнопки в корзину, вместо этих строк (152-170):

#cart {
    margin-bottom: 10px;
}
#cart > .btn {
    font-size: 12px;
    line-height: 18px;
    color: #FFF;
}
#cart.open > .btn {
    background-image: none;
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
    color: #666;
    box-shadow: none;
    text-shadow: none;
}
#cart.open > .btn:hover {
    color: #444;
}

вставим эти:

#cart {
    margin-bottom: 2px;
}
#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.open > .btn:hover {
    color: #444;
}

Отлично, переходим к следующему шагу.

2. Возвращаемся к файлу ../catalog/view/theme/default/stylesheet/stylesheet.css и добавляем в конец файла эти строки:

.preim .product-layout img {
    padding-top: 10px;
}
.preim .product-layout .caption {
    min-height: 120px;
}
.preim .product-layout .caption h4 {
    text-align: center;
}

Отлично, карточки преимуществ стали немного компактнее и лучше смотрятся как на больших экранах так и на мобильных устройствах.

3. Откроем файл ../catalog/language/ru-ru/common/footer.php и вместо этой строки ():

$_['text_powered']      = 'Работает на <a href="http://opencart-russia.ru">OpenCart "Русская сборка"</a><br /> %s &copy; %s';

вставляем эту:

$_['text_powered']      = '%s © %s';

Чистим все кеши и смотрим результат:

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

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