Мы помогаем нашим клиентам не просто сделать сайт, а стать счастливее.
Ваше счастье находится всего в одном шаге: напишите нам.

После установки Drupal, создания необходимых материалов и полей в них, наступает предпоследний шаг перед завершением работ над сайтом: создание темы. Более 10 лет назад создание темы заключалось в программировании HTML шаблона темы и вставки в него частей PHP кода. Для Drupal 7 создание темы превратилось в конструирование, готового отображения данных в браузере, состоящее из нескольких шагов. Вы конечно можете поступить по старинке, но использование новых методов разработки позволит сэкономить большое количество времени и упростить дальнейшее поддерживание разрабатываемого проекта.

Предлагаемый метод основан на реализации темы сайта, на основе дочерней темы к теме Tundra, которая является дочерней темой к теме Arctica. Что бы не запутаться, будем основываться на следующем списке шагов по созданию темы для Drupal 7:

  • Установка и изучение темы Arctica.
  • Установка и изучение темы Tundra.
  • Установка и изучение модулей Skinr и Arctica Nitro.
  • Установка и изучение модулей Basic Shortcodes Library и AWYSIWYG Configuration with TinyMCE and Shortcodes, а так же использование PIE селекторов.
  • Создание своей дочерней темы и почему это круче чем Twitter Bootstrap.

Тема Arctica будет основной темой сайта на основе которой будет базироваться наша тема оформления. Скачем тему со страницы по интернет адресу: http://drupal.org/project/arctica и распакуем в каталог  <каталог сайта>/sites/all/themes сайта. Активируем тему (Arctica example subtheme) на странице: <url сайта>/admin/appearance.

Так же дополнительно скачаем модули Skinr и Arctica Nitro, после чего распакуем их в каталог  <каталог сайта>/sites/all/modules сайта. Активируем модули на странице: <url сайта>/admin/modules.

Приступим к изучению строения темы Arctica (не будем досканально разбирать назначение каждого файла, просто постараемся понять назначение файлов в определённых папках):

  • arctica/features/arctica-cssfuture (вкладка Polyfills настроек темы) - файлы данной папки позволяют включать поддержку border-radius для IE 7-9 с помощью интеграции фалов проекта CSS3PIE в тему сайта;
  • arctica/features/arctica-layoutkit (вкладка Layout настроек темы, так же вкладка Макет в настройках Srin у любого элемента (подробней в статье о модуле Skinr)) - файлы данной папки позволяют интегрировать изменение раскладки в зависимости от устройства;
  • arctica/features/arctica-visual-bootstrap (вкладка Arctica Visual Bootstrap настроек темы) - файлы данной папки позволяют подключать дополнительные css в зависимости от настроек темы;
  • arctica/theme-settings.php - в файле перечислены настройки темы;
  • arctica/template.php - подключение дополнительных функций темы;
  • arctica/screenshot.png - скриншот темы;
  • arctica/logo.png - логотип темы;
  • arctica/favicon.ico - иконка темы;
  • arctica/arctica.info - данные темы для установки темы в Drupal;
  • arctica/templates - файлы данной папки являются шаблонами, используемыми в теме;
  • arctica/styling - файлы данной папки содержат основные css и изображения темы;
  • arctica/skins - файлы данной папки содержат тему оформления (скин) для интеграции со skinr;
  • arctica/scripts - файлы данной папки содержат JavaScript плагины используемые в теме: autotabs.js (переключение на следующий input при достижения задоного количества символов в даном), respond.js (CSS3 media queries для IE), imgSizer.js, скрипт для управления CSS3 media queries в зависимости от браузера, а так же плагин изменения меню на мобильном устройстве;
  • arctica/preprocess - файлы данной папки содержат дополнительные функции обработки контента перед выводом;
  • arctica/includes - дополнительные функции, используемые в теме.

Так же в папке темы Arctica кроме самой темы, содержится пример создания дочерней темы. Разберём строение дочерней темы:

  • arctica_subtheme/arctica_subtheme.info - данные темы для установки её в Drupal;
  • arctica_subtheme/screenshot.png - скриншот темы;
  • arctica_subtheme/logo.png - логотип темы;
  • arctica_subtheme/favicon.ico - иконка темы;
  • arctica_subtheme/style.css - стиль темы.

Настроем свойства темы на странице: <url сайта>/admin/appearance/settings/arctica_subtheme  (если Вы включили тему: Arctica example subtheme (в моём случае, версии 7.x-2.0-beta1)). Описание вкладок настройки темы:

  • Layout (макет) - содержит настройки размеров регионов темы в зависимости от устройства, на котором отображается сайт, а так же настройки скрытия адресной строки в мобильных браузерах и включение нормализации размера шрифтов для браузера Safari.
  • Arctica Visual Bootstrap (визуальные изменения интерфейса темой Arctica) - содержит включение стилей для печати, стили для элементов формы, стили элементов навигации, а так же стили для элементов сообщений.
  • Drupal core options / styles (настройка системных стилей) - содержит настройки позволяющие отключать системные стили, удалять спонсорские ссылки на сайт разработчиков, отключать отображение некоторых элементов страниц (слоган и т.п.), настраивать логотип и иконку сайта.
  • Polyfills - содержит настройки включения поддержки некоторых функций CSS3 для IE 7-9, а так же позволяет использовать PIE селекторы для IE 7-9 для эмуляции CSS3 для IE 7-9.

Не написав ни одной строчки кода, мы уже получили (используя в качестве основной темы, тему Arctica) в нашей будущей теме большое количество дополнительного полезного (а в случае с IE 7-8 и необходимого) функционала, который значительно расширит возможности нашей будущей темы.

Дополнительный материал: скруглённые уголки у DIV в IE 7-9 (border-radius для IE 7-9)

В данный момент в Arctica (7.x-2.0-beta1) есть проблемы с работой данного компонента темы, Вы можете прочитать следующие абзацы ниже и сами внести изменения в исходные файлы темы, либо скачать уже исправленную версию по ссылке: исправленная Arctica (7.x-2.0-beta1).   

В Arctica (7.x-2.0-beta1) используется PIE 2.0 beta 1, данная версия PIE имеет реализацию функционала через команды не только в *.htc файле, но и их аналог, реализованный в *.js файлах. В большинстве случаев мы используем PIE только для округления уголков у div-ов и поэтому выберем самый быстрый и простой способ без использования JavaScript. А так же мы предпочитаем использовать PIE 1.0.0,а не PIE 2.0 beta 1.

Скачаем на странице по интернет адресу: http://css3pie.com/download/ архив PIE 1.0.0. Из архива необходим только файл PIE.htc, который необходимо поместить в папку: <каталог сайта>/sites/all/themes/arctica/arctica/features/arctica-cssfuture/PIE. Имеющиеся файлы в данной папке нужно удалить, так как нам не нужен не сжатый файл *.htc, а так же мы договорились, что не используем JavaScript.

В файле <каталог сайта>/sites/all/themes/arctica/arctica/features/arctica-cssfuture/cssfuture-theme-settings.inc описана форма, выводящаяся во вкладке Polyfills на странице настройки темы, в данном файле ничего исправлять не нужно. Файл <каталог сайта>/sites/all/themes/arctica/arctica/features/arctica-cssfuture/cssfuture-theme-settings-controller.inc нужно удалить, так как мы договорились, что не используем JavaScript для решения задачи округления уголков в IE 7-9 и нет смысла в подключении JavaScript файлов из вложенной папки PIE, которые мы уже с вами удалили.

В файле <каталог сайта>/sites/all/themes/arctica/arctica/features/arctica-cssfuture/cssfuture-theme-settings-css.inc заменяем строку (строка №2): «global $abs_arctica_theme_path;» на «global $abs_arctica_theme_path, $theme;» для того, что бы в следующей строке можно было получить данные селекторов для данной темы внесённые в специальную форму, выводящуюся во вкладке Polyfills на странице настройки темы. Заменим строку (строка №6): «$CSS .= "$selectors {behavior:url({$abs_arctica_theme_path}/features/arctica-cssfuture/PIE/PIE.php);}\n";» на «$CSS .= "$selectors {behavior:url({$abs_arctica_theme_path}/features/arctica-cssfuture/PIE/PIE.htc);}\n";».

Наш сервер корректно отрабатывает отдачу браузеру клиента посетившего сайт *.htc файла, но на некоторых хостингах, где нет доступа к настройкам веб-сервера иногда *.htc файл не отдаётся (вместо него возвращается ошибка: 403 Forbidden). В таком случае не нужно делать замену строки №6 (если Вы скачали исправленную версию Arctica (7.x-2.0-beta1) с нашего сайта то Вам, наоборот, в нашей исправленной версии в строке №6 нужно произвести обратную замену) и независимо, откуда вы скачали Arctica (7.x-2.0-beta1) - в папку: <каталог сайта>/sites/all/themes/arctica/arctica/features/arctica-cssfuture/PIE нужно поместить файл PIE.php из скачанного архива PIE 1.0.0.

После того как Вы внесли изменения в исходные фалы Arctica (7.x-2.0-beta1) или скачали и установили исправленную Arctica, можно перейти к заданию округления у уголков для нужных div.  Например, можно добавить в *.css активной темы сайта следующий код для DIV с классом test-border-radius-class (используйте свой класс): «.test-border-radius-class { border-radius: 10px;   background-color: red; position:relative; z-index: 0; }». Мы указали, что див имеет скруглённые углы со округление в 10 пикселей, красный цвет фона, а так же два технических параметра (тип позиционирования div при отрисовке в браузере пользователя и порядок его отрисовки при наложении других элементов на область отрисовки) без которых иногда в IE корректно не работает округление уголков. После этого настраиваем корректную обработку написанного стиля для IE 7-9, переходим во вкладке Polyfills на странице настройки темы, ставим галочку: Enable Arctica Future CSS  и в поле под ней через запятую вносим все классы  div, к которым нужно применить округление уголков, а нашем случае: «.test-border-radius-class», если было бы два div: «.test-border-radius-class, .messages ». После нажатия кнопки сохранить будет создан файл <каталог сайта>/sites/default/files/arctica-cache-arctica_subtheme.css (имя зависит от имени использованной темы) в котором будут прописаны стили для округления уголков в IE 7-9.

Дополнительный материал: удаление не нужных файлов

В папке <каталог сайта>/sites/all/themes/arctica/arctica/features/arctica-visual-bootstrap можно удалить файлы «.gitignore» и «config.rb», а так же папку: scss. Это файлы для Sass + Compass на случай если вдруг Вы захотите изменить один из 4 стилей: Arctica Visual Bootstrap, на боевом сервере в данных файлах нет необходимости.

В папке <каталог сайта>/sites/all/themes/arctica/arctica/features/arctica-layoutkit/arctica-easygrid можно удалить файл «config.rb», а так же папки: scss и .sass-cache. Это файлы для Sass + Compass на случай если вдруг Вы захотите изменить стиль сетки сайта, на боевом сервере в данных файлах нет необходимости.

В папке <каталог сайта>/sites/all/themes/arctica/arctica/styling можно удалить файлы «.gitignore» и «config.rb», а так же папку: scss. Это файлы для Sass + Compass на случай если вдруг Вы захотите изменить один из 4 основных стилей темы, на боевом сервере в данных файлах нет необходимости.

В папке <каталог сайта>/sites/all/themes/arctica/arctica/templates можно удалить файлы «maintenance-page.tpl.php.tmp».

Дополнительный материал: примечания

  • Arctica не предназначена для установки как тема сайта, вместо неё необходимо включать дочернюю тему: Arctica example subtheme (arctica_subtheme). Иначе на странице настройки темы Вам будет выдаваться ошибка об отсутствии переменной: base_themes.
  • После включения дочерней темы, на странице настройки темы нужно хотя бы один раз нажать кнопку: сохранить, для инициализации переменных темы (в некоторых браузерах из-за кэша страницы, надпись пропадает после нажатия кнопки и дополнительной перегрузки страницы через нажатие клавиш CTRL + F5).
  • По желанию, на вкладке: Drupal core options / styles выставляется галочка: Remove attribution link.