Сегодня мы с вами доделаем шапку нашего шаблона GreenTea.

GreenTeaShablon

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

1. Доделаем картинку шапки (в статье вырезано)

2. Закинем картинку в папку image

3. Перерисуем иконку телефона

4. Поправим CSS стили

 

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

1. Увеличиваю ширину картинки, создаю правую часть, описывать не буду – ибо долго, вот результат работы:

GreenTeaLogo

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

3. Вместо старой иконки телефона, рисуем новую (я люблю классические телефоны, поэтому иконка выглядит именно так):

mobileme

и закидываем как и картинку шапки, в папку image.

4. Наша картинка шапки сейчас перекрывает контакты, исправим это, откроем stylesheet.css (../catalog/view/theme/greentea/stylesheet) и вместо этого (104-113):

#headcontacts {
position: absolute;
top: 80px;
right: 0px;
background: url('../image/mobileme.png')  no-repeat;
padding-left: 55px;
padding-bottom: 10px;
font-size: 15px;
color: #686868;
}

вставим это:

#headcontacts {
position: absolute;
top: 85px;
right: 10px;
background: url('../image/mobileme.png')  no-repeat;
padding-left: 55px;
padding-bottom: 10px;
font-size: 15px;
color: #686868;
z-index: 1;
}

теперь изменим этот код (160-172):

#header #cart .heading {
float: right;
margin-right: 172px;
margin-top: 15px;
padding-left: 14px;
padding-right: 14px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EEEEEE;
background: #FFF;
position: relative;
z-index: 1;
}

на этот:

#header #cart .heading {
float: right;
margin-right: 172px;
margin-top: 15px;
padding-left: 14px;
padding-right: 14px;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EEEEEE;
background: #FFF;
position: relative;
z-index: 10;
}

поиск у нас прижат к правому краю шапки, нужно его отодвинуть, меняем это (276-282):

#header #search {
position: absolute;
top: 15px;
right: 0px;
width: 298px;
z-index: 15;
}

на это:

#header #search {
position: absolute;
top: 15px;
right: 10px;
width: 298px;
z-index: 15;
}

Войти или зарегистрироваться тоже нужно подкорректировать, меняем это (306-314):

#header #welcome {
position: absolute;
top: 47px;
right: 0px;
z-index: 5;
width: 298px;
text-align: right;
color: #999999;
}

на это:

#header #welcome {
position: absolute;
top: 47px;
right: 10px;
z-index: 5;
width: 298px;
text-align: right;
color: #999999;
}
#header #welcome a {
color: #78a240;
text-decoration: none;
}
#header #welcome a:hover {
color: #000;
text-decoration: underline;
}

Ну вот, стало намного лучше, не так-ли?

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