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

четвер, 13 лютого 2014 р.

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

Продолжим работать над стандартным шаблоном от новой версии OcStore, не смотря на название статьи мы сделаем всего одно изменение, но зато очень большое – мы зафиксируем меню навигации.

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

0.1. Откроем админку: система > настройки > изменить > изображения:

0.2. Откроем админку: дополнения > модули > рекомендуемые > изменить:

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

1. зафиксируем панель навигации

Начнём:

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

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

вставим эти:

<div id="top">
<div
id="welcome">
<?php if (!$logged) { ?>
<?php
echo $text_welcome; ?>
<?php } else { ?>
<?php echo
$text_logged; ?>
<?php } ?>
</div>
<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>
<?php echo $cart;
?>
</div>

удалим эту строку (86):

<?php echo $cart; ?>

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

<div id="welcome">
<?php if
(!$logged) { ?>
<?php echo $text_welcome; ?>
<?php
} else { ?>
<?php echo $text_logged; ?>
<?php }
?>
</div>
<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>

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

#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;
}

вставим эти:

#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;
position: fixed;
top: 0;
width: 980px;
z-index:
99;
}
#top a {
color: #000;
text-decoration: none;
}
#top
a:hover {
color: #9999cc;
}
#top #cart {
position:
absolute;
top: 5px;
right: 0px;
z-index: 9;
min-width:
300px;
}
#top #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;
}
#top #cart
.heading h4 {
color: #333333;
font-size: 15px;
margin-top:
0px;
margin-bottom: 3px;
}
#top #cart .heading a {
color:
#000;
display: block;
}
#top #cart .heading a span
{
background: url('../image/arrow-down.png') 100% 50%
no-repeat;
padding-right: 15px;
margin-left:30px;
line-height:
30px;
}
#top #cart .content {
clear: both;
display:
none;
position: relative;
top: 8px;
padding:
5px;
min-height: 150px;
border: 1px solid
#EEEEEE;
border-radius: 7px;
background: #FFF;
}
#top
#cart.active .heading {
font-weight:700;
}
#top #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;
}
#top #cart .checkout {
text-align: right;
clear:
both;
}
#top #cart .empty {
padding-top: 50px;
text-align:
center;
}
#top #welcome {
position: absolute;
top:
10px;
left: 7px;
z-index: 5;
width: 298px;
text-align:
left;
}
#top #welcome a{}
#top .links {
position:
absolute;
left: 290px;
top: 10px;
font-size:
10px;
padding-right: 10px;
z-index:11;
}
#top .links a
{
float: left;
display: block;
padding: 0px 0px 0px
7px;
text-decoration: none;
font-size: 12px;
}
#top
.links a:hover {}
#top .links a + a {
margin-left:
8px;
border-left: 1px solid #CCC;
}

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

#header #cart {
position: absolute;
top:
5px;
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;
}

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

#header #welcome {
position: absolute;
top:
10px;
left: 7px;
z-index: 5;
width: 298px;
text-align:
left;
color: #999999;
}
#header #welcome a{
color:
#000;
}
#header .links {
position: absolute;
left:
290px;
top: 10px;
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;
}

прекрасно, теперь напишем комментарии, перед этими строками (92-103):

#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;
position: fixed;
top: 0;
width: 980px;
z-index:
99;
}

у нас есть комментарий:

/* header */

изменим его на эту строку:

/* top_menu */

а после этих строк (239-242):

#top .links a + a {
margin-left:
8px;
border-left: 1px solid #CCC;
}

напишем это:

/* end_top_menu */
/* header */

На сегодня всё, следите за новостями.

В интернет магазине АвтоСателлит всегда можно купить любые запчасти на китайские автомобили

OpenCart - модули, настройки, дизайнерские решения, шаблоны

четвер, 13 лютого 2014 р.