Сегодня мы начнём создавать новый шаблон для OpenCart 1.4.9.

До:                                                      После:

12

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

1. Подготовка OpenCart’а  к новому шаблону.

2. Выбор шаблона.

3. Вырежем ссылки: Акции, Избранное, Контакты, Карта сайта.

4. Изменим и переместим поиск.

5. Переместим панель навигации.

6. Подкорректируем css.

7. Поработаем с картинками.

 

И так приступим:

1. Скопируем стандартный шаблон и дадим ему название WhiteCart.

2. Выберем наш новый шаблон в админ-панели.

3. Октрываем header.tpl и вырезаем этот код:

<div class="div3"><a href="<?php echo str_replace('&', '&amp;', $special); ?>" style="background-image: url('catalog/view/theme/default/image/special.png');"><?php echo $text_special; ?></a><a onclick="bookmark(document.location, '<?php echo addslashes($title); ?>');" style="background-image: url('catalog/view/theme/default/image/bookmark.png');"><?php echo $text_bookmark; ?></a><a href="<?php echo str_replace('&', '&amp;', $contact); ?>" style="background-image: url('catalog/view/theme/default/image/contact.png');"><?php echo $text_contact; ?></a><a href="<?php echo str_replace('&', '&amp;', $sitemap); ?>" style="background-image: url('catalog/view/theme/default/image/sitemap.png');"><?php echo $text_sitemap; ?></a></div>

4. Открываем header.tpl и изменим этот код:

<div class="div5">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<div id="search">
<div class="div8"><?php echo $entry_search; ?>&nbsp;</div>
<div class="div9">
<?php if ($keyword) { ?>
<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />
<?php } else { ?>
<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999;" />
<?php } ?>
<select id="filter_category_id">
<option value="0"><?php echo $text_category; ?></option>
<?php foreach ($categories as $category) { ?>
<?php if ($category['category_id'] == $category_id) { ?>
<option value="<?php echo $category['category_id']; ?>" selected="selected"><?php echo $category['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class="div10">&nbsp;&nbsp;<a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a> <a href="<?php echo str_replace('&', '&amp;', $advanced); ?>"><?php echo $text_advanced; ?></a></div>
</div>
</div>
</div>

на этот:

<div class="div5">
<div id="search">
<div class="div9">
<?php if ($keyword) { ?>
<input type="text" value="<?php echo $keyword; ?>" id="filter_keyword" />
<?php } else { ?>
<input type="text" value="<?php echo $text_keyword; ?>" id="filter_keyword" onclick="this.value = '';" onkeydown="this.style.color = '#000000'" style="color: #999;" />
<?php } ?>
<a onclick="moduleSearch();" class="button"><span><?php echo $button_go; ?></span></a></div>
</div>
</div>
</div>

вырезаем получившийся выше код и вставляем его под эти строки:

<div id="header">
<div class="div1">

5. Изменим этот код:

<div class="div4"><a href="<?php echo str_replace('&', '&amp;', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
<?php if (!$logged) { ?>
<a href="<?php echo str_replace('&', '&amp;', $login); ?>" id="tab_login"><?php echo $text_login; ?></a>
<?php } else { ?>
<a href="<?php echo str_replace('&', '&amp;', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a>
<?php } ?>
<a href="<?php echo str_replace('&', '&amp;', $account); ?>" id="tab_account"><?php echo $text_account; ?></a><a href="<?php echo str_replace('&', '&amp;', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a><a href="<?php echo str_replace('&', '&amp;', $checkout); ?>" id="tab_checkout"><?php echo $text_checkout; ?></a></div>
</div>

на этот:

<div class="navi"><a href="<?php echo str_replace('&', '&amp;', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
<?php if (!$logged) { ?>
<a href="<?php echo str_replace('&', '&amp;', $login); ?>" id="tab_login"><?php echo $text_login; ?></a>
<?php } else { ?>
<a href="<?php echo str_replace('&', '&amp;', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a>
<?php } ?>
<a href="<?php echo str_replace('&', '&amp;', $account); ?>" id="tab_account"><?php echo $text_account; ?></a><a href="<?php echo str_replace('&', '&amp;', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a><a href="<?php echo str_replace('&', '&amp;', $checkout); ?>" id="tab_checkout"><?php echo $text_checkout; ?></a></div>

и вставим его после этой строки:

<div class="div5">

6. Откроем stylesheet.css и изменим это:

#header .div5 {
clear: both;
}
#header .div5 .left {
background: url('../image/header_1_left.png') no-repeat;
width: 5px;
height: 40px;
float: left;
}
#header .div5 .right {
background: url('../image/header_1_right.png') no-repeat;
width: 5px;
height: 40px;
float: right;
}
#header .div5 .center {
background: url('../image/header_1_center.png') repeat-x;
height: 40px;
margin-left: 5px;
margin-right: 5px;
}

на это:

#header .div5 {
clear: both;
background: url('../image/header_1_center.png') repeat-x;
height: 40px;
margin-left: 5px;
margin-right: 5px;
}
#header .navi a {
float: left;
padding: 10px 10px 10px 10px;
color: #fff;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
#header .navi a:hover {
color: #e06a19;
text-decoration: underline;
}

это:

#header .div9 {
float: left;
}
#header .div10 {
float: left;
margin-top: 2px;
}

на это:

#header .div9 {
float: right;
padding-right: 10px;
}

7. Откроем папку image и закинем в неё эту картинку:

header_1_center

соглашаемся на изменение.

 

Результат нашей работы:

2

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