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


Мобильная версия:

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

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

  • 1. Работаем с файлом header.tpl
  • 2. Работаем с файлом stylesheet.css
  • 3. Работаем с файлом header.tpl (исправляем косяк шапки на средних разрешениях экрана)

Приступим:

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

<div class="col-sm-4">
<div id="logo">
<?php if ($logo) { ?>
<?php if ($home == $og_url) { ?>
<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
<?php } else { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } ?>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>

вставим эти:

<div class="col-xs-6 col-sm-4">
<div id="logo">
<?php if ($logo) { ?>
<?php if ($home == $og_url) { ?>
<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
<?php } else { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } ?>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>
<div class="col-xs-6 visible-xs phone-number">
<a href="tel:+79252062098"><i class="fa fa-phone" aria-hidden="true"></i> +7(925)206-20-98</a>
</div>

(P.S.Этим мы изменили мобильную версию шапки нашего магазина, теперь логотип занимает 50% ширины экрана, а на освободившееся место выведен номер телефона при щелчке на который будет происходить вызов)

Теперь поправим меню ссылок, так как им не задана ширина в мобильной версии они наезжают на логотип и на номер телефона, вместо этой строки (69):

<nav class="navbar navbar-default col-sm-8 menu-header">

вставим эту:

<nav class="navbar navbar-default col-xs-12 col-sm-8 menu-header">

Чистим кеш модификаторов и любуемся результатом:

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

Делается это очень просто:

<div class="col-xs-12 col-sm-4">
<div id="logo">
<?php if ($logo) { ?>
<?php if ($home == $og_url) { ?>
<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
<?php } else { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } ?>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>
<div class="col-xs-12 visible-xs phone-number">
<a href="tel:+79252062098"><i class="fa fa-phone" aria-hidden="true"></i> +7(925)206-20-98</a>
</div>

Мне так больше нравится, так пожалуй и оставлю.

Телефон появился в мобильной версии сайта рядом с логотипом, но нам же нужен телефон и в полной версии сайта, но в другом месте, например после ссылок в меню навигации (Главная, О компании, Бренды, Контакты), там как раз есть пустое местечко.

Вместо этих строк (69-83):

<nav class="navbar navbar-default col-xs-12 col-sm-8 menu-header">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-span"><?php echo $text_menu_header; ?></span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php echo $links_header; ?>
</ul>
</div>
</nav>

вставим эти:

<nav class="navbar navbar-default col-xs-12 col-sm-8 menu-header">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-span"><?php echo $text_menu_header; ?></span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<?php echo $links_header; ?>
</ul>
<div class="hidden-xs pull-right phone-full"><i class="fa fa-phone" aria-hidden="true"></i> +7(925)206-20-98</div>
</div>
</nav>

На этом всё, переходим к правке css стилей.

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

.panel-links .dropdown-menu li a {
width: 100%;
padding: 10px 0;
}
.panel-links .dropdown-menu li a:hover {
background: #1976D2;
}
.phone-full {
font-size: 14px;
padding-top: 12px;
}
.phone-number {
margin: 10px auto;
text-align: center;
}
@media (max-width: 768px) {
#logo img {
margin: 0 auto !important;
}
}

Этим мы исправим пару косяков.

3. Повторно вернёмся к файлу ../catalog/view/theme/default/template/common/header.tpl и вместо этих строк (53-65):

<div class="col-xs-12 col-sm-4">
<div id="logo">
<?php if ($logo) { ?>
<?php if ($home == $og_url) { ?>
<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
<?php } else { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } ?>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>

вставим эти:

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div id="logo">
<?php if ($logo) { ?>
<?php if ($home == $og_url) { ?>
<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
<?php } else { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } ?>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>

а вместо этой строки (69):

<nav class="navbar navbar-default col-xs-12 col-sm-8 menu-header">

вставим эту:

<nav class="navbar navbar-default col-xs-12 col-sm-12 col-md-8 col-lg-8 menu-header">

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

Результат наших трудов:

 

 

 

Средние экраны:

Мобильная версия:

 

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