Moushe.ru

Блог обо всём

OpenCart делаем шаблон Photo4You (2 часть)



До:                                                      После:

Photo4YouPosle

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

1. Изменим ширину шаблона.

2. Работаем интенсивно над шапкой сайта:

2.1. Сделаем название сайта

2.2. Сделаем описание сайта и удалим лишние кнопки из шапки

2.3. Переместим поиск вверх шапки

2.4. Поместим в шапке телефон и часы работы нашего магазина

2.5. Добавим в шапку кнопки социальных сетей

2.6 Вставим картинку в логотип сайта.

 

Как вы можете видеть сегодня у нас очень насыщенная действиями программа. Улыбка

Стряхиваем пыль с клавиатуры, протираем монитор тряпочкой, снимаем с мышки паутину и прогоняем паука, и начинаем работать. Улыбка

1. Открываем stylesheet.css (..\catalog\view\theme\Comp4You\stylesheet) и изменяем эту строку:

#container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

на эту:

#container {
width: 98%;
margin-left: auto;
margin-right: auto;
text-align: left;
}

(Теперь наш шаблон растягивается на любом разрешении экрана монитора и занимает почти все 100% рабочей поверхности браузера Улыбка)

2.1. Открываем header.tpl (..\catalog\view\theme\Photo4You\template\common) и удалим этот код:

<?php if ($logo) { ?>
<a href="<?php echo str_replace('&', '&amp;', $home); ?>"><img src="<?php echo $logo; ?>" title="<?php echo $store; ?>" alt="<?php echo $store; ?>" /></a>
<?php } ?>

вместо него вставим это:

<?php if ($logo) { ?>
<a href="<?php echo str_replace('&', '&amp;', $home); ?>">Photo4You</a>
<?php } ?>

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

#header .div2 {
float: left;
padding-top: 15px;
padding-left: 15px;
}

на это:

#header .div2  a{
float: left;
padding: 20px 0px 20px 20px;
text-align: center;
color: #333333;
text-decoration: none;
font-size: 36px;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
}

2.2. В 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>

и вставим это:

<div class="div3">Цифровые и зеркальные фотоаппараты и аксессуары к ним</div>

Откроем stylesheet.css и вместо этого:

#header .div3 {
float: right;
padding-top: 7px;
height: 38px;
}

#header .div3 a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
}

вставим это:

#header .div3 {
float: left;
padding: 0px 0px 20px 20px;
text-align: center;
color: #333333;
text-decoration: none;
font-size: 12px;
font-style: italic;
font-family: Verdana, Geneva, sans-serif;
clear: left;
}

2.3. В header.tpl ищем это:

<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 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 class="div1">

Откроем stylesheet.css и вместо этого:

#header .div9 {
float: left;
}
#header .div10 {
float: left;
margin-top: 2px;
}
#search {
padding-top: 7px;
padding-left: 5px;
color: #FFF;
font-weight: bold;
}

вставляем это:

#header .div9 {
padding: 30px 0px 0px 20px;
clear: left;
float: right;
margin-top: 2px;
}
#search {
color: #FFF;
font-weight: bold;
}

2.4. Вставим в header.tpl после этого кода:

<div class="div1">

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

<div class= "telefon">
<center><b>Н</b>аш телефон<b>:</b> <b>0 </b>(<b>000</b>)<b> 000</b> - <b>00</b> - <b>00</b></br>
<b>Ч</b>асы работы<b>:</b> c <b>10:00</b> до <b>20:00</b></center>
</div>

Откроем stylesheet.css и вставим в него такой код:

#header .telefon {
padding: 30px 0px 0px 0px;
font-style: italic;
font-size: 14px;
color: #505050;
}

2.5. Открываем эту ссылку: http://api.yandex.ru/share/ , выбираем нужные кнопки и копируем код из окна:

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir"></div>

и вставляем в header.tpl в меню поиска:

<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 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><script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir"></div></div>
</div>

2.6. Возьмём симпатичную картинку и закинем её в папку image (..\default\catalog\view\theme\Photo4You\image):

iphoto

Откроем header.tpl и изменим это:

<div class="div2">
<?php if ($logo) { ?>
<a href="<?php echo str_replace('&', '&amp;', $home); ?>">Photo4You</a>
<?php } ?>
</div>
<div class="div3">Цифровые и зеркальные фотоаппараты и аксессуары к ним</div>

на это:

<div class="div2">
<?php if ($logo) { ?>
<a href="<?php echo str_replace('&', '&amp;', $home); ?>"><img src="catalog/view/theme/Photo4You/image/iphoto.jpg" alt="" />Photo4You</a>
<?php } ?>
</div>
<div class="div3">Цифровые и зеркальные фотоаппараты и аксессуары к ним</div>

После этого изменим отступы у телефона, панели поиска и кнопок соц. сетей:

#header .telefon {
padding: 41px 0px 0px 0px;
font-style: italic;
font-size: 14px;
color: #505050;
}
#header .div9 {
padding: 41px 0px 0px 0px;
clear: left;
float: right;
}

Любуемся на результат наших усилий:

Posle

На этом наш урок завершается, до новых встреч. Улыбка

10 Комментариев

  1. Подскажите пожалуйста как изменить ширину колонок в стандартном шаблоне?

  2. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    15.11.2011 at 00:42

    В одной из тем уже был этот вопрос — http://moushe.ru/nashi-stati/web-dizajn-2/opencart-delaem-shablon-comp4you-2-chast/#comments в комментах.

  3. Запуталась в стилях. И вот что получилось(((
    http://primer.zvukplus.ru/index.php?route=common/home

    помогите телефон, логотип, поиск — на одной строке сделать

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      16.11.2011 at 21:45

      Не могу зайти в ваш магазин, как установите напишите мне на почту и я посмотрю что можно сделать — hruhru.87@mail.ru

  4. Дмитрий

    15.02.2012 at 15:09

    Попытался добавить стоку с телефоном и графиком работы. русский текст не понимает. Что можно сделать ?
    oc 1.5.3.1

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      15.02.2012 at 21:33

      Откройте header.tpl блокнотом и нажмите сохранить как, выбирайте кодировку utf-8, сохраняете результат и обновляете страницу браузера.

    • Дмитрий

      17.02.2012 at 12:49

      спасибо, помогло

  5. Все разобрался сделал в utf-8 без BOM. Скажите пожалуйста а как сделать телефон и часы работы на уровне с описанием сайта. С Уважением!

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      23.02.2012 at 18:51

      Правьте в css #header .telefon и #header .div9 в них задан отступ вниз (41px)

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика