Bootstrap 4 dans Drupal 8/9 avec Bootstrap Barrio

Nous allons utiliser Bootstrap 4 dans Drupal 8/9 avec Bootstrap Barrio. Le thème Bootstrap Barrio pour Drupal 8/9 intègre Bootstrap 4 (ou Bootstrap 5 si vous le souhaitez) à votre site Drupal.

Bootstrap est un framework très populaire pour la création de sites Web. Il fournit aux concepteurs et aux développeurs un langage commun pour communiquer, ce qui facilite grandement le processus de développement.

Créer un sous-thème de Barrio est un processus simple. Ce didacticiel explorera les options de configuration de base du thème, qui sont gérées via une interface utilisateur graphique complète.

Continuez à lire pour savoir comment!

Étape # 1.- Installez le thème

Avant de commencer, assurez-vous que votre site contient au moins un article, afin de pouvoir faire une comparaison après avoir modifié les paramètres du thème. Placez également un bloc à l'intérieur de la barre latérale de la région en second lieu (Structure > Disposition des blocs > Placer le bloc).

• Ouvrez l'application terminal de votre système d'exploitation.
• Placez le curseur à la racine de votre installation Drupal.
• Type : composeur nécessite drupal/bootstrap_barrio

Cela téléchargera la dernière version stable du thème sur : /web/themes/contrib/bootstrap_barrio

Étape # 2.- Créer un sous-thème

• Placez le curseur sur le répertoire du thème bootstrap_barrio
• Tapez :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

Cela rendra exécutable le script appelé create_subtheme dans le dossier des scripts et l'exécutera également.

Le script demandera un nom de machine et un nom descriptif pour votre sous-thème personnalisé.

Entrez les valeurs qui vous conviennent le mieux. N'oubliez pas que le nom de la machine doit être en minuscules et ne doit pas contenir d'espaces.

Cette étape est facultative :

• Ouvrez le répertoire de votre sous-thème (/web/themes/custom/mytheme) dans un éditeur de code
• Remplacez toutes les instances de `Bootstrap Barrio` par `Nom de votre thème`
• Enregistrer tous les fichiers

Ici, nous ne changeons que le texte descriptif, il n'y aurait donc aucun problème si vous le laissiez tel quel.

Étape # 3.- Les paramètres Bootstrap Barrio

• Cliquez sur Apparence sur le backend de votre site Drupal
• Faites défiler jusqu'à votre thème personnalisé
• Cliquez sur Installer et définir par défaut

Une fois le thème installé,

• Cliquez sur le lien Paramètres du thème

Vous verrez un groupe d'onglets verticaux sur le côté gauche de l'écran avec les options suivantes :

1. Mise en page (onglet actif)
2. Composants
3. Affixe
4. Défilement Espion
5. Polices et icônes
6. Couleurs

Disposition

Par défaut, l'onglet "Mise en page" est actif. La première option `Container` précise si les éléments de votre site auront une largeur fixe, ou au contraire seront affichés sur toute la taille de l'écran. Laissez cette option intacte maintenant.

Dans la section "Région", il est possible d'attribuer des classes CSS personnalisées aux régions du site.

• Ajoutez votre propre classe personnalisée à une région particulière

• Fermer la section "Région"
• Ouvrir la "position de la barre latérale"
• Modifiez la valeur de "Position des barres latérales" sur Gauche
• Ouvrez `Première disposition de la barre latérale` et `Première disposition de la barre latérale`
• Changez les valeurs en 3 cols et 2 cols respectivement

Composants

• Cliquez sur l'onglet vertical "Composants"
• Modifiez l'élément Button au format de contour
• Cochez Appliquer le style img-fluid à toutes les images de contenu

Cela rendra les images que vous insérez via le bouton d'image de l'éditeur de contenu, réactives par défaut. L'image sera réduite pour s'adapter à la taille de l'écran.

La section `Structure de la barre de navigation` traite de la taille du conteneur de la barre de navigation. Vous devez différencier deux barres de navigation (navbar-top et navbar). La barre de navigation est le menu de navigation principal de votre site.

• Changez la position de la barre de navigation en Bas fixe et la couleur du lien de la barre de navigation en Sombre
• Cochez Barre de navigation coulissante dans la section "Comportement de la barre de navigation", afin d'afficher un menu principal coulissant sur de petits écrans

Les 3 dernières sections de l'option de configuration `Components` font référence à la position des messages délivrés par le système de messagerie interne de Drupal, aux onglets pour les tâches locales (comme l'onglet d'édition de contenu) et à l'apparence des éléments de formulaire. Laissez ces options intactes.

Affixe

Avec affixe, il est possible de fixer un élément, c'est-à-dire de fixer la valeur de la propriété CSS position à fixed.

Scrollspy

Scrollspy est utilisé pour mettre à jour automatiquement les liens d'un menu de navigation, en fonction de la position du curseur, c'est-à-dire si vous faites défiler vers le haut ou vers le bas sur le site. Ce sujet sera traité dans un prochain tutoriel.

Polices et icônes

Ici, vous avez la possibilité de choisir entre différentes combinaisons de polices Google Fonts pour le texte de votre site. De plus, vous pouvez choisir entre des ensembles d'icônes prédéfinies à utiliser sur vos publications.

• Choisissez la combinaison de polices et le jeu d'icônes de votre choix

Couleurs

Vous avez ici des options pour personnaliser la couleur des messages internes de Drupal. Il existe des options pour personnaliser les tableaux du site, par exemple, ceux générés avec le module Vues.

Si vous continuez à faire défiler vers le bas, vous trouverez le "Schéma de couleurs" pour votre sous-thème. Vous pouvez personnaliser les couleurs du texte et de l'arrière-plan des régions thématiques par défaut.

Vous pouvez personnaliser la couleur de chaque élément à votre guise et le bloquer, en utilisant l'icône de verrouillage.

Affichage des éléments de la page, image du logo et favicon

Ce sont des options par défaut dans tous les thèmes Drupal.

Charger la bibliothèque

Vous pouvez choisir entre plusieurs bibliothèques Bootswatch en ligne prêtes à l'emploi pour améliorer l'apparence de votre thème en un seul clic. Ces options valent la peine d'être vérifiées.

Il est possible de choisir ici si vous souhaitez charger Bootstrap (Bootstrap CSS et JS) localement ou via un CDN. Cette configuration ne doit pas être modifiée ici. Il est préférable de modifier le code dans le fichier .info.yml .

• Cliquez sur Enregistrer la configuration

Jetez un oeil à votre site. Ce didacticiel n'a pas pour but de vous apprendre la conception d'interface utilisateur, mais plutôt d'expliquer les possibilités offertes par le thème Barrio.

Cependant, vous pouvez maintenant partir d'un design et essayer d'adapter le thème à celui-ci.

J'espère que ce tutoriel vous a plu. Merci d'avoir lu!