Создание темы на основе Bootstrap 3 для Drupal 7. Обновление

Почти год назад я написал статью  Создание темы на основе Bootstrap 3 для Drupal 7. За этот год базовая тема bootstrap, претерпела ряд изменений. Появилась масса вопросов как теперь создать тему учитывая новую структуру темы bootstrap. Я надеюсь , эта статья поможет разобраться с текущими изменениями. 

Первым приятным событием являться то что уменьшилось количество этапов создания темы. Теперь список выглядит так:

  1.     Установка Bootstrap
  2.     Создание субтемы
  3.     Настройка субтемы
  4.     Выбор типа подключения Bootstrap

С этапами определились можно начинать!

1. Установка Bootstrap

Скачать тему оформления Botstrap. Тема должна располагаться \sites\all\themes​\. Тему активировать не нужно.

2. Создание субтемы.

Внутри темы Bootstrap находиться папка starterkits. В этой папке лежат 2 варианта заготовок для субтемы cdn и less. Я буду использовать вариант CDN.

Структура субтемы

Копируем папку cdn в папку с темами \sites\all\themes​\. Далее начинается настройка темы.

3. Настройка субтемы.

Начнём с того что, переименуем папку заготовку нашей темы cdn, например в bootstrap_drupal. ​ Переходим в папку bootstrap_drupal и переименовываем файл cdn.starterkit  в bootstrap_drupal.info.

После чего отредактируем несколько строк:

name = Bootstrap drupal
description = A Bootstrap Sub-theme.

Где name имя нашей субтемы,  description - произвольное описание субтемы.

Всё после этих действий в списке тем http://мой_домен/admin/appearance появиться новая тема с названием bootstrap_drupal.

Субтема в списке тем

Это и есть наша субтема, она полностью готова к работе. Включаем её и переходим на сайт.

boostrap default theme

 

4. Выбор типа подключения Bootstrap

Имеются два способа подключения файлов фреймворка Bootstrap:

    Использование CDN
    Локальные файлы

Использование CDN

При использовании варианта c провайдером cdn, дополнительные настройки темы более не нужны. Большим плюсом   этого варианта является то что позволяет подключить 18 вариантов тем. Варианты тем легко можно подправлять под себя, внося изменения в файл style.css находящийся в папке css нашей субтемы. Для некоторых сайтов этого вполне достаточно. Минусом - у варианта с использованием cdn, более медленный отклик файлов стилей и скриптов. И как следствие меньшие возможности оптимизации и масштабирования проекта.

выбор цветовых схем

Для использования локальной версии библиотеки bootstrap необходимо:

  1.     Отключить cdn
  2.     Подключить библиотеку bootstrap
  3.     Установить и настроить модуль bootstrap_library

1. Отключение провайдера cdn

Для отключения провайдера cdn нужно в настройках темы, в разделе расширенные перевести селектор в режим "Не указано" согласно изображению ниже.

Отключение провайдера

2. Подключение библиотеку bootstrap.

Итак, перед тем как скачать файлы фреймворка bootstrap необходимо создать папку libraries , если на конечно не создана ранее (с версии drupal 7.43 она создаётся по  автоматически). Теперь осталось скачать файлы библиотеки bootstrap. Скачать можно отсюда http://getbootstrap.com/getting-started/#download

boostrap

 

Скаченную библиотеку следует переименовать из bootstrap-3.3.6-dist в bootstrap. Файлы в библиотеке должны иметь следующую структуру.

/sites/all/libraris/bootstrap/
├── css/
├── fonts/   
└── js/

3. Установить и настроить модуль bootstrap_library.

Для подключения библиотеки boostrap к субтеме поможет следующий модуль bootstrap_library. К сожалению на dupal 7  рабочим вариантом остаётся только dev версия. Устанавливается он как и все иные модули, но требует установки модуля libraries. После установки  настраиваем модуль bootstrap_library, путь к конфигурации my_domen/admin/config/development/bootstrap_library

  1. Указать версию файлов минифицированную или полную.
  2. Выбрать тему к которой будет подключена bootstrap library
  3. И какие библиотеки будем подключать
Настройка библиотеки

Для темизации темы как в первом так и во втором варианте редактируется файл style.css.

На этом создание темы закончено.

 

На момент написания статьи, я обнаружил что существует и третий вариант подключения файлов фреймворка Bootstrap. Где библиотеку можно подключить исключая дополнительные модули. То есть полностью исключить шаг 3 в пункте 4.  

Способ рабочий, но я его ещё  не тестировал, и не когда не использовал. Ниже пример настройки.

Избранное подключение

Удачи! Надеюсь я нечего не упустил.

Анна 12 мая, 2016

Спасибо Вам огромное. Доходчиво

Александр 16 июля, 2016

Разобрался. Спасибо!

mapaxa 26 июля, 2016

Хороший материал! Спасибо!

Антон 08 ноября, 2016

Спасибо, отличная статья!
А каким образом задавать классы для полей формы, кнопок, блоков, текста, изображений?

SuperAdmin 08 ноября, 2016

Тут панацеи нет. Можно через views темизировать можно использовать ряд модулей описанных а статье http://delay-delo.com/content/moduli-rasshiryayushchie-vozmozhnosti-polya-field-dlya-drupal-7. В конце концов, можно шаблоны собрать и переопределить под тип материала или блока или поля.

Антон 08 ноября, 2016

Благодарю за ответ.

Nikitos I 10 ноября, 2016

Спасибо за статью! Все сделал по шагам уже два раза. Но после того как моя подтема нормально определилась и включилась при переходе на сайт пишет:

Fatal error: Cannot redeclare bootstrap_theme() (previously declared in /home/-----.ru/docs/sites/all/themes/bootstrap/template.php:47) in /home/-----.ru/docs/sites/all/themes/EFdesign/template.php on line 47

Я понимаю, что в моей подтеме EFdesign в template.php переопределяется bootstrap_theme(), так как она уже определена в теме bootstrap. Но не понимаю что с этим делать. Подскажите пожалуйста.

Nikitos I 11 ноября, 2016

Странно что сам файл EFdesign/template.php содержит 5 строк, да и те - комментарии:

<?php
/**
* @file
* The primary PHP file for this theme.
*/
Где там 47-я строка-то?

SuperAdmin 12 ноября, 2016

Проверьте где нет ли дублированного модуля в папке modules и sites\all\modules. Похоже на дубль.

Дмитрий 14 февраля, 2017

Последней картинки не видно. Поправьте пожалуйста.

SuperAdmin 15 февраля, 2017

Спасибо. Я исправил.

Илья 16 апреля, 2017

Обратите внимание, что для правильной работы темы Bootstrap необходим модуль jQuery Update. С выбранной версией jQuery для этой темы не ниже 1.9. У меня без этого не работала кнопка меню в мобильной версии
Источник: https://youtu.be/wSKzzNNvYhI

Гость 20 апреля, 2017

Было бы интересно, если бы вы описали установку Бутстраповских тем не адаптированных изначально под Друпал. Адаптированных под Друпал встречается очень мало, а не адаптированных поле непаханное.
Например здесь есть что скачать: https://templatemag.com/free-bootstrap-templates/ Что скажете?

SuperAdmin 21 апреля, 2017

Нечего сложного в адаптации нет.
1. Создать папку с названием темы
2. Скопировать из желаемой темы все файлы, разложив по соответствующим папочкам(картинки в images, стили в css и т.д.)
3. В файле моя_тема.nfo указать нужные регионы.
4. В page.tpl.php скопировать страницу из желаемой темы. И в нужных местах вывести регионы.
За основу можно взять результат моей статьи. Который уже разворачивает новую тему. Останется добавить другой файл стилей и отредактировать page.tpl.php под себя - получим новый сайт.

sxweb 06 августа, 2017

Спасибо, статья помогла, использовал второй способ подключения библиотек.

Александр 30 августа, 2017

Третий спсоб самый лучший. Просто прописал урлы и все. Интересно можно как-то туда вставить конструкцию относительного урла. Спасибо за статью - все время забываю порядок действий и лезу на ваш сайт.

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

Похожие материалы