Créer un sous-thème avec Drupal 8

couleur

Créer un thème ou un sous-thème dédié à un projet Drupal 8 fait partie des actions de base lors du démarrage du projet. Un thème dédié pour le front office, mais aussi un autre thème pour le back office. Ainsi toute personnalisation du rendu en sera facilité, par l'ajout de région, styles CSS ou encore librairies JS le cas échéant.

Créer un sous-thème se fait en quelques minutes.

Dans le répertoire themes/custom du projet, créer un nouveau répertoire, que nous appellerons ici front, qui sera le nom système de notre nouveau sous-thème.

Dans ce répertoire, nous déclarons notre nouveau thème avec le fichier front.info.yml

name: Front theme
type: theme
base theme: bartik
description: 'Front theme based on bartik.'
core: 8.x

libraries:
  - front/global

regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  featured_top: 'Featured top'
  breadcrumb: Breadcrumb
  content: Content
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  featured_bottom_first: 'Featured bottom first'
  featured_bottom_second: 'Featured bottom second'
  featured_bottom_third: 'Featured bottom third'
  footer_first: 'Footer first'
  footer_second: 'Footer second'
  footer_third: 'Footer third'
  footer_fourth: 'Footer fourth'
  footer_fifth: 'Footer fifth'

Dans l'exemple ci-dessus notre nouveau thème sera un sous-thème du thème Bartik inclus dans le coeur de Drupal, nous chargerons la librairie front/global de façon permanente, et nous déclarons toutes les régions qui seront disponibles. Dans le cas d'un sous-thème, il vous faut déclarer à minima toutes les régions disponibles dans le thème de base.

Notons également que dans cet exemple nous créons un sous-thème de Bartik, mais ceci n'est pas recommandé Bartik étant un thème susceptible d'évoluer avec les mises à jour successives de Drupal Core. Privilégiez un sous-thème basée sur Classy ou mieux encore sur le thème Stable ou un fork de Classy.

Nous avons chargé la librairie front/global, nous devons donc la déclarer avec le fichier front.libraries.yml à créer toujours à la racine du répertoire de notre thème front.

global:
  version: VERSION
  css:
    theme:
      css/style.css: {}

Ici notre librairie front/global ne contiendra que le fichier de styles CSS style.css, qu'il suffira de créer dans le répertoire css/ du thème.

A noter que toutes les librairies déclarées et chargées dans le thème de base seront également chargées depuis notre sous-thème qui va donc en hériter automatiquement.

Ces 2 fichiers sont les fichiers de base, à minima, pour créer un nouveau thème qu'il nous suffira alors d'activer et de le déclarer comme thème par défaut. Nous pouvons toutefois déclarer au niveau de notre thème différentes configurations par défaut qui seront installées lors de l'activation du thème, notamment la position des différents blocks.

Si nous souhaitons que notre thème se comporte comme son thème parent lors de son activation, il nous faut copier tous les fichiers de configuration disponibles dans le répertoire config/install du thème parent, de coller tous ces fichiers dans le répertoire config/install de notre propre thème, puis de renommer et modifier ces fichiers pour qu'ils correspondent à notre nouveau thème. Si le thème parent ne dispose pas de configuration par défaut, vous pouvez alors exporter la configuration de votre projet actuel (drush cex), identifier tous les blocks positionnées de votre thème actuel, par exemple Bartik, et copier ces fichiers dans votre thème.

Par exemple le fichier block.block.bartik_local_tasks.yml devra être alors renommé en block.block.front_local_tasks.yml, et le contenu de ce fichier de configuration devra aussi être modifié pour remplacer les occurences de thème bartik par votre thème front.

langcode: fr
status: true
dependencies:
  theme:
    - front
id: front_local_tasks
theme: front
region: content
weight: -4
provider: null
plugin: local_tasks_block
settings:
  id: local_tasks_block
  label: Onglets
  provider: core
  label_display: '0'
  primary: true
  secondary: true
visibility: {  }

Il vous faudra notamment modifier la dépendance de la configuration (dependencies), son identifiant (id), et le thème (theme).

Ces étapes ne sont pas obligatoires, sachant que une fois votre thème activé, vous pouvez tout aussi bien activer et positionner tous les blocks de façon manuelle depuis la page d'administration Structure des blocks.

Après avoir activé votre thème, vous pourrez alors personnaliser autant que de besoin les styles CSS, depuis la librairie global ou d'autres librairies à rajouter, et effectuer les surcharges de templates Twig en plaçant ces templates dans le répertoire templates de votre thème.

Ces étapes sont à réaliser également pour le thème d'administration que vous utilisez, et ainsi quand cela sera nécessaire vous disposerez tout de suite du nécessaire pour modifier ou ajuster le comportement de votre back office.

Vous disposez alors de thèmes propres à votre projet, et sur lequel vous pourrez intervenir en toute liberté.

Commentaires

Soumis par Mickael Z (non vérifié) le 08/05/2020 à 17:58 - Permalien

Bonjour,

De ce que j'ai lu le thème classy ne sera plus présent lors de la sortie de Drupal 9.
Sur les thèmes existant et sur les nouvelles créations de thèmes Drupal, avec en arrière pensée la migration à Drupal 9, quel thème de base conseilles tu?

Merci,

Soumis par fabrice le 08/05/2020 à 18:05 - Permalien

Bonjour,

Halala la grande question ;-) Personnellement j'utile mon propre theme de base, qui s'appuie sur stable. J'ai commencé également un nouveau thème minimal, qui est à l'origine un fork de classy, histoire d'avoir déjà tous les templates et classes standard. Et du coup j'ai laché un peu l'affaire en ce qui concerne les différents thèmes contrib. Pas sûr de pouvoir être très pertinent sur le sujet.

Ajouter un commentaire