Друзья, продолжаем работать над шапкой нашего интернет магазина, в этой статье мы хорошо поработаем над css стилями. Мы с вами оформим кнопку категорий, иконки закладок, сравнения товаров и личного кабинета.

Живой пример: http://about-all.ru

 

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

1. Работаем с файлом stylesheet.css

2. Работаем с файлом header.tpl

3. Работаем с файлом stylesheet.css

Приступим:

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

#top {
background-color: #EEEEEE;
border-bottom: 1px solid #e2e2e2;
padding: 4px 0px 3px 0;
margin: 0 0 20px 0;
min-height: 40px;
}
#top .container {
padding: 0 20px;
}

вставим эти:

#top {
background-color: #1976D2;
margin: 0 0 10px;
min-height: 40px;
}
#top .container {
padding: 10px 0;
}

вместо этих строк (93-124):

#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
text-shadow: none;
color: #ffffff;
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
}
#top .btn-link, #top-links li, #top-links a {
color: #888;
text-shadow: 0 1px 0 #FFF;
text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
color: #444;
}
#top-links .dropdown-menu a {
text-shadow: none;
}
#top-links .dropdown-menu a:hover {
color: #FFF;
}
#top .btn-link strong {
font-size: 14px;
line-height: 14px;
}
#top-links {
padding-top: 6px;
}
#top-links a + a {
margin-left: 15px;
}

вставим эти:

#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
text-shadow: none;
color: #607D8B;
background-color: #BBDEFB;
}
#top #form-currency .currency-select,
#top #form-language .language-select  {
color: #607D8B;
}
#top .btn-link, #top-links li, #top-links a {
color: #FAFAFA;
text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
color: #E0E0E0;
}
#top-links .dropdown-menu a {
text-shadow: none;
}
#top-links .dropdown-menu a:hover {
color: #FFF;
}
#top .btn-link strong {
font-size: 14px;
line-height: 14px;
}

2. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и удалим эти строки (57-72):

<li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right">
<?php if ($logged) { ?>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
<li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
<?php } else { ?>
<li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
<li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
<?php } ?>
</ul>
</li>
<li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>
<li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_checkout; ?></span></a></li>

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

<div class="col-sm-6 col-xs-12"><?php echo $search; ?></div>
<div class="col-sm-3 col-xs-12">
<a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $title_wishlist; ?>"><i class="fa fa-heart"></i> <span class="total"><?php echo $text_wishlist; ?></span></a>
<a href="<?php echo $compare; ?>" id="compare-total" title="<?php echo $title_compare; ?>"><i class="fa fa-exchange"></i> <span class="total"><?php echo $text_compare; ?></span></a>
<?php echo $cart; ?>
</div>

вставим эти:

<div class="col-sm-5 col-xs-12"><?php echo $search; ?></div>
<div class="col-sm-2 col-xs-12 panel-links">
<a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<?php if ($logged) { ?>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
<li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
<li><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>
<?php } else { ?>
<li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
<li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
<?php } ?>
</ul>
<a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $title_wishlist; ?>"><i class="fa fa-heart"></i> <span class="total"><?php echo $text_wishlist; ?></span></a>
<a href="<?php echo $compare; ?>" id="compare-total" title="<?php echo $title_compare; ?>"><i class="fa fa-exchange"></i> <span class="total"><?php echo $text_compare; ?></span></a>
</div>
<div class="col-sm-2 col-xs-12">
<?php echo $cart; ?>
</div>

3. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:

.category-header {
margin: 0 !important;
padding: 0;
}
.category-header .btn {
width: 100%;
background: #F5F5F5;
color: #000;
height: 40px;
border: none;
border-radius: 5px !important;
font-size: 16px;
}

(этим мы задали стили кнопке категорий)

ещё ниже добавим эти строки:

.panel-links a {
width: 32%;
height: 40px;
text-align: center;
display: inline-block;
}
.panel-links .fa:hover {
color: #F5F5F5;
}
.panel-links .fa {
font-size: 20px;
color: #fff;
padding-top: 10px;
}
.panel-links .total {
font-size: 14px;
position: absolute;
top: -5px;
padding-left: 10px;
color: #fff;
}
.panel-links .caret {
color: #fff;
}

(этим мы оформили иконки: личный кабинет, закладки, сравнение товаров)

Результат:

На сегодня всё, до новых встреч.