Note: ceci est une mise à jour de mon article Créer un sous thème Drupal 9 Olivero
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
avec nos changement et construire le css. Le meilleur moyen est de le faire directement depuis le dossier Olivero, on aura besoin de Yarn pour installer et construire le css (ou avec Docker). Le thème inclut un script pour faciliter cette tâche :
#!/usr/bin/env bash
#
# Generate and copy Olivero css and fonts to our theme for override.
_my_sub_theme=${1:-"olivero_sub_theme"}
if [[ ! -d web/core/themes/olivero ]];
then
echo -e "[ERROR] Can not find Olivero theme, are you at the root of Drupal?"
exit 1
fi
if [[ ! -d web/core/node_modules ]];
then
yarn --cwd web/core install
fi
cp -r web/core/themes/olivero/css/ web/core/themes/olivero/css.orig/
cp -f web/themes/custom/$_my_sub_theme/css/variables.pcss.css web/core/themes/olivero/css/base/variables.pcss.css
# Build the theme
yarn --cwd web/core build:css
rm -rf web/themes/custom/$_my_sub_theme/css/base/*.css web/themes/custom/$_my_sub_theme/css/components web/themes/custom/$_my_sub_theme/css/layout
cp -r web/core/themes/olivero/css web/themes/custom/$_my_sub_theme/
cp -r web/core/themes/olivero/fonts web/themes/custom/$_my_sub_theme/fonts
rm -f web/themes/custom/$_my_sub_theme/css/**/*.pcss.css
# Set back Olivero variable file.
rm -rf web/core/themes/olivero/css/
mv web/core/themes/olivero/css.orig/ web/core/themes/olivero/css/
Depuis la racine du projet il suffit de lancer ce script avec le nom machine du thème comme argument :
web/olivero_sub_theme/scripts/build.sh olivero_sub_theme
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
. Mais il n'est pas utile de le lancer pour d'autres changements dans notre sous thème.
Détails des fichiers à minima
Fichier info minimale olivero_sub_theme.info.yml
:
name: My Olivero sub theme
type: theme
base theme: olivero
description: Olivero sub theme with minimal overrides, custom js and templates.
package: Custom
core: 9.x
core_version_requirement: ^9 || ^10
libraries:
- olivero_sub_theme/global-styling
# Keep main Olivero regions to ease update.
regions:
header: Header
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
hero: 'Hero (full width)'
highlighted: Highlighted
breadcrumb: Breadcrumb
social: Social Bar
content_above: Content Above
content: Content
sidebar: 'Sidebar'
content_below: 'Content Below'
footer_top: 'Footer Top'
footer_bottom: 'Footer Bottom'
Fichier libraries minimale olivero_sub_theme.libraries.yml
:
# Drupal dev Olivero sub theme library.
global-styling:
js:
js/theme.js: {}
css:
base:
css/theme.css: {}
Le code dans le fichier olivero_sub_theme.theme
va être utilisé pour remplacer les fichiers css utilisés par notre thème.
<?php
/**
* @file
* Functions to support theming for My Sub Theme.
*/
use \Drupal\Core\Asset\AttachedAssetsInterface;
/**
* Implements hook_css_alter().
*
* Replace all css from Olivero by this theme css.
*/
function olivero_sub_theme_css_alter(&$css, AttachedAssetsInterface $assets) {
$oliveroThemePath = \Drupal::service('extension.path.resolver')->getPath('theme', 'olivero');
$myThemePath = \Drupal::service('extension.path.resolver')->getPath('theme', 'olivero_sub_theme');
// Replace all css files by our files.
foreach ($css as $cssFile => $value) {
if (strpos($cssFile, $oliveroThemePath) !== FALSE) {
$css[$cssFile]['data'] = str_replace($oliveroThemePath, $myThemePath, $css[$cssFile]['data']);
}
}
}