Всем привет, в ВК группе меня просили написать статью о добавлении фона на нашу витрину интернет магазина сделанного на OpenCart 2.3 (OcStore), раз просили — делаю.

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

  • 1. Подбираем фон и закидываем в папку image
  • 2. Добавляем CSS стили
  • 3. Правим header.tpl
  • 4. Добавляем CSS стили
  • 5. Правим header.tpl
  • 6. Правим CSS стили

Приступим:

1. Выберем любой фон для вашего сайта, вы можете сделать картинку в jpg формате размером 1920px x 1080px (или ещё большего размера – тут уж сами выбирайте) или сделать фон узкой полоской, к примеру в размере 2px x 1080px (и прописать в стилях клонирование фона по горизонтали).

Для примера я скачал с ru.freepik.com вот такой фон:

немного обработал его (вырезка лишнего, игра цветом и размером) и вот что у меня получилось:

1.2. Откроем папку ../catalog/view/theme/default/image/ и помещаем в неё наш фон.

(P.S.Запоминаем название нашего фона – оно нам понадобится чуть позже)

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

body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
width: 100%;
}

вставим эти:

body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
width: 100%;
background: url('../image/bckgr.jpg') fixed;
}

Мы просто прописали фоновое изображение и зафиксировали его, чтобы он не проматывался вместе с нашей страницей.

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

@media (max-width: 768px) {
body {
background: #ddd;
}
}

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

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

<header>
<div class="container">
<div class="row">
<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-sm-5"><?php echo $search; ?>
</div>
<div class="col-sm-3"><?php echo $cart; ?></div>
</div>
</div>
</header>
<?php if ($categories) { ?>
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<?php foreach ($categories as $category) { ?>
<?php if ($category['children']) { ?>
<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
<ul class="list-unstyled">
<?php foreach ($children as $child) { ?>
<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
</div>
<a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
</li>
<?php } else { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
</div>
</nav>
</div>
<?php } ?>

вставим эти:

<header>
<div class="container">
<div class="row">
<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-sm-5"><?php echo $search; ?>
</div>
<div class="col-sm-3"><?php echo $cart; ?></div>
</div>
</div>
<?php if ($categories) { ?>
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<?php foreach ($categories as $category) { ?>
<?php if ($category['children']) { ?>
<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
<ul class="list-unstyled">
<?php foreach ($children as $child) { ?>
<li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
</div>
<a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
</li>
<?php } else { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
</div>
</nav>
</div>
<?php } ?>
</header>

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

4. Вновь откроем ../catalog/view/theme/default/stylesheet/stylesheet.css и добавим в него такой код:

.container {
background: #fff;
}
footer .container {
background: #303030;
}
#top .container {
background: #eee;
}

Смотрим на сайт, у нас появилось пара косяков, необходимо поправить пару стилей, этим сейчас и займёмся, вместо этих строк (82-88):

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

вставим эти:

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

а вместо этих (313-319):

footer {
margin-top: 30px;
padding-top: 30px;
background-color: #303030;
border-top: 1px solid #ddd;
color: #e2e2e2;
}

вставим эти:

footer {
padding-top: 30px;
background-color: #303030;
border-top: 1px solid #ddd;
color: #e2e2e2;
}

5. Изменим структуру шапки, откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этих строк (50-78):

<nav id="top">
<div class="container">
<?php echo $currency; ?>
<?php echo $language; ?>
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>
<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 $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></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>
</ul>
</div>
</div>
</nav>
<header>

вставим эти:

<header>
<div class="container">
<nav id="top">
<?php echo $currency; ?>
<?php echo $language; ?>
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>
<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 $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></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>
</ul>
</div>
</nav>
</div>

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

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

вставим эти:

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

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

footer {
padding-top: 30px;
background-color: #303030;
border-top: 1px solid #ddd;
color: #e2e2e2;
}

вставим эти:

footer .container {
padding-top: 30px;
background-color: #303030;
border-top: 1px solid #ddd;
color: #e2e2e2;
}

Чистим все кеши (модификаторов, системы, изображений, браузера) и любуемся своим сайтом.

Результат:

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