Создаем объемный сайдбар (3d)

Здравствуйте, сегодня хочу рассказать вам о том, как создать объемный (3d) сайдбар (аналогично с шапкой, футером, контентом) на своем сайте.

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

Для примера буду рассматривать стандартную тему wordpress — Twenty Eleven.

Изначально, сайдбар выглядел так:

 

А после того как вы прочтете данную статью, то сможете сделать что-то наподобие следующего:

объемный 3d сайдбар

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

 
Для того, чтобы осуществить данное преобразования, необходимо следующее:

1.1. Заходим в файл sidebar.php.

За отображения сайдбара (sidebar, боковая колонка) в движке wordpress отвечает файл sidebar.php — его код и будем изменять.

Входим в панель управления сайтом, далее в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор» и справа в списке шаблонов выбираем файл sidebar.php.

Ищем в нем блок, отвечающий за вывод сайдбара (в основном там только один блок — начинается с тега div).

Здесь можно воспользоваться программой Firebug для браузера Firefox, а именно его инструментом «анализ выделенной области», кнопочка на которую нужно нажать для активизации данного инструмента показана на скриншоте ниже:

Далее наводим курсор на сайдбар и смотрим какой же блок отвечает за его отображение:

Как видим блок называется «secondary» (например, в теме моего сайт — mnogoblog.ru — блок сайдбара называется — «sidebar»).

Возвращаемся к файлу sidebar.php и ищем в нем блок с названием secondary, вот так он выглядит в данной теме (Twenty Eleven):

 

...
<div id="secondary" class="widget-area" role="complementary">
...

 
Теперь сразу после него добавляем еще один блок, например с названием «block»:

...
<div id="secondary" class="widget-area" role="complementary">
<div class="block">
...

 

И не забываем закрыть данный блок закрывающим тегом </div>
 
Для этого спускаемся вниз кода и ищем там тег </div> и дублируем его:
 

<?php endif; // end sidebar widget area ?>
		</div></div><!-- #secondary .widget-area -->
<?php endif; ?>

 
1.2. Далее зайдем в файл style.css и добавим к нашему новому блоку «block» стили оформления.
 
Для этого опять открываем «Редактор» (панель управления — «внешний вид» — «Редактор») и справа в списке шаблонов выбираем файл style.css.
Спускаемся в его коде в самый низ и добавляем следующий код:
 

.block {
background: 
url('http://mnogoblog.ru/wp-content/uploads/2012/12/3dsidebar1.gif') no-repeat,
url('http://mnogoblog.ru/wp-content/uploads/2012/12/3dsidebar2.gif') repeat-y,
#FCF8BC
100% 0; 
padding: 50px 0 0 40px; /* Поля вокруг текста */
margin: 0 -7% 0 -46.4%;
}

Здесь используется принцип многофоновости для блока, которая реализуется благодаря CSS3.
Здесь соответственно:
«http://mnogoblog.ru/wp-content/uploads/2012/12/3dsidebar1.gif» — путь до картинки, которая будет располагаться сверху в сайдбаре,
объемный сайдбар
«http://mnogoblogru.hostenko.com/wp-content/uploads/faq_bg8_2.gif» — путь до картинки, которая слева.
3d сайдбар

Параметр #FCF8BC (желтый) — отвечает за цвет фона сайдбара, здесь можно также использовать и изображение, например для создания градиента.

Параметры «padding» и «margin» — регулируют отступы.

Вот в принципе и все!
 

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


knopkisoc

Создаем объемный сайдбар (3d): 1 комментарий

  1. Алексей

    Впечатляет, особенно для тех у кого сайт о дизайне, да и просто красиво. Но пока так далеко не заглядываю, но возьму обязательно пост к сведению. Вроде все хорошо расписано, да и трудностей не должно возникнуть

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