OcStore 1.5.5.1.1 несколько улучшений (1 часть)

Сегодня я решил немного подкорректировать стандартный шаблон от OcStore 1.5.5.1.1. В этом уроке мы поработаем только над элементами которые выводятся на главной (и не только) странице.

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

• Изменим размер меню навигации
• Изменим размер шапки шаблона
• Отцентрируем карточки товара в модулях

Приступим:

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

#top {
height: 30px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

вставим эти:

#top {
height: 40px;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

(мы расширили верхнее меню с ссылками и убрали 1 пиксельную полоску сверху, она была лишней)

вместо этих строк (142-148):

#header #cart {
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
min-width: 300px;
}

вставим эти:

#header #cart {
position: absolute;
top: 5px;
right: 0px;
z-index: 9;
min-width: 300px;
}

(мы добавили корзине отступ сверху в 5 пикселей, а то картинка корзины была уродливо прижата к верхней панели браузера)

вместо этих строк (286-294):

#header #welcome {
position: absolute;
top: 7px;
left: 7px;
z-index: 5;
width: 298px;
text-align: left;
color: #999999;
}

вставим эти:

#header #welcome {
position: absolute;
top: 10px;
left: 7px;
z-index: 5;
width: 298px;
text-align: left;
color: #999999;
}

(мы опустили ссылки войти или зарегистрироваться на 3 пикселя ниже чем они были)

вместо этих строк (298-305):

#header .links {
position: absolute;
left: 290px;
top: 8px;
font-size: 10px;
padding-right: 10px;
z-index:11;
}

вставим эти:

#header .links {
position: absolute;
left: 290px;
top: 10px;
font-size: 10px;
padding-right: 10px;
z-index:11;
}

(мы опустили ссылки главная, закладки, корзина покупок, оформление покупок на 2 пикселя ниже)

результат:

Уже лучше, но всё равно выглядит не завершёно, будем исправлять, вместо этих строк (92-96):

#top {
height: 40px;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

вставим эти:

#top {
height: 40px;
border-bottom: 1px solid #DBDEE1;
border-left: 1px solid #DBDEE1;
border-right: 1px solid #DBDEE1;
border-radius: 0 0 5px 5px;
background: #F8F8F8;
}

(мы добавили 1 пиксельную полоску справа и слева от нашего меню, так-же мы закруглили нижние уголки блока)

результат:

Вместо этих строк (100-106):

#header {
height: 90px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
}

вставим эти:

#header {
height: 120px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
}

(мы увеличили размер шапки на 30 пикселей)

вместо этих строк (107-111):

#header #logo {
position: absolute;
top: 33px;
left: 15px;
}

вставим эти:

#header #logo {
position: absolute;
top: 55px;
left: 15px;
}

(мы опустили картинку-логотип чуть ниже, на 22 пикселя)

результат:

ну вот, совсем другое дело.

Мне нравится стандартный шаблон от OcStore, но ужасно раздражает некрасиво выглядящие модули (товары, изображения, цены и кнопка купить прижаты к левому краю):

вместо этих строк (666-668):

.box {
margin-bottom: 20px;
}

вставим эти:

.box {
margin-bottom: 20px;
text-align: center;
}

вместо этих строк (700-706):

.box-product > div {
width: 168px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}

вставим эти:

.box-product > div {
width: 168px;
display: inline-block;
vertical-align: top;
margin-right: 10px;
margin-right: 10px;
margin-bottom: 20px;
}

результат:

Запчасти на иномарки в ассортименте