Украшаем сайт – добавим блоки с изображениями по бокам сайта

Здравствуйте, давайте украсим немного свои сайты, а именно добавим декоративные изображения по бокам сайта.

Скачать исходники для статьи можно ниже

Для примера возьмем стандартную тему сайта – Twenty Twelve.

Вот, что мы будем делать:

добавляем изображения по бокам сайта

То есть добавим немного растительности по бокам сайта (слева и справа).

С помощью данного метода думаю ваш сайт станет еще красивее.

Давайте же приступим:

1. Редактируем файл header.php.

Заходим в файл header.php  стандартной темы Twenty Twelve – панель управления – в левом меню – пункт “Внешний вид” – его подпункт “Редактор” – справа в списке шаблонов ищем файл header.php.

Ищем в коде файла header.php тег body:


<body <?php body_class(); ?>>

И вставляем сразу после него следующий код:


<div id="maindecor">
<div id="decor1">
</div>
<div id="decor2">
</div>

То есть мы создали 3 блока div:

decor1 – этот блок у нас будет отвечать за вывод изображения слева от сайта.

decor2 – этот блок у нас будет отвечать за вывод изображения справа от сайта.

maindecor – этот блок у нас будет включать в себя сам сайт (блок page) и еще два созданных нами блока decor1 и decor2. Сделано это для того, чтобы блоки не разъезжались при просмотре сайта в разном разрешении, а были как одно целое.

Как видите блок maindecor мы не закрыли, так как он должен включать в себя весь сайт, поэтому закрывающий тег div мы должны поставить после закрывающего тега div у блока page.

 

2. Закрываем блок maindecor в файле footer.php

Для этого в панели управления – в левом меню – опять выбираем пункт “Внешний вид” – его подпункт “Редактор” – и справа в списке шаблонов ищем файл footer.php.

Ищем в коде файла header.php закрывающий тег блока page:


</div><!-- #page -->

И сразу после него ставим закрывающий тег div, который закроет у нас блок maindecor:


</div><!-- #page -->

</div>

 

3. Добавляем стили оформления для созданных нами блоков (decor1, decor2, maindecor)

Для этого в панели управления – в левом меню – опять выбираем пункт “Внешний вид” – его подпункт “Редактор” – и справа в списке шаблонов ищем файл style.css.

Спускаемся в коде файла style.css в самый низ и вставляем следующий код:


#maindecor {
 margin: 0px auto;
 width: 960px;
}

#decor1 {
 float: left;
 background: url(https://mnogoblog.ru/wp-content/uploads/2013/06/decor1.png) no-repeat;
 height: 700px;
 width: 100px;
}

#decor2 {
 float: right;
 background: url(https://mnogoblog.ru/wp-content/uploads/2013/06/decor2.png) no-repeat;
 height: 700px;
 width: 100px;
}

Давайте разберемся здесь что к чему.

Блок maindecor:

margin – задает выравнивание по центру.

width – задает ширину блока равную 960px. Вы наверное спросите почему 960px – связано с тем, что боковым блокам мы задаем ширину 100 px (размеры рисунков), а по середине у нас идет блок самого сайта (page) с размером в 760px, что в сумме дает 960 px.

 

Блок decor1:

float: left – задает выравнивание блока по левому краю.
background – прописывается путь до картинки, здесь no-repeat – говорит, что изображения не надо повторять, если вы хотите повторять его по вертикали, то поставьте repeat-y.
height  – задает высоту блока в 700px (связано с высотой рисунка).
width – задает ширину блока в 100px (связано с высотой рисунка).

Блок decor2 аналогично блоку decor1.

Вот и все!

 

 

PS: Если вы хотите добавить отступ декоративных изображений сверху, то используйте следующей код в файле стилей:

margin-top: 50px;

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Украшаем сайт – добавим блоки с изображениями по бокам сайта: 3 комментария

  1. Анна Рублева

    Очень интересное руководство!
    Но было бы здорово иметь хоть какие-нибудь, самые общие требования к файлам изображений, которые используются для украшения подобным образом.
    Спасибо за интересный подход!

  2. орппорпроп

    какой к черту header.php где его взять? у меня просто на самом сайте есть функция в админке “создать новый файловый блок” нажимаю на него и открывается страница где сайт просит ввести описание блока т.е. коды. вот вы лучше скажите какие коды туда вводить?

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