Создание шаблона для WordPress (часть 6)

Основное содержимое (контент) и сайдбары.

Фон у всех троих будет общий, а именно: узкая горизонтальная полоса шириной во все 960 пикселей и высотой в 5. Поле контента — просто однотонная заливка цветом #28363E, а оба сайдбара имеют градиент слева-направо от темного к светлому: #020202 — #2E3F47.

Полоска

Сделать такую полоску проще простого: выбираем на макете свободный от шрифта и прочих украшательств участок, затем инструментом Crop Tool выделяем полоску по всей ширине макета и нажимаем клавишу Enter. Готово! Сохраняем эту картинку с именем bg-container. Кстати, на счет высоты полоски: не обязательно делать ее именно в 5 пикселов. Можно и 1 и 100. Тут тоже руководствуйтесь здравым смыслом. Слишком мельчить ни к чему, а слишком крупный может весить изрядно. В любом случае при верстке мы зададим заполнение фоном в блоке container по вертикали (repeat-y).

В принципе можно поступить иначе: задать для блока контента фон цветом #28363E, а для сайдбаров нарисовать только полоску с градиентом и каждому из них в отдельности задать эту полоску фоном, также с повтором по вертикали. Но в этом случае у нас фон сайдбаров будет заканчиваться там, где кончается полезное содержимое сайдбара, то есть текст. Ниже будет снова однотонный фон, такой же, как и у блока с контентом. А это выглядит не очень красиво и даже неаккуратно.

Теперь нам в этой части макета осталось только вырезать иконку у заголовка поста, фон под поисковую форму (он у нас рисованный, с внутренней тенью, а не просто белый прямоугольник), иконку RSS-фида и еще одну иконку у заголовков блоков в сайдбарах. Пользуясь инструментом Crop Tool   , так же последовательно вырезаем их всех и сохраняем в папке images.

RSS logo

Небольшая хитрость: иконку RSS фида я специально сделал во всю ширину правого сайдбара. Дело в том, что разные браузеры по-разному высчитывают отступы, и слишком коротко обрезанную картинку потом трудно будет четко поставить на место. При использовании в качестве фона градиента, сдвиг хоть на 1 пиксель уже будет заметен, а это некрасиво. А так наша картинка четко «упрется» в края блока и никуда уже не денется. Напомню: размер правого сайдбара по ширине 160 пикселов, стало быть, и иконку RSS фида делаем такой же.