OpenCart – меняем цвет меню

Cервис моментального приема платежей и партнерских программ Glopart.ru

Приветствую дорогие читатели моего блога. В этой короткой заметки я расскажу вам о том, как изменить цвет горизонтального меню вашего интернет-магазина на примере дефолтного OpenCart шаблона. На самом деле делается это легко и просто, да и особых знаний от вас не потребуется :).

Менюшка До и После изменений

Опен Карт меню

Редактируем таблицу стилей.

Отправляемся сюда: catalog/view/theme/default/stylesheet/stylesheet.css

Открываем stylesheet.css и находим закомментированную строчку /* menu */ . Ниже этой строчки прописаны все стили которые отвечают за внешний вид горизонтального меню.

Обратите внимание на 65 строчку

В качестве фона используется изображение в формате пнг с прозрачностью 80%

меню ocstore

опен карт меню

Прозрачность изображения делаем с помощью обычного фотошопа

opencart_menu_fotoshop

Ну вот как-то так :smile:


С уважением, Игорь Дулин




Понравился пост? Поделись с друзьями!

Метки записи

Источник: delphi-box.ru

Комментариев: 2

  1. Спасибо за статью! Была проблема с заменой фона меню второго уровня.

  2. Тут есть живые еще???

    Не получается
    Изменить фоновый цвет пунктов выпадающего меню при наведении курсора((

    Вот код:
    /* menu */
    #menu {
    background-color: #434343;
    background-image: linear-gradient(to bottom, #434343, #4c4c4c);
    background-repeat: repeat-x;
    border-color: #4c4c4c #4c4c4c #434343;
    min-height: 40px;
    }
    #menu .nav > li > a {
    color: #a0eb00;
    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:#313432;
    }
    #menu .dropdown-menu {
    padding-bottom: 0;
    opacity: 0.95;
    background-color: #e2e2e1;

    }
    #menu .dropdown-inner {
    display: table;
    }
    #menu .dropdown-inner ul {
    display: table-cell;

    }
    #menu .dropdown-inner a {
    min-width: 160px;
    display: block;
    padding: 3px 20px;
    clear: both;
    line-height: 20px;
    color: #434343;
    font-size: 14px;
    }
    #menu .dropdown-inner li a:hover {
    color: #a0eb00;

    }
    #menu .see-all {
    display: block;
    margin-top: 0.5em;
    border-top: 2px solid #DDD;
    padding: 3px 20px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 3px 3px;
    font-size: 12px;
    }
    #menu .see-all:hover, #menu .see-all:focus {
    text-decoration: none;
    color: #a0eb00;
    background-color: #434343;
    background-image: linear-gradient(to bottom, #434343, #303431);
    background-repeat: repeat-x;
    }
    #menu #category {
    float: left;
    padding-left: 15px;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
    color: #a0eb00;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    }
    #menu .btn-navbar {
    font-size: 15px;
    font-stretch: expanded;
    color: #a0eb00;
    padding: 2px 18px;
    float: right;
    background-color: #434343;
    background-image: linear-gradient(to bottom, #434343, #303431);
    background-repeat: repeat-x;
    border-color: #303431 #303431 #434343;
    }
    #menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
    color: #ffffff;
    background-color: #434343;
    }
    @media (min-width: 768px) {
    #menu .dropdown:hover .dropdown-menu {
    display: block;

    }
    }
    @media (max-width: 767px) {
    #menu {
    border-radius: 4px;
    }
    #menu div.dropdown-inner > ul.list-unstyled {
    display: block;
    }
    #menu div.dropdown-menu {
    margin-left: 0 !important;
    padding-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    }
    #menu .dropdown-inner {
    display: block;
    }
    #menu .dropdown-inner a {
    width: 100%;
    color: #fff;
    }
    #menu .dropdown-menu a:hover,
    #menu .dropdown-menu ul li a:hover {
    background: #e9462b;
    }
    #menu .see-all {
    margin-top: 0;
    border: none;
    border-radius: 0;
    color: #fff;
    }
    }

Оставить комментарий


;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

* Обязательные поля.
Ваш email не будет опубликован.