До:                                                      После:

ДоПосле

Сегодня у нас мини урок из-за отсутствия у меня свободного времени, заранее прошу прощения. Мы просто перекрасим рамку вокруг контента и перекрасим зелёные кнопки на синие – больше подходящие нашему шаблону.

Возьмём эти картинки и закинем их в папку image (..\catalog\view\theme\Photo4You\image):

content_top_leftcontent_top_centercontent_top_rightcontent_bottom_leftcontent_bottom_centercontent_bottom_right

Теперь откроем stylesheet.css (..\catalog\view\theme\Photo4You\stylesheet) и изменим это:

#content h1, .heading {
color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0px;
}

на это:

#content h1, .heading {
color: #ffffff;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0px;
}

и это:

#content .middle {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px 10px 1px 10px;
min-height: 30px;
}

на это:

#content .middle {
border-left: 1px solid #236383;
border-right: 1px solid #236383;
background: #FFFFFF;
padding: 10px 10px 1px 10px;
min-height: 30px;
}

Смотрим наш результат:

1

Теперь перекрасим кнопки, закинем эти картинки в папку image (..\catalog\view\theme\Photo4You\image):

button_leftbutton_rightbutton_leftbutton_right

Смотрим на результат:

После