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

  В основном, в резиновых темах должны растягиваться и сужаться: шапка блога (header), текстовое поле (content) и подвал (footer), сайдбары обычно имеют фиксированную ширину. В шаблоне F2 изначально установлено ограничение общей максимальной ширины: max — width: 1240px, минимальный размер также имеет ограничение min — width: 740px. Сделав небольшое изменение в стилях CSS, мы заставим блог изменяться в размерах, но как сделать, чтобы шапка с картинкой тоже могла растягиваться и сужаться. Причём,картинка в шапке должна находиться на одном месте, как бы не менялся размер шаблона.

  Но, не будем опережать события и начнём с самого начала, а именно, установим основной фон. Как поменять цвет фона уже говорилось в статье: Как изменить дизайн шаблона.

  Если тема будет развёрнута во весь экран монитора, этот пункт настройки можно пропустить, фона всё равно не будет видно, но моя тема не будет закрывать весь экран и поэтому мне хотелось сделать градиентную основу или использовать бесшовный фон. На одном из онлайн – генераторов бесшовных фонов я выбрал и подредактировал вот такой фон (размер оригинал).

  Запустил программу FileZilla и закачал фон в папку: images, расположенной по такому адресу: /domains/myvirtualput.ru/public_html/wp-content/themes/f2/images, затем переименовал файл в: fon.png.

  Затем, открыл редактор в админке сайта и прописал следующее свойство и путь к файлу: background-image: url (путь к файлу); я писал вручную прямо в редакторе, но вы можете написать сначала в блокноте, а потом скопировать и вставить в стили или, если название вашего файла совпадёт с моим, скопируйте свойство  отсюда:

background-image: url (images/fon.png);

  Обновляем файл и идём на главную страницу блога, обновляем страницу и любуемся новым фоном. Теперь, зная путь установки, мы можем менять фон на столько часто, сколько потребуется.

  Далее, на онлайн – генераторе фонов был получен вот такой фон для шапки блога. Высота фоновой картинки должна быть такой же как и высота шапки, на моем шаблоне 185px.

 

   Затем, зашёл в админ-панель блога, открыл настройки темы, установил галочки в чекбоксах, на скриншоте ниже показано где они установлены. Высоту шапки каждый указывает по своему желанию, позже я установил 185px. Жмём на ссылку: Загрузите рисунок здесь.

 

 

  В открывшемся окне жмём на кнопку: Выберите файл, ну вообщем делаем всё так, как было описано в статье: Резиновая тема WordPress.

  Единственное, хочется подсказать, если по каким-то причинам вы не скопировали адрес картинки то, идёте в Медиафайлы/Библиотека, находите в списке картинку, наводите курсор под название картинки и жмёте на: Изменить.

  С правой стороны открывшегося окна увидите ссылку, выделяете её, копируете и вставляете в адресную строку в настройках темы.

    Затем, в стиле: #headerlogo h1  я изменил шрифт, поставив его впереди всех установленных шрифтов в свойстве: font – family, изменил размер до 72px.

  Чтобы изменить цвет шрифта, перешёл чуть ниже в стиль: #headerlogo h1 a и в свойстве: color, прописал выбранный цветовой код. После каждого изменения обязательно нужно обновлять файл.

   Ну, а теперь растянем нашу тему, на то она и резиновая Улыбка . Верстальщиком по умолчанию установлена максимальная ширина сайта 1240 пикселей. А мы возьмём и поставим вместо пикселей проценты.

  Меняем пикселы на 100% , обновляем файл, идём на главную страницу, обновляем её и радуемся, что пока всё получается удачно, тема растянулась почти до самых краёв окна браузера.

 

  Снова заходим в список стилей, находим стиль: body. Находим свойство: padding:20px;( Отступ со всех сторон 20пикселей). Заглянем в шпаргалку:

   padding:20px; – отступ с четырёх сторон равен 20 пикселей.

   padding:30px 20px; – означает — отступы сверху и снизу равны по 30 пикселей, слева и справа по 20пикселей.

   padding: 40px 20px 30px 20px; – означает – отступ сверху 40px, справа 20px, снизу 30px и слева 20px;

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

 

 

Предыдущие статьи из серии: Резиновая тема

   1. Резиновая тема WordPress

   2. Как изменить дизайн шаблона

   3. Ещё немного про дизайн сайта

 

  В следующей статье приподнимем шапку над телом сайта, а между ними попробуем вставить второе выпадающее меню, не пропустите. Что не понятно, спрашивайте, разберёмся. До встречи!

Поделиться ссылкой: