Moushe.ru

Блог обо всём

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



В этой статье я расскажу вам как можно улучшить стандартный шаблон OcStore 1.5.5.1.2, многие удивляются почему я пишу только об этом шаблоне, очень просто – на мой взгляд он очень удобен в использовании, легко модифицируется и быстро работает. Конечно бывают и альтернативные, качественные шаблоны, но мне обычно встречается всякий трэш и ужас – код php и html перемешаны в самых разнообразных вариантах, половина кода выполняет не известные функции, часть кода закомментирована разработчиком, подключено огромное количество скриптов и стилей, плюс часто встречаются скрытые ссылки на сайт разработчика – всё это отталкивает меня от использования чужих шаблонов.

ocstore_15512_7

В последнее время всё больше интернет магазинов имеют зафиксированную в верхней части сайта шапку, поэтому я решил написать вам как это можно сделать в стандартном шаблоне OcStore 1.5.5.1.2. Плюс мы с вами спрячем меню категорий и настроим его появление при наведении курсором мыши на слово Категории – на мой взгляд это очень удобно, и очень просто делается.

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

  • Переделаем меню категорий
  • Добавим в верхнюю часть магазина новую панель и выведем в неё: Вход, валюты и языки
  • Изменим и зафиксируем шапку магазина

Пожалуй приступим.

1.1. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этих строк (88-118):

<div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>
</div>
<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><?php if ($category['active']) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>

<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>

вставим эти:

</div>
<div id="links">
<a href="<?php echo $home; ?>"><?php echo $text_home; ?></a>
<div id="my_category">Категории
<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><?php if ($category['active']) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>

<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
<a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a>
<a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a>
<a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a>
</div>

Мы объединили меню с ссылками и категории в одно целое, теперь нужно оформить эту конструкцию в красивый CSS код.

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

#header .links {
position: absolute;
left: 290px;
top: 8px;
font-size: 10px;
padding-right: 10px;
z-index:11;
}
#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 7px;
color: #000;
text-decoration: underline;
font-size: 12px;
}
#header .links a:hover {
text-decoration: none;
}
#header .links a + a {
margin-left: 8px;
border-left: 1px solid #CCC;
}
/* menu */
#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 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#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, #menu > ul > li > a.active {
background: #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#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;
}

вставим эти:

#links {
background: #585858;
padding: 10px 0;
color: #fff;
font: 14px Arial;
z-index:11;
margin-bottom: 15px;
}
#links a {
color: #fff;
font: 14px Arial;
text-decoration: none;
padding: 10px;
}
#links a:hover {
background: #fff;
color: #000;
}
#my_category {
display: inline;
padding-bottom: 10px;
}
#my_category:hover #menu {
display: block;
position: absolute;
}
/* menu */
#menu {
margin-top: 10px;
display: none;
background: #ccc;
width: 980px;
z-index: 99;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}
#menu > ul > li > a {
color: #000;
text-decoration: none;
display: block;
z-index: 6;
position: relative;
}
#menu > ul > li > a:hover {
}
#menu > ul > li > div {
display: none;
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 {
padding: 0;
margin: 0;
}
#menu > ul > li ul > li {
padding: 5px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
color: #FFFFFF;
padding: 5px;
margin: 5px;
white-space: nowrap;
min-width: 120px;
}

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

Результат:

ocstore_15512_1ocstore_15512_2ocstore_15512_3

При желании стили можно немного изменить:

#links {
background: #585858;
padding: 10px 0;
color: #fff;
font: 14px Arial;
z-index:11;
margin-bottom: 15px;
}
#links a {
color: #fff;
font: 14px Arial;
text-decoration: none;
padding: 10px;
}
#links a:hover {
background: #fff;
color: #000;
}
#my_category {
display: inline;
padding-bottom: 10px;
}
#my_category:hover #menu {
display: block;
position: absolute;
}
/* menu */
#menu {
margin-top: 10px;
display: none;
background: #ccc;
width: 980px;
z-index: 999;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}
#menu > ul > li > a {
color: #000;
text-decoration: none;
display: block;
z-index: 6;
position: relative;
}
#menu > ul > li ul > li {
padding: 5px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
color: #FFFFFF;
padding: 5px;
margin: 5px;
white-space: nowrap;
min-width: 120px;
}

И получится такой результат:

ocstore_15512_4

То есть, при наведении курсора мыши на слово Категории у нас появляются категории со всеми открытыми подкатегориями, лично я предпочитаю именно этот вариант, хотя иногда вывожу только основные категории (подкатегории не отображаются в этом меню вообще никак, человек заходит в необходимую категорию и уже там выбирает подкатегорию по картинкам или боковому меню категорий, если кого то заинтересует как это сделать пишите в комментарии или в контакте и в следующей статье я напишу что и где необходимо изменить).

P.S. Цвет для фона я выбрал вырвиглазный, но вы сами можете его изменить, достаточно в этом куске CSS кода:

#menu {
margin-top: 10px;
display: none;
background: #ccc;
width: 980px;
z-index: 999;
}

изменить #ccc; на необходимый вам цвет, цель этой статьи научить вас переделывать категории, а не как правильно играться с Web цветами. Подмигивающая рожица

2.1. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и после этих строк (59-60):

</head>
<body>

вставим эти:

<div id="head_panel">
<div id="head_panel_center">
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>
<?php echo $language; ?>
<?php echo $currency; ?>
</div>
</div>

удалим эти строки (87-89):

<?php echo $language; ?>
<?php echo $currency; ?>

удалим эти строки (92-98):

<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>

удалим эти строки (76-77):

<div id="top">
</div>

Вместо этих строк (61-73):

<div id="head_panel">
<div id="head_panel_center">
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>
<?php echo $language; ?>
<?php echo $currency; ?>
</div>
</div>

вставим эти:

<div id="head_panel">
<div id="head_panel_center">
<div id="head_panel_left">
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>
</div>
<div id="head_panel_right">
<?php echo $language; ?>
<?php echo $currency; ?>
</div>
</div>
</div>

2.2. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и после этих строк (88-91):

#column-right + #content {
margin-right: 195px;
}
/* header */

вставим эти:

#head_panel {
width: 100%;
background: #111;
color: #fff;
height: 30px;
font: 14px Arial;
}
#head_panel_center {
width: 980px;
margin: 0 auto;
padding: 7px 0;
}
#head_panel_left {
float: left;
width: 70%;
}
#head_panel_right {
float: right;
width: 30%;
}
#head_panel a {
color: #fff;
text-decoration: none;
font: 11px Arial;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
#head_panel a:hover {
color: #ff9966;
}
#language {
width: 108px;
float: right;
}
#language img {
cursor: pointer;
margin-right: 5px;
padding-left:5px;
}
#currency {
width: 120px;
}
#currency a {
display: inline-block;
padding: 2px 4px;
margin-right: 2px;
margin-bottom: 2px;
}
#currency a b {
color: #ff9966;
text-decoration: none;
}

удалим эти строки (145-151):

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

(вместе с пустой строкой)

удалим эти строки (157-189):

#language {
position: absolute;
top: 59px;
left: 360px;
width: 108px;
color: #999;
line-height: 17px;
}
#language img {
cursor: pointer;
margin-right: 5px;
padding-left:5px;
}
#currency {
width: 120px;
position: absolute;
top: 56px;
left: 500px;
color: #999;
line-height: 17px;
}
#currency a {
display: inline-block;
padding: 2px 4px;
color: #999;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
}
#currency a b {
color: #000;
text-decoration: none;
}

удалим эти строки (301-312):

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

Хотите посмотреть результат? Я например очень, поэтому смотрим:

ocstore_15512_5ocstore_15512_6

Выглядит симпатично, не правда-ли? Полюбовались и хватит, пора работать дальше. Подмигивающая рожица

3.1. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этих строк (78-131):

<div id="container">
<div id="header">
<?php if ($logo) { ?>
<div id="logo">
<?php if ($home == $og_url) { ?>
<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" />
<?php } else { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a>
<?php } ?>
</div>
<?php } ?>
<?php echo $cart; ?>
<div id="search">
<div class="button-search"></div>
<input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
</div>
</div>
<div id="links">
<a href="<?php echo $home; ?>"><?php echo $text_home; ?></a>
<div id="my_category">Категории
<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><?php if ($category['active']) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>

<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
<a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a>
<a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a>
<a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a>
</div>

вставим эти:

<div id="header_fixed">
<div id="header">
<?php if ($logo) { ?>
<div id="logo">
<?php if ($home == $og_url) { ?>
<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" />
<?php } else { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a>
<?php } ?>
</div>
<?php } ?>
<?php echo $cart; ?>
<div id="search">
<div class="button-search"></div>
<input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
</div>
</div>
<div id="links">
<a href="<?php echo $home; ?>"><?php echo $text_home; ?></a>
<div id="my_category">Категории
<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><?php if ($category['active']) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>

<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
<a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a>
<a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a>
<a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a>
</div>
</div>
</div>
<div id="container">

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

#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#column-left {
float: left;
width: 180px;
}
#column-right {
float: right;
width: 180px;
}
#content {
min-height: 400px;
margin-bottom: 25px;
}
#column-left + #column-right + #content, #column-left + #content {
margin-left: 195px;
}
#column-right + #content {
margin-right: 195px;
}
/* header */
#head_panel {
width: 100%;
background: #111;
color: #fff;
height: 30px;
font: 14px Arial;
}
#head_panel_center {
width: 980px;
margin: 0 auto;
padding: 7px 0;
}
#head_panel_left {
float: left;
width: 70%;
}
#head_panel_right {
float: right;
width: 30%;
}
#head_panel a {
color: #fff;
text-decoration: none;
font: 11px Arial;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
#head_panel a:hover {
color: #ff9966;
}
#language {
width: 108px;
float: right;
}
#language img {
cursor: pointer;
margin-right: 5px;
padding-left:5px;
}
#currency {
width: 120px;
}
#currency a {
display: inline-block;
padding: 2px 4px;
margin-right: 2px;
margin-bottom: 2px;
}
#currency a b {
color: #ff9966;
text-decoration: none;
}
#header {
height: 90px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
}
#header #logo {
position: absolute;
top: 33px;
left: 15px;
}
#header #cart {
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 2px;
height: 30px;
padding-left: 14px;
padding-right: 14px;
background: url('../image/cart.png') 0% 50% no-repeat;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
color: #000;
text-decoration: none;
display: block;
}
#header #cart .heading a span {
background: url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
margin-left:30px;
line-height: 30px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: 2px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
#header #cart.active .heading {
font-weight:700;
}
#header #cart.active .content {
display: block;
}
.mini-cart-info table {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
.mini-cart-info td {
color: #000;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
width: 1px;
}
.mini-cart-info .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
.mini-cart-info .name small {
color: #666;
}
.mini-cart-info .quantity {
text-align: right;
}
.mini-cart-info td.total {
text-align: right;
}
.mini-cart-info .remove {
text-align: right;
}
.mini-cart-info .remove img {
cursor: pointer;
}
.mini-cart-total {
text-align: right;
}
.mini-cart-total table {
border-collapse: collapse;
display: inline-block;
margin-bottom: 5px;
}
.mini-cart-total td {
color: #000;
padding: 4px;
}
#header #cart .checkout {
text-align: right;
clear: both;
}
#header #cart .empty {
padding-top: 50px;
text-align: center;
}
#header #search {
position: absolute;
top: 55px;
right: 0px;
width: 298px;
z-index: 7;
}
#header .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #CCCCCC;
cursor: pointer;
}
#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 262px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 0px #F0F0F0;
-moz-box-shadow: 0px 2px 0px #F0F0F0;
box-shadow: 0px 2px 0px #F0F0F0;
}
#links {
background: #585858;
padding: 10px 0;
color: #fff;
font: 14px Arial;
z-index:11;
margin-bottom: 15px;
}
#links a {
color: #fff;
font: 14px Arial;
text-decoration: none;
padding: 10px;
}
#links a:hover {
background: #fff;
color: #000;
}
#my_category {
display: inline;
padding-bottom: 10px;
}
#my_category:hover #menu {
display: block;
position: absolute;
}

вставим эти:

#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
padding-top: 180px;
}
#column-left {
float: left;
width: 180px;
}
#column-right {
float: right;
width: 180px;
}
#content {
min-height: 400px;
margin-bottom: 25px;
}
#column-left + #column-right + #content, #column-left + #content {
margin-left: 195px;
}
#column-right + #content {
margin-right: 195px;
}
/* header */
#head_panel {
width: 100%;
background: #111;
color: #fff;
height: 30px;
font: 14px Arial;
z-index: 99;
position: absolute;
}
#head_panel_center {
width: 980px;
margin: 0 auto;
padding: 7px 0;
}
#head_panel_left {
float: left;
width: 70%;
}
#head_panel_right {
float: right;
width: 30%;
}
#head_panel a {
color: #fff;
text-decoration: none;
font: 11px Arial;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
#head_panel a:hover {
color: #ff9966;
}
#language {
width: 108px;
float: right;
}
#language img {
cursor: pointer;
margin-right: 5px;
padding-left:5px;
}
#currency {
width: 120px;
}
#currency a {
display: inline-block;
padding: 2px 4px;
margin-right: 2px;
margin-bottom: 2px;
}
#currency a b {
color: #ff9966;
text-decoration: none;
}
#header_fixed {
position: fixed;
top: 0;
z-index: 50;
width: 100%;
background: #fff;
}
#header {
height: 140px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 980px;
}
#header #logo {
position: absolute;
top: 33px;
left: 15px;
}
#header #cart {
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 2px;
height: 30px;
padding-left: 14px;
padding-right: 14px;
background: url('../image/cart.png') 0% 50% no-repeat;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
color: #000;
text-decoration: none;
display: block;
}
#header #cart .heading a span {
background: url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
margin-left:30px;
line-height: 30px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: 2px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
#header #cart.active .heading {
font-weight:700;
}
#header #cart.active .content {
display: block;
}
.mini-cart-info table {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
.mini-cart-info td {
color: #000;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
width: 1px;
}
.mini-cart-info .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
.mini-cart-info .name small {
color: #666;
}
.mini-cart-info .quantity {
text-align: right;
}
.mini-cart-info td.total {
text-align: right;
}
.mini-cart-info .remove {
text-align: right;
}
.mini-cart-info .remove img {
cursor: pointer;
}
.mini-cart-total {
text-align: right;
}
.mini-cart-total table {
border-collapse: collapse;
display: inline-block;
margin-bottom: 5px;
}
.mini-cart-total td {
color: #000;
padding: 4px;
}
#header #cart .checkout {
text-align: right;
clear: both;
}
#header #cart .empty {
padding-top: 50px;
text-align: center;
}
#header #search {
position: absolute;
top: 55px;
right: 0px;
width: 298px;
z-index: 7;
}
#header .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #CCCCCC;
cursor: pointer;
}
#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 262px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 0px #F0F0F0;
-moz-box-shadow: 0px 2px 0px #F0F0F0;
box-shadow: 0px 2px 0px #F0F0F0;
}
#links {
width: 980px;
margin-left: auto;
margin-right: auto;
background: #585858;
padding: 10px 0;
color: #fff;
font: 14px Arial;
z-index:11;
}
#links a {
color: #fff;
font: 14px Arial;
text-decoration: none;
padding: 10px;
}
#links a:hover {
background: #fff;
color: #000;
}
#my_category {
display: inline;
padding-bottom: 10px;
}
#my_category:hover #menu {
display: block;
position: absolute;
}

теперь необходимо немного переместить корзину, вместо этих строк (167-173):

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

вставим эти:

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

осталось подкорректировать кнопку категорий, добавить отступы, фон и поменять значок курсора мыши при наведении на слово Категории, вместо этих строк (331-334):

#my_category {
display: inline;
padding-bottom: 10px;
}

вставим эти:

#my_category {
display: inline;
padding-bottom: 10px;
padding: 10px;
cursor: pointer;
}
#my_category:hover {
background: #fff;
color: #000;
padding: 10px;
}

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

.slideshow .nivo-controlNav {
position: absolute;
right: 10px;
bottom: 5px;
text-align: center;
height: 22px;
z-index: 99;
}

вставим эти:

.slideshow .nivo-controlNav {
position: absolute;
right: 10px;
bottom: 5px;
text-align: center;
height: 22px;
z-index: 9;
}

это необходимо было сделать чтобы кружок выбора слайдов в баннерах не перекрывал элементы шапки.

Результат:

ocstore_15512_7

P.S. Если хотите материально поблагодарить автора за материалы блога или мотивировать меня на написание новых статей обратите внимание на нижний правый угол блога. Подмигивающая рожица

До следующих встреч, следите за новостями.

23 Комментария

  1. Роман

    17.11.2014 at 19:44

    Подскажите как сделать чтоб меню категорий не было свёрнута на главной странице т.е. чтобы всегда было в развернутом виде

  2. Дмитрий

    03.12.2014 at 01:45

    лучше бы объяснил как меню выводить многоуровневое, и какой код php что означает ,а стили это и так понятно без тебя

    • А может вы научитесь к незнакомым людям обращаться на вы? По php коду вам сможет помочь любой php программист, а не веб-дизайнер — я разбираюсь в html и css, по ним и пишу.

  3. Андрей

    04.12.2014 at 15:59

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

  4. Владислав, подскажите как найти, к примеру слово «Валюты» и т.д.,
    а именно хотел бы изменить знак рубля на другой, но его найти вообще не выходит, заранее спасибо за ответ.

    • В настройках админки вместо р. можно задать руб. чтобы присвоить символ вместо букв придётся помучиться с правкой php — я такой статьи не писал — не достаточно хорошо знаком с php.

  5. Владимир

    28.06.2015 at 12:19

    Владислав, спасибо за статьи!
    Хотелось бы получить подсказку по следующему——
    — При наведении курсора мыши на слово Категории появляются основные категории (подкатегории не отображаются в этом меню вообще никак).Как это сделать?

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

      28.06.2015 at 12:21

      Статью до конца смотрели?

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

  6. Владимир

    28.06.2015 at 14:16

    Делал все как в вашей статье,от начала до конца.Все работает.Затем сделал откат назад и стал подгонять под себя.И вот что получилось; При наведении курсора на Категорию,высвечиваются в две строчки главных категорий.Далее при наведение на главную категорию нижнего ряда можно в выпадающем меню выбрать под категорию (здесь все работает и только один баг просвечивается выпадающее меню и видно главную страницу)А вот с верхнего ряда невозможно перейти в под категорию ,просвечивает нижний ряд.
    Подскажите пожалуста где править.

  7. Владимир

    28.06.2015 at 17:44

    Сайт в разработке .Только на OpenServer на ноутбуке.

    • Тогда увы — не смогу подсказать. Когда на хостинг всё перенесёте пишите мне В контакте — посмотрю код.

  8. Владимир

    28.06.2015 at 18:01

    Спасибо!Скоро буду переносить.Напишу в контакте.

  9. Здравствуйте Владислав и все кто тут есть или бывает!
    Огромное спасибо Вам Владислав за Ваши работы!!! Но у меня возникла проблема — переделывал меню категорий по Вашему способу, который Вы выложили тут и возникла ошибка именно со словом «Категории» (она видна у Вас тут тоже т.к. написана по-русски). Но проблема в том, что найдя эту ошибку я никак не могу её исправить т.е. чтобы на сайте писало по-русски (пишет по-англ.). Пытался убрать с меню вовсе категории (т.к. меня больше устраивает когд они стоят в левой колонке) и тоже не получилось. В чём причина??? Вы можете помочь и объяснить как всё исправить, а лучше полностью удалить из меню.
    Зарание благодарен всем кто поможет!

  10. написал Вам на почту т.к. меня нету в контактах. Зарание благодарен!

  11. Здравствуйте. Хочу вывести главную страницу и статьи в меню вот что получается http://mers-zapchasti.ru/ что делаю не так?

    <a href="»>

    <a href="»>

  12. помогите решить эту задачу.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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