Regions Et Blocs
Voir au format PDF
Temps d'étude : 45 min. 
Niveau : Facile.Qu'est-ce qu'une région ? Qu'est-ce qu'un bloc ?
Un bloc est une zone d'informations ou un affichage particulier.
Une région est une zone qui contient des blocs.
Nous allons cliquer dans la barre grise > Blocs (raccourci)
Ou la barre noire > Structure > Blocs (chemin initial)
Deux onglets sont présents : Bartik pour le Front, Onglet Seven pour le Back :
Blocs > Cliquez sur : "Présenter les régions de bloc (Bartik) / Aperçu des régions des blocs (Bartik)".
Cela montre les zones disponibles pour recevoir un ou plusieurs blocs.
Chaque zone de couleur jaune représente des emplacements disponible sur le site pour diffuser des informations.
Cela varie d'un thème à un autre
Bien entendu, nous verrons un peu plus tard comment créer des régions ou créer un thème complet.
Créer un bloc avec drupal
Nous allons revenir sur la page des blocs et cliquer sur : Ajouter un nouveau bloc.
Bloc :
Titre du bloc : (vide)
Description : Ce bloc affiche mon nom et mon prénom
Corps : Votre Nom Votre Prenom
Paramètres de la région : Entête - il est possible de le placer immédiatement dans une région du back et du front.
Pages : Possibilité de préciser les urls de pages sur lesquelles le bloc doit s'afficher (ou ne pas s'afficher)
Types de contenu : Possibilité de préciser les types de contenu sur lesquels le bloc doit s'afficher (ou ne pas s'afficher)
Rôles : Possibilité de préciser les rôles d'utilisateurs pour lesquels le bloc doit s'afficher (ou ne pas s'afficher)
Utilisateurs : Possibilité de préciser des options d'affichages supplémentaires par utilisateur.
Une fois que vous avez enregistré le bloc, il doit être présent dans la région entête.
Si vous avez oublié de l'affilier à une région, vous pouvez toujours le faire sur la page des blocs.
Vous pouvez rafraichir le FRONT.
Le bloc est présent et si vous êtes toujours connecté en tant qu'Administrateur, une petite roue vous permet de configurer le bloc pour apporter des modifications :
Si vous avez bien compris le principe, je vous propose de retirer le bloc " propulser par Drupal" ainsi que placer le formulaire de recherche en bas
Personnaliser l'affichage d'un bloc. Le Module Block Class
Si l'on souhaite modifier l'apparence du bloc que l'on vient de créer, nous allons télécharger et activer le module Block Class.
Block Class est un module permettant d'ajouter des classes CSS (en vue d'une meilleure personnalisation)
Nous allons récupérer le module BLOCK_CLASS en version 7 sur la page officielle : https://www.drupal.org/project/block_class
Nous allons dans le dossier sites/all/modules pour ne pas le mélanger avec les modules d'origine.
sites/all/modules: décompressez Pathauto
Nous retournons sur la partie suivante : barre noire > modules.
Nous activons Block Class.
Si nous retournons dans la partie : barre noire > structure > blocs (ou bien : barre grise > blocs)
Nous allons modifier / configurer notre bloc nommé "Nom Prénom" et voir apparaitre une case de saisie permettant de renseigner une classe CSS :
Nous renseignons une classe CSS : nom-prenom.
Nous allons retourner sur le FRONT en cliquant sur l'icone de la maison ou en rafraichissant la page d'accueil déjà ouverte (clavier : F5).
Avec FireBug nous pouvons constater la présence de cette classe CSS :
Ce sera plus pratique pour personnaliser l'affichage ! Ainsi nous pourrons modifier le style CSS du thème...mais dans l'idéal, il serait judicieux de continuer à personnaliser notre site toujours avec l'interface d'administration BackOffice.
InformationsD'une manière générale, Un module peut s'ajouter en front ou en back et augmenter les capacités de drupal en apportant une fonctionnalité, une page de configuration, un type de contenu, un bloc, un onglet, une case de formulaire, etc.
Éditer du code CSS. Le Module CSS INJECTOR
CSS INJECTOR est un module permettant d'ajouter des feuilles de style CSS et d'apporter du code (en vue d'une meilleure personnalisation)
Nous allons récupérer le module CSS_INJECTOR en version 7 sur la page officielle : https://www.drupal.org/project/css_injector
Nous allons dans le dossier sites/all/modules pour ne pas le mélanger avec les modules d'origine.
Nous retournons sur la partie suivante pour l'activer : barre noire > modules.
Ce module n'a pas de dépendance.
Nous pouvons cliquer sur le lien configurer directement après avoir activé le module CSS_INJECTOR.
Nous allons styliser la classe CSS que nous avions définie par l'intermédiaire de BLOCK_CLASS.
admin/config/development/css-injector> Create a new rule.
Titre : Feuille de style pour les blocs.
Code :
.nom-prenom{color : green; font-size: 25px; }Il est possible que notre bloc possède d'autres classes CSS générées par Drupal qui contiennent une régle CSS différente, dans ce cas il faudra prévoir l'utilisation du !important pour prendre la priorité, exemple :
.nom-prenom{color : green !important ; font-size: 25px !important; }
Pour prendre la priorité sur des régles css contraire, une autre méthode consiste à préciser toute la hierarchie (en séparant par des espapces) :
body div#page .nom-prenom{color : green; font-size: 25px; } AttentionA ne surtout pas faire : Il ne faut surtout pas aller dans les feuilles de style CSS natives dans Drupal pour retirer le code CSS qui vous dérange, car ce code est peut être utilisé à d'autres endroits, cela vous rendra peut-être service sur le coup mais pourra casser une mise en forme ailleurs et vous faire perdre du temps.
Il est possible de lister les pages sur lesquelles nous voulons intégrer la feuille de style, par exemple : page/* (pour cibler tous les contenus ayant une url commençant par page/ - ou simplement en précisant accueil)
En effet, ce n'est pas notre cas mais parfois lorsqu'on élabore un code CSS ne s'appliquant que pour une sous partie d'une seule page il n'est pas utile de "charger" certaines feuilles de style partout sur le site. Cette gestion permettra d'assurer de meilleures performances.
D'autre part, c'est une bonne chose d'avoir la possibilité d'éditer les CSS en direct du BackOffice, car cela évitera d'aller chercher le fichier style.css sur le serveur FTP lors de la mise en prod (= production = mise en ligne).
Pour finir, si votre client (ou administrateur, a qui vous livrez le site) à quelques compétences en CSS, il pourra faire évoluer l'affichage facilement.
Comment ajouter un lien de menu au BackOffice de Drupal ?
Par exemple, prenons le cas de CSS INJECTOR :
Nous retournons sur la partie suivante pour l'activer : barre noir > modules.
Par défaut, sa page de configuration est accessible dans la partie : barre noire > configuration > CSS injector
Si nous voulions ajouter CSS_INJECTOR dans la barre grise, il faudrait cliquer sur le "+" pour l'ajouter en tant que raccourci.
Si nous voulions l'ajouter dans la barre noire, il faudrait se rendre dans : barre grise > menu (ou barre noir > structure > menu)
Ensuite ciblez le menu "Management" (pour le backOffice) et cliquez sur le lien : lister les liens
Ensuite, un nouveau lien est présent : Ajouter un lien
Cliquons dessus et saisissons un titre + un chemin
Titre : Gérer le code CSS
Chemin : admin/config/development/css-injector (cette url n'est pas à deviner mais a copier/coller et a récupérer sur la page de paramètrage du module).
Cliquez sur Enregistrer
Dorénavant si vous vous rendez dans : barre noire > structure.
Vous verrez votre rubrique : Gérer le code CSS.
Bravo ! Vous venez de personnaliser le BackOffice de Drupal !
