Опубликовано автор в категориях Drupal, Верстальщику.

Это уже вторая статья по этой теме. В первой части вы узнали, как спланировать простую тему и определить элементы страницы. Если не читали первую часть не беда, вы можете прочитать её, перейдя по ссылке.

Каждый разработчик тем для Drupal подходит к задачам по их созданию по-разному. В данном случае Эмма (Emma Jane Hogbin) рассказывает о своих принципах создания темы. Здесь описывается минимум того, что нужно использовать для создания жизнеспособной темы.

Чтобы ускорить процесс, в качестве основы для вашей темы Эмма советует использовать тему NineSixty. Вы можете скачать ее здесь. Эта тема позволяет легко использовать CSS grid framework от 960.gs для вашего макета. Есть еще много замечательных тем, поэтому можете выбрать в качестве основы то, что вам нравится. Лично я (автор блога) предпочитаю использовать тему Framework для основы своих проектов, при этом я не делаю под-темы, а создаю тему «с нуля», но в этой статье речь пойдет именно о создании с использованием базовой темы в качестве основы.

Создание темы

Создайте новую папку (название должно начинаться с буквы) на вашем сервере с Drupal; подкаталог sites/all/themes
Давайте будем использовать thewire в качестве примера имени вашей темы (естественно, вы можете назвать тему как угодно). Добавьте в эту папку текстовый файл с названием thewire.info
Название должно в точности совпадать с именем папки. Файл будет как бы менеджером вашей темы — подгружать пользовательские файлы CSS и создавать области для вашего файла шаблона страницы.
Скопируйте пример настройки в .info файл. Он должен содержать вот такую информацию:

name = Season One
description = Featuring characters from The Wire.
core = 7.x
engine = phptemplate
base theme = ninesixty
screenshot = thewire-screenshot.png
; Add custom regions, CSS and Javascript files 
regions[mcnulty] = McNulty. Left sidebar, three columns
regions[kima] = Kima. Right sidebar, three columns
regions[rawls] = Rawls. Header, 12 columns
regions[stringer] = Stringer. Footer, 12 columns
regions[omar] = Omar. Banner area, front page only, 12 columns
 
stylesheets[all][] = bunk.css
scripts[] = bubbles.js

Примечание: области McNulty, Kima и Rawls не используются на главной странице.

Переводим PSD в Drupal

Настало время, перенести ваш дизайн в тему Drupal.
На этом этапе вы можете экспортировать HTML из вашей дизайнерской программы (photoshop прим.авт.), или по умолчанию стартовать с файла page.tpl.php предоставляемым Drupal.

Шаблон страницы по умолчанию можно загрузить отсюда http://api.drupal.org/api/drupal/modules—system—page.tpl.php/7/source
Теперь выберите один из каркасов разметки, чтобы начать. Это может быть либо главная страница, либо внутренняя. Далее в этом разделе будет показано, как создать страницу с помощью базовой темы NineSixty.
Цель состоит в том, чтобы в конечном итоге получилась HTML-страница с некоторыми переменными в ней.
Если использовать CSS grid framework до создания каркаса вашей темы может оказаться довольно не сложным занятием. На данном этапе разумно сделать основную разметку, поместить в нее нужные переменные шаблонов Drupal, а после стилизовать мелкие детали. При этом большая часть работы будет касаться оформления с помощью CSS.

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

Для использования 960gs вы должны знать о следующих понятиях:
Чтобы создать квадратный контейнер любого размера необходимо использовать

. По умолчанию

будет использовать ширину в 100%. Однако, по высоте будет таким же, как содержащийся в нем контент. Для регулировки ширины

на определенное количество столбцов, нужно назначить «class» в div. Имя класса будет включать в себя количество колонок

которые должны быть. Для примера:

.

Контейнеры могут иметь несколько стилей, примененных к ним, разделенных пробелом. Например:


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

С помощью этих простых правил и магических заклинаний :), вы можете создать шаблон веб-сайта используя 960gs.

Таким образом, сейчас нам нужно либо переделать файл page.tpl.php и начать добавлять соответствующие классы CSS, чтобы сделать его более похожим на сетку,
либо скопировать файлы «шаблона по умолчанию» из каталога ninesixty в свою собственную тему, а затем начать копировать материалы, и перемещать в другое место, так чтобы это выглядело, как ваш каркас.

Давайте начнем с добавления новой области, которая называется «Стрингер» (“stringer”).

Вопросы:

  • Какова будет ширина стрингера?
  • Сколько блоков должен имеет стрингер?
  • Любой из этих блоков «уникальный» в некотором роде? Будут ли они нуждаются в отдельном файле шаблона?

Ответы:

  • Стрингер — 12 колонок по ширирне.
  • Стрингер состоит из трех блоков.
  • Один из этих блоков составляет шесть колонок. Остальные — три колоноки.

Чтобы сделать новый регион stringer

<div id='stringer' class='grid-12'>
  <?php print render($page['stringer']); ?>
</div>

Вот и все! Вы добавили регион!

Повторите эти шаги, что бы проверить перенести все необходимые блоки из дизайна в ваш макет, а потом используйте HTML, CSS и PHP переменные, которые необходимы для воссоздания файла дизайна в теме. Возьмите какой то один элемент страницы. Сосредоточьтесь на маленьком кусочке, который вы пытаетесь воссоздать. Не отвлекайтесь на всю тему. Посмотрите только на отдельные части.

Запускаем основу вашей темы

Если вы думаете, что сделали достаточно: запускайте тему в работу! Сколько это достаточно? Ну понимаете… дастаточно и достаточно)
Минимальная жизнеспособная тема — это то количество работы, которую вы можете сделать, чтобы установить тему на сайт Drupal. Она должна иметь свою собственную папку и инфо-файл. Она, вероятно, имеет собственный файл CSS и даже свой собственный файл page.tpl.php. И такое может быть.

Файлы вашей базовой темы нужно загрузить сюда: sites/all/themes/yourbasethemefolder.
Любые специфические темы должны быть загружены сюда sites/domainname.com/themes/yourthemefolder.

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

После того как тема была загружена, установате её темой по умолчанию перейдя по адресу http://mysite.com/admin/build/themes.

Как выглядит? Довольно мрачно, не так ли?

Займемся доработкой остальной части интерфейса

Теперь когда основая тема на месте пришло время доработать все остальное. Посмотрите на все то, что «неправильно» и исправьте это! Иногда может понадобиться создание пользовательских файлов шаблонов, а иногда просто потребуется подправить CSS.

Вот несколько ссылок, которые конкретно помогут с тематизацией страниц:

Посмотрите на источник tpl.php файла модуля, чтобы найти переменные, которые можно перемещать и изменять.

  • Используйте модули Devel (http://drupal.org/project/devel) + Devel for themer (http://drupal.org/project/devel_themer), которые помогут вам отследить, какой модуль генерирует тот или иной код.
  • Firebug — твой друг (http://getfirebug.com) Установите этот «великий маленький» плагин для файрфокса, если еще не установили. Установите его и инспектируйте элементы на вашей странице одним кликом. Все прикладные CSS селекторы, свойства и источники стилей могут быть открыты с его помощью.
  • Узнайте переменные темы с помощью информации по адресу http://drupal.org/node/223430
  • Не бойтесь смотреть в документации для разработчиков на http://api.drupal.org Даже если вы не «девелопер», там очень много полезной информации по созданию тем.

Очень важно отметить, что целью данной статьи является отучить вас от ваших статических файлов и переодеть в джинсы и футболку :).
Эта статья никогда не была и не будет предназначена, для того чтобы помочь вам создать самую крутую тему в мире, но во всяком случае благодаря ей, вы «набьете себе руку» и сможете делать более менее нормальные темы, с небольшой помощью Google, и ссылок ниже.
Удачной разработки тем для Drupal

Оставить комментарий

  • (не будет показан)