Note: ceci est une mise à jour de mon article Créer un sous thème Drupal 9 Olivero
Note 2: cette méthode sera surement obsolète avec Drupal 11.x, un starterkit pour Olivero est en préparation.
Drupal 10 Olivero
Le nouveau thème Olivero introduit dans Drupal 9.1 est une belle nouveauté. Il est beaucoup plus moderne que le bon vieux thème Bartik, car mềme si celui-ci à été mis à jour avec Drupal 8, il garde un visuel assez ancien. Après tout il a été créé en 2010 !
Créer un sous thème Drupal 10 Olivero
Dans mon précédent article, je présentais une solution simple et rapide pour utiliser le thème Drupal Olivero avec de petites modifications. Mon objectif est d'avoir un ensemble de changements relativement simple, la taille de police, les espaces de séparation et la taille de l'en-tête. Maintenant Olivero propose le changement de la couleur principale du thème directement depuis la configuration, ce qui réduit mes modifications, merci Drupal ;)
Ma proposition pour un sous thème Olivero
En créant un sous thème, il est possible d'avoir du css, js et remplacer quelques templates.
Pour les tailles et espacements, on peut utiliser le fichier variables.pcss.css pour ajuster Olivero. Olivero utilisant PostCSS c'est donc un moyen efficace d'ajustement.
Le processus consiste à modifier ce fichier, lancer la création des fichiers css (depuis PostCSS) et copier le résultat dans notre thème. Le code doit ensuite utiliser les fichiers css de notre thème, ce qui est fait dans le fichier olivero_sub_theme.theme
Sous thème pour Drupal 10
Voici la structure de notre thème :
web/themes/custom/olivero_sub_theme/
├── css/
| ├── theme.css
| └── variables.pcss.css
├── js/
| └── theme.js
├── scripts/
| └── build.sh
├── templates/
| └── ... your templates override
├── olivero_sub_theme.info.yml
├── olivero_sub_theme.libraries.yml
├── olivero_sub_theme.theme
├── favicon.ico
└── logo.svg
Pour utiliser ce thème il suffit de télécharger mon projet d'exemple ici.
Il faut ensuite remplacer les occurrences de olivero_sub_theme dans olivero_sub_theme.theme et olivero_sub_theme.info.yml, ensuite renommer les fichiers olivero_sub_theme avec le nom de votre thème.
La seconde étape pour css est d'éditer variables.pcss.css et theme.css avec nos changement et construire le css.
Pour le JavaScript un fichier theme.js est également disponible.
Le meilleur moyen est de le faire directement depuis le dossier Olivero, on aura besoin de Yarn ou NPM pour installer et construire le css (ou avec Docker). Le thème inclut un script pour faciliter cette tâche, visible ici.
Il suffit de lancer ce script :
web/olivero_sub_theme/scripts/build.sh
Le script va installer les dépendances, construire le css et copier les fichiers générés dans le sous thème.
Bien sûr ce script doit être lancé après chaque ajustement au fichier variables.pcss.css ou theme.css. Mais il n'est pas utile de le lancer pour d'autres changements dans notre sous thème.
Résultat final
Vous pouvez consulter et cloner ce projet pour créer votre thème Olivero/