Vous êtes ici

Une apparence personnalisée

Vous avez 30 secondes ?
S'abonner au flux d'actualités
Rubrique: 
Théorie
Difficultée: 
Facile

Le thème, du maquillage pour contenu !

Dans cette partie, nous allons nous intéresser à un tout autre aspect de Drupal: les thèmes (themes) et tout ce qui concerne l'apparence de votre site.

Le thème

Je suppose que si je vous dis qu'un même contenu peut-être affiché de manière différente, vous pouvez vous le représenter n'est-ce pas ? Par exemple pour un même site, le logo peut-être en haut à gauche ou en haut à droite. Les pages peuvent être écrites en noir sur blanc avec un aspect général bleu futuriste. Au contraire, je peux écrire en marron sur beige avec un aspect parchemin médiéval. Dans les deux cas, le contenu sera le même ! Ce qui change c'est le thème.
 
Cliquez sur les images pour les agrandir.
 
Dans ces exemples, c'est la même page du même site qui est affiché selon trois (simples et pas terribles!) thèmes. Le contenu est le même, l'affichage est différent.

Des blocs, des blocs... Comme des legos ?

Avez-vous remarqué la barre de recherche dans les exemples au-dessus ? Dans le premier exemple bleu, elle est à gauche du contenu. Dans l'exemple noir du milieu, elle est à droite. Et enfin dans l'exemple orange, elle est carrément en haut à droite, au dessus du menu. Si elle bouge autant, c'est que la barre de recherche est affichée dans un bloc appelé à juste titre 'bloc de recherche' !
 
Voilà, le mot est dit, tout contenu dans Drupal est présenté sous la forme d'un bloc (block) qui sera affecté (ou non) à une région (region) du thème. Le menu, (dans l'exemple le menu principal qui contient deux liens) est affiché dans un bloc de menu principal. Les liens de navigation (menu navigation) sont affichés dans un "bloc de menu navigation". Même le contenu (ici un article) est au sein d'un bloc de contenu qui peut être affecté à une zone particulière.
Dans tous les exemples ci-dessous, le bloc de contenu est affecté en toute logique à la région de contenu, la plus importante de la page. Pourtant, il serait tout à fait possible de déplacer le bloc "contenu" dans la région header (en-tête) du thème en orange, là où se trouve la barre de recherche. L'article se trouverait donc là, en haut à gauche, au dessus du menu principal. Ce serait perturbant pour un visiteur de votre site, mais c'est techniquement possible ! Les blocs se placent et se déplacent où vous le souhaitez dans le site, pourvu que le thème soit pourvu de suffisament de régions.
 
Concrètement, les pages de vos sites seront un assemblage de blocs disposés dans des régions disponibles. C'est le thème qui définit ces régions. Certains thèmes auront de nombreuses régions et seront donc très souples dans leur usage, d'autres le seront moins.

Séparation du contenu et de son affichage

L'un des concepts important à saisir dans Drupal, est la séparation claire à faire en le contenu et son affichage. Nous avons vu que les nœuds sont distingués par différents types de contenu, chaque type étant composé d'un assemblage de champs. Le contenu, c'est la valeur de ce champ. Non seulement il est possible de construire sa page en assemblant des blocs, mais il est également possible de modifier l'apparence de ces mêmes blocs, voir l'apparence de chaque élément ou groupe d'élément de votre site.
 
Un template est un fichier définissant comment un élément du site sera affiché à l'écran : il en détermine l'apparence. Un template est associé à chacun des éléments ou groupe d'éléments de votre site. Le template crée le code HTML qui permettra l'affichage de l'élément à l'écran et sa mise en forme CSS. Pour ceux qui ne comprendraient pas cette dernière phrase, c'est justement le but annoncé de Drupal, vous permettre de créer un site sans connaître le langage informatique. Le template va créer pour vous le code informatique nécessaire pour afficher chaque élément de votre site. Pour votre culture, sachez simplement que Drupal 8 utilise le système de template TWIG et que les fichiers templates ont pour extension .twig.
 
Par défaut, les éléments sont gérés par groupes de même nature. C'est à dire que par défaut, vous aurez un template prédéfini pour toutes les pages. Toutes les pages suivront ce template: il définit par exemple que le logo sera à gauche et que la région "contenu" sera en dessous de la région "menu",... Mais il est possible de surcharger (modifier) ce template pour certaines pages seulement. Par exemple il est possibe de définir un template propre au contenu de type petite annonce et dans lequel il n'y aura pas la région "barre latérale" par exemple. Mieux encore, vous pouvez définir un template pour "la petite annonce numéro 3 de votre site". La seule pour laquelle le logo va être placé à droite !
 
C'est donc cela un template, et il y en a pour tout. Par exemple pour les champs: par défaut, sur une page votre votre site, la valeur d'un champ est affichée sous la forme :
nom du champ : valeur du champ
Donc par exemple sur la page de profil d'un utilisateur on pourra voir :
date de naissance : 30/05/1987
âge : 26 ans
Mais vous pouvez décider que le champ "âge" des utilisateurs sera affiché complètement différemment. Par exemple :
Wow il a 26 ans !
Bon l'exemple ici est d'un intérêt limité, mais c'est une fonctionnalité très utile dans la réalité !!
 
Les templates sont eux aussi gérés par le thème choisi. Malheureusement, si vous souhaitez changer le design d'un élément qui n'est pas pris en charge par votre thème (et c'est le cas lorsque votre site commencera à être très personnalisé), vous allez ressentir le besoin de créer vos propres thèmes. C'est à cela qu'est consacrée une partie "avancée" du site où nous seront obligés de mettre les mains dans le code. Rassurez-vous, nous irons à petits pas !
Notation: 
Average: 4.5 (11 votes)
Vous avez aimé: 

Commentaires

désolée je vous bombarde avec mes quetions, mais j'ai encore des questions:
là je suis entrain d'installer un nouveau theme, mais cette fois ce n'est pas si facile comme d'habitude!?
J’ai téléchargé le theme et je l'ai extrait  dans le dossier theme, mais en suivant les instructions de téléchargement  (http://www.weebpal.com/guides/step-step-guide-install-drupal-8-theme)  j’ai dû créé une nouvelle base de donnée et selon les instructions je dois aller au premier ecran de l’installation (choix de la langue),…pour arriver à la configuration de la base de données que j’ai créé pour ce thème,  avant la fin il me dit que Drupal est déjà installé :) comment alors installer le nouveau thème ?
This post is useful!
This post is useless!
débutante complet

Bonjour,
 
Contrairement à ce que le tuto que vous indiquez annonce, ce n'est pas un thème mais un profile dont il vous montre l'installation. Un profile s'installe AVANT Drupal: c'est en fait un Drupal préconfiguré avec un ensemble de module / thème et configurations activés (quand vous avez installé Drupal, par défaut il y a deux profiles, normal ou minimal).
Vous ne pouvez donc pas suivre cette procédure pour installer le thème Zircon. Cette procédure installe le profile associé au thème Zircon !
 
 
Heureusement, il n'y a pas besoin de réinstaller / créer une nouvelle base de donnée pour simplement changer le thème de Drupal !! Vous pouvez récupérer le thème Zircon dans le dossier correspond du profile que vous téléchargerez. Il vous faudra aussi récupérer et activer l'ensemble des modules et des thèmes parents nécessaires à ce thème. Je pense qu'ils ont une procédure pour installer le thème à la main, sans en installer le profile entier, mais c'est à eux qu'il faudrait demander.
 
PS: Si vous souhaitez un site, je peux vous accompagner dans cette création: http://freelance-drupal.com !
This post is useful!
This post is useless!

Bonjour, 
En fait j'ai une question assez importante, presque tous les thèmes sont pour drupal 7 et je ne trouve pas un grand choix pour drupal 8, la même chose pour les tutorials (je cherche de l'aide ne français)....c’est pour cela, je pense d’installer drupal 7 et de créer mon site en drupal 7, à votre à vis est ce que c'est une bonne idee ? et est ce que la migration après sera faisable? compliquée, je croix même que la version drupal 9 est déjà apparu ? 
This post is useful!
This post is useless!
débutante complet

Bonjour,
La version 8 vient juste de sortir, c'est pour cela que peu de thème, peu de modules et peu de documentation (surtout en français) existent compartivement à Drupal 7 qui est sorti il y a plusieurs années. La version 9 ne sortira pas avant un bon moment !
Je vous conseille plutôt de faire votre site sous D8 si vous vous en sentez le courage, sinon évidement, ce sera sur D7.
La migration D7 -> D8 est possible et en théorie facile. En pratique cela dépend beaucoup de la complexité de votre site et de votre qualité à suivre les standards Drupal. J'ai vu beaucoup de sites programmés de sorte à fonctionner, mais ils ne seront jamais migrables et sont difficilement maintenables !
This post is useful!
This post is useless!

Bonjour,
j'ai encore une question concernant les thèmes, j'ai ajouté du contenu dans mon site(un slideshow, un menu principal,...) en travaillant d'abord avec le thème bartik, ma question c'est pourquoi en changeant le thème je trouve rien? Il sert à quoi alors le thème? Dois-je tous refaire: désactiver le logo du thème, recréer le menu? Si j’ai bien compris, non!
Dois-je d'abord choisir le thème et après créer le contenu du site ou l'inverse?
En fait je suis en stage (malheureusement non assisté) et j'ai la mission de créer le site web de l'entreprise :s
Merci d’avance de votre aide
 
This post is useful!
This post is useless!
débutante complet

Bonjour,
Vous pouvez me contacter via http://freelance-drupal.com pour un devis concernant la création de votre site pour votre entreprise.
Pas besoin de recréer le contenu. Contenu et présentation sont deux choses différentes. En revanche, il se peut que Bartik et votre thème n'est pas les mêmes noms de régions, donc que les blocs qui constituent votre contenu n'est pas trouver dans quelle région s'affecter sur votre nouveau contenu.
Aller faire un tour sur /admin/structure/block
This post is useful!
This post is useless!

Bonjour,
j'ai créé un slideshow (en utilisant les views) en Drupal 7 sans changer le thème (Bartik). Lorsque j’ai installé un nouveau thème, je n'ai pas trouver mon slideshow malgré que ce thème contient un Slideshow. J'ai cherché dans Structure/Blocs il y a une région qui s'appelle slidshow, mais elle est vide. Comment puis-je accéder à mon slideshow pour le placer dans cette région? Sachant qu'il y a qu’un seul bouton pour rajouter un nouveau bloc et pas pour accéder à un bloc déjà existant?
This post is useful!
This post is useless!
débutante complet

Bonjour,
Bartik n'a pas de région nommée "Slideshow". Vous avez dû créer un bloc contenant votre slideshow (probablement dans la région Highlighted, Featured ou Content ??) et l'affecter à une région de Bartik.
  1. Retrouvez ce bloc sur admin/structure/block/list/bartik
  2. Cliquez sur le bouton configure correspondant au block
  3. Sur la page d'edition du block, dans "Region Settings", il doit y avoir votre nouveau thème avec l'affectation "- None -", choisissez Slideshow à la place.
  4. Enregistrez le bloc
NOTE, vous pouvez faire la même chose via la page admin/structure/block.  Les blocks non affectés sont tout en bas de page. Faites le glisser jusqu'à la région qui vous plait et sauvegardez !
This post is useful!
This post is useless!

merci beaucoup, ça marche trés bien maintenant ! j'ai mnt un autre probleme avec le menu qui s'affiche dans le nouveau thème sans style sous forme de  une liste d'éléments non ordonnés.
This post is useful!
This post is useless!
débutante complet