Moushe.ru

Блог обо всём

OpenCart 1.5.3 делаем шаблон GreenTea (2 часть)



Продолжим создавать наш шаблон для OpenCart’а 1.5.3.

greenteagreentea 2

1. Откроем файл stylesheet.css (../catalog/view/theme/greentea/stylesheet) и изменим это (6-12):

body {
background-color: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

на это:

body {
background-color: #78a240;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

1.1 Изменим это (67-72):

#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

на это:

#container {
width: 980px;
background: #fff;
padding: 10px 10px 10px 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
text-align: left;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-khtml-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
}

1.2 Изменим это (327-340):

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}

на это:

#menu {
background: url('../image/navi_on.jpg');
border-left: 1px solid #78a240;
border-right: 1px solid #78a240;
height: 40px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
padding: 0px 5px;
}

1.3. Изменим эти строки (350-372):

#menu > ul > li:hover {
}
#menu > ul > li > a.active {
background: #000;
}
#menu > ul > li > a {
font-size: 13px;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
margin-bottom: 5px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a {
background: #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

на эти:

#menu a {
font-size: 13px;
color: #fff;
text-decoration: none;
display: block;
padding: 14px 10px 10px 14px;
margin-bottom: 5px;
}
#menu a:hover {
background: url('../image/navi_all.jpg');
color: #000;
}

1.4. Удалим эти строки (362-397):

#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}

2. Скопируем эти изображения в папку image (../catalog/view/theme/greentea/image):

navi_allnavi_on

На сегодня всё, до новых встреч. Следите за нашими новостями. Улыбка

10 Комментариев

  1. У меня не получилось — всё съехало почему-то. Если оставить строку line-height , где меняли #menu a, то нормально .
    Не знаю почему, но хорошо выводит страничку, если
    line-height: 1px;
    😉

  2. У меня тоже все съехало в право. и меню навигации не светится зеленым

  3. После того как сделал пункт 1.3 все съехало вправо

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      20.01.2013 at 21:35

      Ссылку на сайт

  4. Чтоб не съезжало в пункте 1.3 я оставил
    padding: 6px 10px 6px 10px;
    тогда кнопки ровно остаются, и не съезжают окна

    п.с
    спасибо автору за уроки

  5. А у меня по краям нет отступа зеленого фона:( почему где косяк???
    Сайт: http://lovis-fish.vv.si

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      21.02.2013 at 21:05

      Если вы имели ввиду линии справа и слева у вашей навигационной панели, то они есть — можете убедиться сами, изменив цвет правого и левого бордюра на чёрный.

  6. Виталий

    10.04.2013 at 09:18

    У меня что-то с меню не так. Подскажите что исправить: http://img-fotki.yandex.ru/get/4134/134287869.1/0_cbaae_117bd1a_L.png.jpg

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      10.04.2013 at 20:57

      Картинку скачайте снова, ваш браузер её криво скачал.

  7. Александр

    24.05.2013 at 00:46

    Спасибо Владислав, Ваши уроки для меня являются Букварем, по которым учусь читать html.
    В пункте 1,3
    #menu a:hover {
    background: url(‘../image/navi_all.jpg’);
    color: #000;
    ______________________________
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    строки см. выше, оставил, для того что бы кнопки меню были полукруглыми. Может кому понадобится, как и для меня.

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика