Moushe.ru

Блог обо всём

OpenCart 1.5.3 делаем шаблон GreenTea (7 часть)



Сегодня у меня наконец появилось свободное время и мы с вами продолжим создавать шаблон GreenTea. Пожалуй сегодня мы поработаем над шапкой нашего шаблона.

GreenTea

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

1. Найдём в интернете картинку чайной тематики (в статье вырезано)

2. Поработаем над картинками графическим редактором (в статье вырезано)

3. Закинем получившуюся картинку в папку image

4. Изменим немного header.tpl

5. Правим CSS стили

 

Приступим к трудам:

1. Полазив некоторое время на фотостоках, я отобрал для урока такое изображение:

331205_priroda_pejzazh_bambuk_listya_voda_istochnik_belyj_1920x1080_(www.GdeFon.ru)

2. Изменив размеры картинки  я добавил название сайта симпатичным шрифтом и добавил немного деталей, вот мой результат:

GreenTeaLogo

Фрилансеры конечно сделают намного лучше, но для статьи подойдёт и моя “Made in China” шапка. Улыбка

3. Откроем папку image (../catalog/view/theme/greentea/image) и закинем в неё нашу картинку шапки.

4. Откроем файл header.tpl (../catalog/view/theme/greentea/template/common) и вместо этого кода (50-52):

<?php if ($logo) { ?>
<div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>
<?php } ?>

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

<div id="logo"><img src="catalog/view/theme/greentea/image/GreenTeaLogo.jpg" ?></div>

5. Откроем файл stylesheet.css (../catalog/view/theme/greentea/stylesheet) и вместо этого кода (117-121):

#header #logo {
position: absolute;
top: 25px;
left: 15px;
}

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

#header #logo {
position: absolute;
top: 0px;
left: 0px;
}

наша картинка немного перекрывает панель навигации, значит нам нужно увеличить ширину header’а, ищем этот код (100-106):

#header {
height: 190px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
}

и изменяем на это:

#header {
height: 220px;
position: relative;
}

Теперь наша картинка прижата к меню навигации, но верхние закругления меню навигации выглядят не красиво, изменим стиль меню навигации, то есть изменим это (334-345):

#menu {
background: url('../image/navi_on.jpg');
border-left: 1px solid #78a240;
border-right: 1px solid #78a240;
height: 40px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
padding: 0px 5px;
}

на это:

#menu {
background: url('../image/navi_on.jpg');
border-left: 1px solid #78a240;
border-right: 1px solid #78a240;
height: 40px;
margin-bottom: 15px;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
padding: 0px 5px;
}

Ну вот, совсем другой вид. Улыбка

В следующем уроке мы доделаем нашу шапку, оставайтесь на линии, будет интересно.

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

  1. перец

    05.05.2013 at 19:47

    4. Откроем файл header.tpl (../catalog/view/theme/greentea/template/common) и вместо этого кода (50-52):

    <a href="»><img src="» title=»» alt=»» />

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

    а что за это вопросительный знак в конце тега img?? откуда он?? какова его роль?

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

      06.05.2013 at 21:12

      В стандартном шаблоне логотип заключён в пхп код, от него и остался знак вопроса.

  2. Наталия Талько

    10.05.2013 at 00:12

    Подскажите пожалуйста что можно сделать с шапкой что там надо править в файле хедер?

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

      10.05.2013 at 20:22

      А что вы с ней сделали до появления ошибки? И в футере у вас тоже ошибка.

  3. У меня рисунок(фон) хедера перекрывает логотип,он как бы под фоном получается.Подскажите как логотип вынести на «главный слой» т.е. сверху фона?

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

      24.08.2014 at 11:42

      Добавьте Z-index логотипу

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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