Le thème ‘Bootstrap’ et Bootstrap dans Drupal 7

La problématique : Le thème ‘Bootstrap’ pour Durpal 7 propose uniquement une version 3.0.2 de Bootstrap alors que la version en cours de Bootstrap est la 3.3.2.
Voici une solution ‘propre’ pour utiliser une version récente de Bootstrap avec le thème ‘Bootstrap’ pour Drupal 7

Plusieurs étapes :

1. Installer le thème Drupal ‘Bootstrap’
2. Réaliser un thème ‘enfant’
3. Récupérer Bootstrap manuellement
4. Utiliser Bootstrap en tant que Librairie (avec un module)
5. Configurer le thème pour utiliser le Bootstrap de la librairie (et non pas celui du thème)
6. Rapatrier l’overrides CSS du thème pour l’intégration avec Drupal

Etape 1 : Installer le thème Drupal

Ca se télécharge là (https://www.drupal.org/project/bootstrap) et il faut l’installer dans sites/all/themes

Activer le thème depuis l’administration de Drupal

Etape 2 : réaliser un site ‘enfant’

Depuis le theme ‘Bootstrap’, copier le dossier ‘bootstrap_subtheme’ dans le site en cours

Ajuster le le fichier ‘bootstrap_subtheme.info.starterkit’ pour le thème du site en cours : ‘theme_du_site_en_cours.info’

Etape 3 : Récupérer Bootstrap depuis la source officielle

Récupérer Bootstrap depuis la source officielle : http://getbootstrap.com/getting-started/#download : « Download Bootstrap » (pas les sources)

Placer et renommer le dossier ‘Bootstrap’ dans sites/all/libraries

Etape 4 : Récupérer le module  ‘Bootstrap Library’

Récupérer le module ‘Bootstrap Library’ https://www.drupal.org/project/bootstrap_library
Ainsi que sa dépendance ‘Libraries’ https://www.drupal.org/project/libraries

Activer le module pour pouvoir profiter du Bootstrap installé à l’étape 3

Etape 5 : Configurer le theme

Configurer le theme pour ne pas utiliser le bootstrap en CDN (depuis un dépôt) mais la version installée à l’étape 3

Dans la configuration du thème : Menu Apparence -> Paramètre -> site_en_cours
Dans Bootstrap Settings -> Advanced -> Bootstrap CDN
Désactiver la version à utiliser (premier choix de la liste déroulante)

Etape 6 : Récupérer le fichier css ‘overrides.css’

Récupérer le fichier css ‘overrides.css’ depuis le thème ‘Bootstrap’ installé dans sites/all/theme/css vers le dossier css du thème du site en cours

Cette étape est importante pour garder la compatibilité entre Bootstrap et Drupal. Sans cette modification, l’interface de Drupal est mal intégrée et des problèmes d’affichages perturbent la manipulation de Drupal (barre de navigation de Drupal en arrière plan du site et non pas au premier plan…)

Modifier le fichier ‘theme_du_site_en_cours.info’ du thème enfant pour charger avec les CSS la feuille overrides.css

;;;;;;;;;;;;;;;;;;;;;
;; Stylesheets
;;;;;;;;;;;;;;;;;;;;;
stylesheets[all][] = css/overrides.css

Le theme Drupal 7 ‘Bootstrap’ utilise maintenant une version embarquée de Bootstrap stable.
L’utilisation de Bootstrap en tant que librairie permet une gestion simplifiée en cas de multi-sites.

🙂