Drupal + Omega + Bootstrap: быстрое создание полностью кастомных тем оформления без верстки (Часть 2. Bootstrap)Веб- дизайн*, Drupal*Первая часть, введение. В первой части статьи я рассказал о прекрасном фреймворке Omega для Drupal, который позволяет создавать собственные темы оформления, основанные на сетке (grid), произвольно настраивать и менять расположение и размеры регионов без каких- либо модификаций HTML- кода шаблонов. На этом можно было бы и остановиться, но существует прекрасный мощный CSS- фреймворк Bootstrap, имеющий собственную реализацию сетки, большое количество готовых CSS и JS компонентов, которые очень легко стилизовать, а также огромное сообщество, благодаря которому мы получаем наиболее качественный и «вылизанный» код по сравнению с конкурентами. В этой части статьи я расскажу, как привязать Bootsrap к Omega. Но если вас по какой- либо причине не устраивает Bootstrap, то подобным образом можно прикрутить к Omega любой другой фреймворк на ваш вкус. Как и в первой части статьи, я не претендую на какую- то уникальность, просто описываю те вещи, которые можно почерпнуть из документации. Здесь будет много кода и мало картинок. Сначала опять немного теории, чтобы получить представление о том, с чем нам предстоит работать. Итак, структура фреймворка Omega: Базовая тема Alpha, в которой заложен тот самый функционал, позволяющий задавать расположение зон и регионов через настройки темы, а также вводящий в наше распоряжение базовую сетку (grid) разных типов (Fixed и Fluid) и количества колонок (1. 1стр = 150 руб это за добавление одной страницы на готовый сайт. При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. Установка фреймворка Bootstrap. Веб-разработчик в Art-collage.net. Приветствую вас на своем блоге, который посвящен веб-технологиям. В частности, сегодня я хотел бы вам рассказать о css фреймворке bootstrap, как использовать его, как установить и зачем это вообще нужно веб-разработчику. Преимущество данной верстки состоит в том, что код получается более. В папке проекта создаем папку css с пустым файлом styles.css. И гибкий способ создавать адаптивные веб-сайты. А после того, как вы освоите фреймворк Bootstrap на профессиональном. Урок 1 CSS фреймворки. В данном уроке вы научитесь работать с контентной частью нашей страницы. Базовая тема Omega, являющаяся субтемой базовой темы Alpha, в которой переопределены основные шаблоны Drupal для HTML5. Стартовые наборы (Starter kit), на основе которых нам предлагается создавать субтемы на базе Omega либо вручную, либо автоматически с использованием модуля Omega Tools. Таким образом, для того, чтобы использовать Bootstrap совместно с Omega, необходимо сделать следующее: Создать базовую тему, являющуюся субтемой Omega, которая будет подключать Bootstrap и переопределять CSS- классы сетки Omega (grid- *) в Bootstrap (span*), а также добавлять необходимые CSS- классы для стандарных компонентов Drupal (например для кнопок, системных сообщений, «хлебных крошек», нумерации страниц и прочего). Создать стартовый набор для нашей базовой темы, чтобы быстро создавать субтемы с помощью Omega Tools. Базовую тему будем создавать из стартового набора Omega HTML5 Startkit. Подготовка базовой темы и стартового набора. Копируем директорию omega/starterkits/omega- html. Использовать минифицированные версии нет необходимости, сжать CSS и JS мы сможем в дальнейшем стандартными средствами Drupal. Далее начинаем редактировать файл настроек темы omega. Сначала меняем параметры name = Omega with Bootstrap и starterkit = FALSE. Для удобства параметры в этом файле разделены на разделы. В разделах ADDITIONAL REGIONS и ZONES можем добавить необходимые нам зоны или регионы. В разделе OPTIONAL STYLESHEETS меняем все . Сюда мы также можем добавить дополнительные CSS (например, подключить Font. Awesome), которые сможем потом включать- выключать в настройках темы в разделе Toggle styles (включение/отключение стилей). Ниже раздела OPTIONAL STYLESHEETS создаем разделы OPTIONAL LIBRARIES и CSS GRID SYSTEMS: ; OPTIONAL LIBRARIESlibraries. Стартовый набор создаем также из Omega HTML5 Startkit: Копируем директорию omega/starterkits/omega- html. Но это еще не конец, а скорее только начало. Создание субтемы. Для более наглядного представления процесса, который будет происходить дальше, создадим новую тему способом, описанным в первой части статьи, с помощью Omega Tools, только в Base theme (базовая тема) выбираем Omega with Bootstrap, а в Starterkit (стартовый набор) — наш Omega HTML5 Starterkit with Bootstrap (рис. Устанавливаем нашу тему по умолчанию и переходим в настройки. На вкладке Grid settings (настройка сетки) в Grid system (тип сетки) появился новый тип Bootstrap, его и выбираем (рис. На вкладке Zone and region configuration (конфигурация зон и регионов) добавляем классы Bootstrap к зонам и регионам. В разделе Configuration зоны в поле Additional zone classes задаем значение row, а в поле Additional wrapper classes — значение container. В настройках регионов в поле Additional region classes задаем нужный класс span* по необходимому нам количеству колонок. Omega позволяет задавать произвольные классы зонам и регионам, чем мы и воспользовались сейчас, но в дальнейшем мы автоматизируем этот процесс (рис. На вкладке Toggle libraries (включение/отключение библиотек) отключаем все стандартные библиотеки Omega и включаем нашу Bootstrap (рис. На вкладке Toggle styles (включение/отключение стилей) также отключаем все стили в разделе Enable optional stylesheets (включить дополнительные стили), кроме Omega Bootstrap custom styles (all) — omega- bootstrap. Your custom global styles (all) — global. Все остальные настройки задаем в соответствии с рекомендациями из первой части статьи и сохраняем их. Затем мы можем нажать кнопку Export theme settings, скопировать настройки и вставить их в файл omega- html. В этом случае все новые темы из нашего стартового набора сразу будут настроены нужным нам образом. Темизация. Bootstrap для стилизации элементов использует классы, которые отличаются от стандартных классов Drupal. Поэтому необходимо добавить классы Bootsrtap в вывод стандартных элементов Drupal. Для этого будем использовать стандартные возможности темизации Drupal, а именно переопределим нужные нам theme. Подробнее о возможностях темизации Drupal можно узнать из раздела документации Using the theme layer (http: //drupal. Функции темизации будем переопределять в файле template. Для этого добавим в template. Как видите, еще нужно добавить row, для этого скопируем файлы шаблонов из omega/alpha/templates/zone. Код берем из соответствующих функций, немного модифицируем его под наши нужды и добавляем классы Bootstrap.«Хлебные крошки»Так как для вывода системных элементов мы используем модуль Delta Blocks, то переопределяем его функцию темизации./*** Implements theme. Если нужно в стандартный вывод Drupal добавить классы Bootstrap — просто переопределяем функцию темизации (или шаблон), все это делается стандартными средствами Drupal. Какие- то дополнительные функции можете позаимствовать из Drupal- темы Bootstrap. Также можно дополнить эти функции дополнительными параметрами, которые можно будет менять в настройках темы. Примеры настроек: символ- разделитель в «хлебных крошках», nav- tabs или nav- pills, размер и расположение нумератора страниц (pagination- large / pagination- small / pagination- mini и pagination- centered / pagination- right). Подробнее об этом можно почитать в документации Creating advanced theme settings (http: //drupal. Использование. Ну а теперь перейдем к практической части и посмотрим, как всем этим можно пользоваться. Для начала я бы рекомендовал настроить вспомогательную сетку- оверлей под ширину колонок Bootstrap. Для этого нужно отыскать PNG от базовой темы Alpha, модифицировать в их в графическом редакторе и переопределить класс alpha- grid- debug в нашем omega- bootstrap. Обратите внимание, что для использования JS- компонентов Bootstrap необходимо подключить j. Query 1. 7. x с помощью модуля j. Query Update. С помощью модуля Block Class (который упоминался в первой части статьи) очень удобно добавлять необходимые классы блокам, например стандартный well (см. В настройках отображений модуля Views есть стандартная возможность задавать произвольные классы практически всем компонентам, что открывает очень широкие возможности для использования Bootstrap. Пример 1: вывод материалов сеткой. Для этого достаточно добавить лишь добавить класс row всему представлению Other — CSS class, а в настройках класса строки форма вывода Format — Unformatted list — Settings — Row class задать класс с нужным количеством колонок, например span. Пример 2: вывод новостей по помощью Bootstrap- компонента Media object. Для этого добавляем в Format — Unformatted list — Settings — Row class класс media, в параметрах поля с изображением Style settings — Customize field and label wrapper HTML — Create a CSS class добавить класс pull- left, и в таких же параметрах поля с текстом добавить класс media- body. Другие поля можно добавить в это же поле через Rewrite results — Rewrite the output of this field, не забыв при этом сами эти поля отключить для вывода (Exclude from display). Также с помощью модуля Views Bootstrap (спасибо mrded) для оформления Views можно использовать такие компоненты Bootstrap как Thumbnails и Carousel. Ну и напоследок небольшая демонстрация некоторых возможностей получившегося у нас заготовка темы. Рисунок 6. Готовая тема с включенными отладочными блоками. Спасибо за внимание! Надеюсь, статья окажется полезной и расширит границы вашего использования Drupal. Original source: habrahabr.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
January 2017
Categories |