Créer un thème personnalisé pour Drupal 8

Partager cet article :

Quand l'on travaille avec Drupal, on a rapidement besoin d'avoir un thème personnalisé ne serai-ce que pour y stocker ses templates custom et ses feuilles de styles.

Personnellement, j'ai l'habitude de faire un thème "front" et un thème "back" car j'ai souvent besoin de personnaliser le rendu de l'interface d'administration pour qu'elle convienne au mieux à mes clients.

Drupal 8 comme Drupal 7 utilise la notion de thème "parent", c'est à dire que si mon thème custom a comme parent (comme base_theme) le thème bartik, alors il reprendra toutes ses propriétés (templates, css, js...), et l'on pourra surcharger ce qui nous intéresse.

Il existe des thèmes "starter kit", on peut citer Zen (https://www.drupal.org/project/zen) par exemple qui est un des plus connu. Il s'agit en fait d'un thème parent qui propose un thème starterkit tout configuré que l'on peut ensuite personnaliser en fonction de nos besoins.

On peut aussi évidement faire ses propres thèmes custom. À noter que si vous ne prenez pas comme thème parent Bartik ou Zen, il faudra quand même prendre le thème "classy" comme parent.

Comment créer son theme ?

On va partir sur le nom de theme suivant "Mon Site Front" : on va commencer par créer le dossier mon_site_front dans le dossier /themes/custom (on pourrait le mettre directement dans /themes, mais comme pour les modules c'est une bonne pratique de différentier les élément personnalisé (custom) des éléments téléchargés (qui seront eux dans un sous-dossier "contrib").

La définition d'un thème passe, comme pour un module par un fichier mon_site_front.info.yml, en voici son contenu :

name: Mon Site Front
type: theme
description: Mon theme de demonstration
package: MonSite
core: 8.x
base theme: bartik

On doit aussi créer un fichier mon_site_front.theme, vide, qui pourra contenir plus tard nos fonction de preprocess et différents hooks.

J'ai ici pris comme thème de base "Bartik".

Une fois cela fait on passe dans le menu d'administration "Apparence" pour activer notre thème et le définir comme thème par défaut :

Pour faire un thème d'administration custom cette fois on va prendre comme base thème "Seven" :

name: Mon Site Back
type: theme
description: Mon theme de demonstration Backoffice
package: MonSite
core: 8.x
base theme: seven

Cette fois dans le menu Apparence, on devra installer le thème puis le définir comme thème d'administration :

Un thème d’administration que je trouve très sympa et qui me sert de thème parent est Adminimal (https://www.drupal.org/project/adminimal_theme).

Drupal Console permet aussi de générer des thème, via la commande drupal generate:theme, et il demande de quel thème parent notre thème custom doit hériter.

Vous pouvez retrouver les maigres sources de ce post sur github :

Ajouter un commentaire