>WikiSysop в 17:29, 21 січня 2018

2018-01-21T17:29:12Z

Нова сторінка

== Установка ==

1. Сачайте Zen: http://drupal.org/project/zen

2. Разархивируйте и папку <code>zen</code> поместите в папку <code>sites/all/themes</code>

3. Авторизуйтесь как админ и перейдите Administer → Site building → Themes (admin/build/themes) и сделайте Zen или одну из его субтем темой по умолчанию.

Всего в админке станут доступны темы:
* Zen — основная тема
* Zen Classic — html и css для Zen 0.7
* STARTERKIT — заготовка для создания собственных субтем Zen

== Создание собственной субтемы Zen ==

* [http://drupal.org/node/226507 Источник] (eng)
* [http://drupal.org/node/336368 Шелл скрипт для создания субтемы] (eng, Linux)

1. Скопируйте папку STARTERKIT в папку уровнем выше и переименуйте ее. Например: <code>sites/all/themes/zen/STARTERKIT</code> в <code>sites/all/themes/my_zen_theme</code>. ВАЖНО: в имени папки допустимы только латиница в нижнем регистре и знак подчеркивания.

2. В новой папке с темой найдите файл STARTERKIT.info и переименуйте его, чтобы имя до точки совпадало с именем папки. Затем отредактируйте этот файл .info — замените STARTERKIT на имя вашей субтемы.

3. Выберите, какой дизайн нужен:

* Резиновый: скопируйте <code>layout-liquid.css</code> из папки <code>zen/zen</code> поместите в папку вашей субтемы.
* Фиксированный: скопируйте <code>layout-fixed.css</code> из папки <code>zen/zen</code> поместите в папку вашей субтемы.

Затем переименуйте этот файл в <code>layout.css</code>. Обратите внимание: в файле .info уже указан именно layout.css.

4. Скопируйте таблицу стилей версии для печати: zen/zen/print.css. Переименовывать не нужно, см. .info.

5. Скопируйте основную таблицу стилей <code>zen/zen/zen.css</code> и переименуйте в соответстви с именем папки вашей субтемы. В файле .info эта таблица стилей указывается в <code>stylesheets[all][]</code> — и там тоже должно быть указано переименованное имя файла. Например:

stylesheets[all][] = my_zen_theme.css

6. Отредактируйте файлы <code>template.php</code> и <code>theme-settings.php</code> в папке вашей субтемы. Замените все «STARTERKIT» на имя папки вашей субтемы.

7. Авторизуйтесь в Drupal как администратор и перейдите в Administer → Site building → Themes (admin/build/themes) и активируйте вашу новую субтему.

=== Опционально ===

8. Вы можете изменить все базовые таблицы стилей Zen. Для этого скопируйте соответствующие файлы .css из папки <code>zen/zen</code> в папку вашей субтемы и активируйте их в файле .info. Например, скопируйте <code>zen/zen/html-elements.css</code> в папку с вашей субтемой: <code>my_zen_theme/html-elements.css</code>, а затем отредактируйте <code>my_zen_theme/my_zen_theme.info</code>:

в строке
;stylesheets[all][] = html-elements.css
удалите точку с запятой:
stylesheets[all][] = html-elements.css

9. Вы можете изменить все шаблоны темы. Скопируйте нужный вам файл .tpl.php в папку с вашей субтемой. Например, скопируйте <code>zen/zen/page.tpl.php</code> в вашу папку <code>my_zen_theme/page.tpl.php</code>. Обязательно [[Обновить кэш Drupal | обновите кэш]] после этих изменений.

10. Темизация формы поисска: скопируйте <code>search-theme-form.tpl.php</code> из папки <code>modules/search/</code> и поместите в папку вашей субтемы. Не забудьте [[Обновить кэш Drupal | обновить кэш Drupal]].

== Принципы верстки в Zen CSS ==

=== Zen (основная тема) ===

Принципы верстки CSS в Zen основаны на малодокументированном способе «Border Politics». Вебмастер может совершенно свободно применять резиновую или фиксированную верстку, используя один и тот же корректный, упорядоченный XHTML. При этом визуальное отображение элементов страницы может отличаться от порядка, зхаданного в HTML.

Основные части страницы располагаются в HTML в таком порядке:

# Header
# Content
# Navbar
# Left sidebar
# Right sidebar
# Footer

А визуальное отображение этих частей может быть таким:

# Header
# Navbar
# Left sidebar
# Content
# Right sidebar
# Footer

Благодаря тому, что блок "Content" располагается в верхней части HTML кода страницы, сразу за "Header", сделанные таким образом страницы выше ценятся поисковыми системами.

=== Zen Classic ===

Тема "Zen Classic" использует резиновую или фиксированную верстку, основанную на CSS шаблоне стандартной друпаловской темы Garland (см. [http://positioniseverything.net/articles/jello.html Jello Mold layout]). В то же время Zen Classic существенно проще для модификации, чем Garland.

=== Другие субтемы Zen ===

http://drupal.org/node/340837

== См. также ==

* [http://drupal.org/project/zen Оф. страница Zen]
* [http://drupal.org/node/193318 Документация] (практически вся переведена здесь)
* [http://drupalschool.blip.tv/file/995843/ Getting Started with Zen] — скринкаст (eng, Drupal 5)
* [http://groups.drupal.org/zen-task-force Zen Task Force] — сообщество Zen
* [http://groups.drupal.org/taxonomy/term/5171 Theme Garden] — сайты, сделанные на Zen

[[Категория:Drupal]]
[[Категория:CSS]]

Руководство по Zen для Drupal - Історія редагувань

>WikiSysop в 17:29, 21 січня 2018