Тема Omega

Drupal / 22 ноября 2012
/ 2047

Я перебрал довольно много тем на которых делал сайты и каждая новая тема вызывала у меня восторг и восхищение. Однако, через некоторое время, после того как я на ней делал пару-тройку сайтов, она мне начинала надоедать и вызывать раздражение. Правда сейчас, кажется, я нашел тему, с которой, думаю не повторится судьба предшественниц. Тема эта называется Omega. Основана она на 960 grid system. Что такое 960 grid system? Это система выравнивания по сетке.

система выравнивания по сетке 

Мне, как верстальщику и дизайнеру эта система очень близка. Удобство ее заключается в том, что все зоны которые вы создаете и используете привязываются к сетке и имеют определенный размер. Что касается дизайна, то тут строго соблюдаются пропорции. Сайты сделанные на сетке имеют обычно очень качественный дизайн. Хотя испортить можно что угодно.

Готовых регионов тут столько, что любому хватит. Сетка может быть на 12, 16 и 24 колонок. Ширина фиксированная 960px, 100% или резиновая.

Устанавливаем тему Omega

Далее по списку:
1. Копируем в /sites/all/themes папку omega и отдельно папку omega/starterkits.
2. Переименовываем папку starterkits в YOUR_THEME (YOUR_THEME естественно замените на название своей темы).
У вас должны быть две папки в themes — папка omega и папка с названием вашей темы.
3. Переименовываем .info файлы в YOUR_THEME.info.
4. Переименовываем CSS файлы. Заменяем в названиях файлов YOUR-THEME на сами знаете что.
5. Редактируем .info файлы:
Удаляем это:
hidden = TRUE
starterkit = TRUE
Ищем строку которая начинается с "name =" и переименовываем там в свое название темы
6. Идем сюда: /admin/appearance и включаем свою тему. Там есть две: подтемы Альфа и Омега. Альфа попроще, омега имеет больше регионов. Я включил Омегу.

И вот что у нас получилось на главной странице:

вот что у нас получилось на главной странице 

 

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

справа имеются такие вот пимпочки 

Которыми можно временно отключить отображение сетки и регионов.

Идем в настройки нашей темы

Настройка "Grid system" — 960px или 100% (Fluid) не вызвала проблем в отличие от "Enable the responsive grid", которая поставила меня в тупик на долгое время. Гугл перевел мне это так:
"Включить реагировать сетки
Включение этой развяжет реагировать особенности макета, который, как и Альфа-Омега. Кроме того, это поможет вам очистить вашу квартиру и мыть посуду."
Я понял только последние фразы про посуду и квартиру, правда не понял, откуда они знают, что у меня дома срач.

Enable the responsive grid 

Однако, поэкспериментировав, я понял, что это просто напросто резиновая сетка, т.е. расширяемая в зависимости от разрешения монитора. 

Для себя я отключил эту опцию, так как решил использовать ширину 960px.

я отключил эту опцию, так как решил использовать ширину 960px

Зоны и регионы

Тут все довольно просто, но очень гибко. Зоны размещаются в секциях, регионы соответственно в зонах. Секций три штуки — шапка, содержимое и подвал. Все классически. В каждой секции несколько зон, в каждой зоне может быть сколько угодно регионов. Непосредственно в регионах уже размещается содержимое в блоках.
Открываем настройки зоны:

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

Здесь можно настроить вес зоны (выше - ниже), количество колонок и основной регион. Если вам не нравится 12-колоночная сетка можно переключиться на 16 или 24.
Региону можно задать ширину в колонках, количество пустых колонок которые надо пропустить перед регионом и после, зону в которой должен размещаться регион и вес.

Региону можно задать ширину в колонках 

Не путайте префикс с суффиксом с регионами. Если вы в префиксе зададите количество колонок, то они будут пустыми. Никакой другой регион их не займет. Если вам, например, надо разместить три региона в линию как на рисунке Preface First, Preface Second и Preface Third, то вам надо их расположить один под другим и задать всем префикс 0, ширину 4 колонки и суффикс 0.

Preface First, Preface Second и Preface Third 

Отладка

Здесь можно выключить отображение сетки и регионов. Это надо делать после того, как вы закончили темизацию сайта. Можно разрешить отображение регионов и сетки для определенных ролей.

можно выключить отображение сетки и регионов 

Все остальные настройки я не ковырял, а приступил непосредственно к разработке стиля. 
Сделал слепок экрана, скопировал и вставил кусок сетки в новый файл в программе photoshop и сделал из него шаблон.

скопировал и вставил кусок сетки в новый файл в программе photoshop
Здесь я и буду творить свой дизайн, который потом перенесу на сайт.

В общем примерно так. Дальше только ваша фантазия и руки. Все делается в CSS. Файлы css, в вашей теме, между прочим полностью чистые, что очень хорошо. Начинать лучше с чистого листа. Удачи.

comments powered by HyperComments