Подключаем к теме Omega-3.x

Загружаем тему Omega.
drush dl omega-7.x-3.1

Структура фреймворка Omega:

  1. Базовая тема Alpha, в которой заложен тот самый функционал, позволяющий задавать расположение зон и регионов через настройки темы, а также вводящий в наше распоряжение базовую сетку (grid) разных типов (Fixed и Fluid) и количества колонок (12, 16, 24).
  2. Базовая тема Omega, являющаяся субтемой базовой темы Alpha, в которой переопределены основные шаблоны Drupal для HTML5.
  3. Стартовые наборы (Starter kit), на основе которых нам предлагается создавать субтемы на базе Omega либо вручную, либо автоматически с использованием модуля Omega Tools.

Для того, чтобы использовать Bootstrap совместно с Omega, необходимо сделать следующее:

  1. Создать базовую тему, являющуюся субтемой Omega, которая будет подключать Bootstrap и переопределять CSS-классы сетки Omega (grid-*) в Bootstrap (span*), а также добавлять необходимые CSS-классы для стандарных компонентов Drupal (например для кнопок, системных сообщений, «хлебных крошек», нумерации страниц и прочего).
  2. Создать стартовый набор для нашей базовой темы, чтобы быстро создавать субтемы с помощью Omega Tools.

Подготовка базовой темы и стартового набора

  1. Копируем директорию omega/starterkits/omega-html5 рядом с директорией omega и переименовываем ее в omega_bootstrap.
  2. Переименовываем файлы starterkit_omega_html5.info → omega_bootstrap.info, css/global.css → css/omega-bootstrap.css и удаляем YOURTHEME-alpha-default-narrow.css, YOURTHEME-alpha-default-normal.css, YOURTHEME-alpha-default-wide.css, YOURTHEME-alpha-default.css.
  3. Скачиваем Bootsrtap и складываем файлы bootstrap.css и bootstrap-responsive.css в директорию css, а для файла bootstrap.js создаем директорию js. Использовать минифицированные версии нет необходимости, сжать CSS и JS мы сможем в дальнейшем стандартными средствами Drupal.

Далее начинаем редактировать файл настроек темы omega_bootstrap.info. Сначала меняем параметры name = Omega with Bootstrap и starterkit = FALSE

В разделах ADDITIONAL REGIONS и ZONES можем добавить необходимые нам зоны или регионы.

В разделе OPTIONAL STYLESHEETS меняем все [global.css] на [omega-bootstrap.css] и задаем в параметре name что-то вроде Omega Bootstrap custom styles. Сюда мы также можем добавить дополнительные CSS (например, подключить FontAwesome), которые сможем потом включать-выключать в настройках темы в разделе Toggle styles (включение/отключение стилей).

Russian
Категория: 
The code has been tested and works
Мультитег: