Opencart 2.x - Html Модуль (3 Часть) – Популярные Категории (2 Часть)

Тема в разделе "Модули и дополнения", создана пользователем admin, 15 ноя 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    1.581
    Симпатии:
    22.483
    Репутация:
    124
    Всем привет, в этой статье мы продолжим работать над нашими популярными категориям (которые мы создали в прошлой статье), как я вам и обещал в этой статье мы добавим категориям современный дизайн с градиентом и эффекты при наведении курсора мыши на карточку категории.

    OpenCart-20_thumb-3.jpg

    До:

    2016-11-15_112739.png

    После:

    2016-11-15_112753.png

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

    1. Работаем с админкой
    2. Работаем с css

    Приступим:

    1. Откроем админку:

    Дополнения –> Модули -> HTML Содержимое > Популярные категории –> Редактировать –> Исходный код и изменим весь код:

    Код:
    <div class="row">
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <a href="ссылка на категорию"><span>Компьютеры и комплектующие</span>
    <img src="/catalog/view/theme/default/image/sysblock.png">
    </a>
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <a href="ссылка на категорию"><span>Ноутбуки</span>
    <img src="/catalog/view/theme/default/image/laptop.png">
    </a>
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <a href="ссылка на категорию"><span>Наушники и гарнитуры</span>
    <img src="/catalog/view/theme/default/image/beats.png">
    </a>
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat">
    <a href="ссылка на категорию"><span>Игровые устройства</span>
    <img src="/catalog/view/theme/default/image/gamer.png">
    </a>
    </div>
    </div>
    
    </div>
    на этот:

    Код:
    <div class="row">
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat_1">
    <a href="ссылка на категорию"><span>Компьютеры и комплектующие</span>
    <img src="/catalog/view/theme/default/image/sysblock.png">
    </a>
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat_2">
    <a href="ссылка на категорию"><span>Ноутбуки</span>
    <img src="/catalog/view/theme/default/image/laptop.png">
    </a>
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat_3">
    <a href="ссылка на категорию"><span>Наушники и гарнитуры</span>
    <img src="/catalog/view/theme/default/image/beats.png">
    </a>
    </div>
    </div>
    
    <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="pop_cat_4">
    <a href="ссылка на категорию"><span>Игровые устройства</span>
    <img src="/catalog/view/theme/default/image/gamer.png">
    </a>
    </div>
    </div>
    
    </div>
    (P.S.Мы присвоили каждому блоку свой отдельный класс, чтобы присвоить каждому элементу свой css стиль)

    2. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк (759-776):

    Код:
    /* popular category */
    .pop_cat {
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px 0;
    border-radius: 3px;
    }
    .pop_cat:hover {
    border: 1px solid #23527c;
    }
    .pop_cat span {
    display: block;
    padding-bottom: 10px;
    }
    .pop_cat img {
    display: block;
    margin: 0 auto;
    }
    вставим эти:

    Код:
    /* popular category */
    .pop_cat_1, .pop_cat_2, .pop_cat_3, .pop_cat_4 {
    border: 1px solid #fff;
    text-align: center;
    padding: 10px 0;
    border-radius: 3px;
    min-height: 200px;
    }
    .pop_cat_1:hover, .pop_cat_2:hover, .pop_cat_3:hover, .pop_cat_4:hover {
    opacity: 0.9;
    }
    .pop_cat_1 span, .pop_cat_2 span, .pop_cat_3 span, .pop_cat_4 span {
    display: block;
    padding-bottom: 10px;
    color: #fff;
    }
    .pop_cat_1 {
    background: #FF5252;
    background-image: linear-gradient(to top,#FF5252 0%,#B71C1C 100%);
    }
    .pop_cat_2 {
    background: #2196F3;
    background-image: linear-gradient(to top,#2196F3 0%,#1A237E 100%);
    }
    .pop_cat_3 {
    background: #7E57C2;
    background-image: linear-gradient(to top,#7E57C2 0%,#311B92 100%);
    }
    .pop_cat_4 {
    background: #4CAF50;
    background-image: linear-gradient(to top,#4CAF50 0%,#33691E 100%);
    }
    .pop_cat_1 img, .pop_cat_2 img, .pop_cat_3 img, .pop_cat_4 img {
    display: block;
    margin: 0 auto;
    }
    .pop_cat_1:hover img, .pop_cat_2 img:hover, .pop_cat_3 img:hover, .pop_cat_4 img:hover {
    margin-top: 2px;
    position: relative;
    margin-bottom: 5px;
    }
    Результат:

    2016-11-15_112809.png

    На этом всё, надеюсь материал был вам полезен, следите за нашими новостями