Создаем свою Друпал тему на основе Zen theme

zen theme друпал drupal

Если вы решили не использовать уже готовую тему для Друпала, а сделать свою или перенести шаблон с Wordpress или Joomla, то вам придется писать тему с нуля. Но для этого уже есть готовые каркасы для ваших тем.

Zen  - http://drupal.org/project/zen

Fusion - http://drupal.org/project/fusion

Adaptive Theme - http://drupal.org/project/adaptivetheme

Omega - http://drupal.org/project/omega
Самой распространенным каркасом для темы является Zen theme. Это очень удобный фреймворк для темы. По сути это готовая, "голая" трех-колоночная тема для Друпала, которая генерирует нужные нам классы. Еще один плюс темы Zen это расположение контента. Дело в том что блок контент идет впереди меню и сайдбаров. Это сделано для SEO (продвижения сайта в поисковых системах). Тем самым мы получаем сначала уникальный контент, а потом повторяющиеся части: меню, архивы, разные блоки.
Так выглядит Zen theme по умолчанию.
Друпал тема на основе Zen theme
На основе Zen я и предлагаю делать тему для сайта. Скачиваем Zen theme с сайта drupal.org . Создаем папку sites/all/themes если она у вас еще не создана. И копируем туда папку zen.

Друпал тема на основе Zen theme
Теперь нужно создать под-тему (sub-theme) от темы zen. Зачем нужно создавать подтему, если все правки можно делать в самой теме zen? Для того чтобы всегда можно было вернуть файлы к первоначальному виду, чтобы у нас был бекап для восстановления темы. Это нужно на случай если новые правки шаблоны приведут к печальным последствиям, а также для того чтобы другие люди могли посмотреть из чего вы сделали свою темы.
Копируем папку STARTERKIT  и переименовываем копию в имя своей под-темы, у меня это будет sitemade. Теперь внутри нашей темы находим файл STARTER.info.txt и переименовываем его в имя_темы.info, у меня это будет sitemade.info.

 

Друпал тема на основе Zen theme

Чтобы включить теперь нашу под-тему, нужно в админке включить тему Zen Sub-theme Starter Kit (Имя можно поменять в файле .info)
Друпал тема на основе Zen theme
Теперь на сайте включена под-тема, которую мы и будем редактировать.
Друпал тема на основе Zen theme
Сразу нажимаем на turn off this feature, и отключаем Rebuild theme registry on every page, в настройках темы.

Теперь у нас есть "голая" тема. Для начала нужно решить будет ли ширина сайта фиксированная (обычно ширина задается от 900 до 1000 пикселей) или сайт будет во весь экран, "резиновый". Если фиксированная ширина вас устраивает, то ничего менять не нужно, так как по умолчанию ширина сайта 960 пикселей.
Можно переключить в настройках темы ширину сайта на всю ширину. Для этого найдите папку css в вашей под-теме и замените текст в файле layout-fixed.css текстом из файла layout-liquid.css .

Друпал тема на основе Zen theme

Помните что в папке STARTKIT лежит копия всех этих файлов и вы всегда сможете восстановить настройки.

И последний шажок: скопируйте папку с шаблонами zen sites/all/themes/zen/templates в папку вашей темы sites/all/themes/zen/имя_новой_темы/templates. Мы можем менять шаблоны и в исходной папке с шаблонами, но лучше чтобы у нас была резервная копии под рукой.

Комментарии

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

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

Неправильно

Неправильно описано,

sites/all/themes/zen/STARTERKIT folder and rename it as sites/all/themes/foo. 
Файл с подтемой sites/all/themes/zen/STARTERKI нужно создавать в корневой папке  с темами  sites/all/themes/пример. и заменить STARTERKIT на имя своей темы и  убрать расширение txt.  /пример.info и только после этих дейсвий она появиться в админке.

Кроме того Фиксированная ширина меняется из настройки темы. 

sites/all/themes/zen/STARTERK

sites/all/themes/zen/STARTERKIT folder and rename it as sites/all/themes/foo. Файл с поддемой sites/all/themes/zen/STARTERKI нужно создавать в корневой папке  с темами  sites/all/themes/пример. и заменить STARTERKIT на имя своей темы и  убрать расширение txt.  /пример.info и только после Этих дейсвий она появиться в админке

Не согласен с таким методом. Если мы создадим в корневой папке, то уже будет не явно, что это подтема от Zen. Гораздо проще оставить подтему в папке Zen. Да и менять STARTKIT не стоит, конечно всем понятно, что всегда можно скачать zen заново и восстановить файлы,  а если человек первый раз видит zen или друпал?

К тому же когда мы оставляем все файлы как есть в папке zen и создаем еще одну подтему проще обновлять тему при выходе новой версии Zen.

Кроме того Фиксированная ширина меняется из настройки темы.

Мне кажется, что открыть два файла и скопировать из одного файла в другой очевиднее и быстрее, чем искать эту настройку в Zen.

Где ж ты раньше был

Где ж ты раньше был Иван))

Ранее мне бы очень пригодились твои уроки. Хотя у меня совсем нет знаний по php - что-то не вижу по ней видеоуроков..

Да, во, во,  я вот в теме Zen

Да, во, во, Laughing я вот в теме Zen и в Drupal только начал работать, вернее сказать только начал знакомиться с системой.

И вот чего мне не понятно.

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

Как исправить такой развал в шаблоне?? Какие хуки нужно делать и куда и что дописывать и прописывать.

Уж больно хоцца победить  этот самый IE8 и понять, как этот вопрос решать.

Попробуйте использовать

Попробуйте использовать dev-версию 5-ой версии Zen или Zen 3ей версии. Если хочеться HTML5, то используйте fusion, tundra или другую тему фреймворк с HTML5. Я не знаю в чем проблема 5ой версии Zen, я использую 3ью.

А мне больше AdaptiveTheme

А мне больше AdaptiveTheme понравилась, она для новичка она понятнее, я в этом zen'е запутался. В Adaptive изначально намного больше областей настроено и выглядит она изначально более похоже на то что я хочу сделать. Laughing

Хозяин-барин) Если вам

Хозяин-барин) Если вам удобнее AdaptiveTheme, то делайте на ней. Эта тема хороша тем, что можно задать разную ширину  и регионы в зависимости от устройства на котором сайт просматривают.

Все получилось, только вот

Все получилось, только вот это:

 

И последний шажок: скопируйте папку с шаблонами zen sites/all/themes/zen/templates в папку вашей темы sites/all/themes/zen/имя_новой_темы/templates. Мы можем менять шаблоны и в исходной папке с шаблонами, но лучше чтобы у нас была резервная копии под рукой.

 

Она все равно берет шаблоны из zen. Где нужно галочку поставить, чтобы новая тема брала шаблоны у себя, в своей папке с шаблонами?

Заголовок темы! Создаем свою

Заголовок темы! Создаем свою тему на основе Дзэн, включаю видео и слышу надо установить друпал как установить тему в чем прикол? где шаблон где верстка? в чем прикол?

 

Верстка будет дальше на

Верстка будет дальше на основе темы zen в видео-уроках показано как делать свою тему:

Темизация Drupal урок 2 Верстаем главную страницу

Темизация Drupal урок 2 часть 2 Темизация слайд-шоу (views slideshow)

Темизация Drupal урок 2 часть 3 Заканчиваем верстку главной страницы

И дальше... Можете уроки с торрентов скачать, ссылка справа.

Иван, поправь в тексте

Иван, поправь в тексте урока.

При скачивании темы в папке STARTERKIT info файл имеет имя STARTERKIT.info.txt. Если просто скопировать папку STARTERKIT с другим названием, то она не появится в списке доступных тем. Нужно переименовать STARTERKIT.info.txt в STARTERKIT.info.

Этот момент не отражён в уроке.

Здравствуйте Иван. Сделал под

Здравствуйте Иван. Сделал под тему как в Вашем уроке.

Сделал обновление темы ZEN. Теперь немогу найти свою под тему. Ее нет в каталоге ZEN хотя создавал ее именно там.

если вы через админку

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