Créer son site avec Drupal 8
Créer son propre thème à partir du thème Bartik
Les thèmes par défaut de Drupal ne sont pas toujours adaptés aux besoins de l'utilisateur. Il est cependant possible de créer son propre thème de A à Z ou bien d'adapter un thème déjà existant. Dans ce chapitre, le thème Bartik sera modifié.
Le thème Bartik est un des thèmes par défaut de Drupal 8. Les fichiers de ce thème se situent dans le dossier Core de Drupal. Il est donc conseillé de ne pas y toucher. Un dossier comprenant le nouveau thème va alors être créé, en ayant comme base le thème Bartik.
Créer un nouveau thème
Créer un nouveau dossier dans le dossier themes. Le nom du nouveau thème ne doit comporter ni espaces ni caractères spéciaux.
Copier tout le contenu du dossier core/themes/bartik et le coller dans le dossier précédemment créé.
Ce dossier contient alors :
color/
config/
css/
images/
logo.svg
bartik.breakpoints.yml
bartik.info.yml
bartik.libraries.yml
bartik.theme
templates/
La première étape à effectuer est de changer le nom bartik de tous les fichiers par le nom du nouveau thème.
bartik.breakpoints.yml
bartik.info.yml
bartik.libraries.yml
bartik.theme
config/schema/bartik.schema.yml
Une fois fait, il faut modifier le contenu des fichiers
Dans les fichiers montheme.breakpoints.yml, montheme.libraries.yml et montheme.schema.yml, remplacer le mot bartik par montheme.
Le fichier montheme.breakpoints.yml défini les différents points de rupture du thème.
Le fichier montheme.libraries.yml déclare tous les fichiers css et js utiles au thème. Si une nouvelle feuille de style est créée, elle devra être placée dans le dossier css/ et être déclarée dans ce fichier.
Le fichier montheme.schema.yml défini le schéma pour les fichiers de configuration du thème.
Ouvrir maintenant le fichier le plus important : montheme.info.yml
Dans ce fichier sont renseignés :
- le nom du thème : apparaît dans l'onglet Apparence de Drupal.
- le thème de base : le thème dont hérite le nouveau thème
- les librairies utilisées
- les régions du thème
- la version de Drupal
Changer le nom du thème, celui-ci peut comprendre des espaces et des caractères spéciaux. Le thème montheme hérite du thème bartik.name: Mon thème
type: theme
base theme: bartik
description: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'
package: Core
# version: VERSION
# core: 8.x
libraries:
- montheme/global-styling
ckeditor_stylesheets:
- css/base/elements.css
- css/components/captions.css
- css/components/table.css
- css/components/text-formatted.css
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'
# Information added by Drupal.org packaging script on 2016-03-02
version: '8.0.5'
core: '8.x'
Enregistrer les modifications.
Le dossier color du thème permet de modifier l'apparence du thème comme vu dans le chapître "Modifier l'apparence d'un thème". Il faut remplacer le nom bartik par le nom du thème afin de lui attribuer les codes couleur modifiés lors de l'enregistrement.// Preview files.
'preview_library' => 'montheme/color.preview',
'preview_html' => 'color/preview.html',
// Attachments.
'#attached' => [
'drupalSettings' => [
'color' => [
// Put the logo path into JavaScript for the live preview.
'logo' => theme_get_setting('logo.url', 'montheme'),
],
],
],
Une fois tous les mots bartik remplacés, se rendre ensuite dans le menu Apparence, le nouveau thème créé se trouve dans les thèmes désinstallés.
Cliquer sur "Installer et définir par défaut". L'apparence du site avec ce thème est identique au thème Bartik puisque rien n'a encore été modifié.
Ajouter des nouvelles régions au thème
Le thème est structuré selon plusieurs régions. Pour apercevoir les différentes régions du thème, il faut se rendre dans le menu Structure/Mise en page des blocs, puis cliquer sur le lien Aperçu des région des blocs(Mon thème).
Pour ajouter une nouvelle région à ce thème, ouvrir le fichier montheme.info.yml. Dans la partie régions, définir la nouvelle région. Par exemple, le thème possèdera deux colonnes de largeur égale placées sous le contenu. La déclaration des deux régions se fera de cette façon :
featured_left: 'Colonne de gauche'
featured_right: 'Colonne de droite'
Le premier élément "featured_left" ne doit comprendre ni espaces ni de caractères spéciaux. Il sera utilisé dans le code.
Le deuxième élément 'Colonne de gauche' est le nom donné à la région. Ce nom apparaîtra dans Structure/Mise en page des blocs pour désigner les différentes régions des blocs.
L'ordre des régions ne se définit pas au hasard, il se fait selon la position des régions des blocs. Ces nouvelles régions doivent être placées sous le contenu, elles sont définies sous la région Content.
regions: breadcrumb: Breadcrumb
content: Content
sidebar_first: 'Sidebar first'
sidebar_second: 'Sidebar second'
featured_left: 'Colonne de gauche'
featured_right: 'Colonne de droite'
featured_bottom_first: 'Featured bottom first'
featured_bottom_second: 'Featured bottom second'
featured_bottom_third: 'Featured bottom third'
footer_first: 'Footer first'
Enregistrer les modifications.
Se rendre dans le menu Structure/Mise en page des blocs, les nouvelles régions sont présentes dans la liste des régions des blocs. Si elles n'apparaissent pas, cela est dû aux caches, il faut donc les effacer.
Les régions ont été créées mais ne sont pas encore implantées dans le thème. Pour les intégrer, ouvrir le fichier page.html.twig dans le dossier templates. Ce fichier constitue tout le html du thème.
Écrire les lignes de code suivantes juste après la div fermante du contenu principal (ligne 100) :
{% if page.featured_left or page.featured_right %}
<div class="featured-two">
<aside class="layout-container clearfix" role="complementary">
{{ page.featured_left }}
{{ page.featured_right }}
</aside>
</div>
{% endif %}
La première ligne est une condition qui crée le code html de la région si cette dernière n'est pas vide. Si la colonne de gauche ne contient aucun bloc, le html de cette région ne sera pas créé et la colonne de droite s'affichera à la place de la colonne de gauche.
La classe featured-two permet la mise en page de zone contenant les deux régions. Cette classe peut bien sûr être nommée autrement.
Les deux régions sont déclarées à l'intérieur d'une balise aside par page.featured_left et page.featured_right.
Enregistrer le fichier. Dans l'aperçu des régions des blocs, les deux régions sont bien situées à l'emplacement désiré.
Ajouter des blocs dans les régions pour les voir apparaître sur le site.
Pour le moment, la zone contenant les deux régions n'a pas été mise en page.
Une feuille de style doit être créée. Elle se nommera featured-two.css (ou autrement selon la classe donnée précédemment).
Pour cela, créer un nouveau fichier css dans le dossier css/components ou copier le fichier css/components/featured-bottom.css.
Remplacer tous les sélecteurs featured-bottom par le nom de la classe, ici featured-two.
Les régions sont deux colonnes de même largeur. Changer la valeur de width (largeur) par 50% au lieu de 33%.@media all and (min-width: 560px) {
.featured-two .region {
float: left; /* LTR */
position: relative;
box-sizing: border-box;
padding: 20px 15px 30px;
width: 50%;
}
[dir="rtl"] .featured-two .region {
float: right;
}
}
Ensuite, cette feuille de style doit être déclarée et chargée par Drupal. Comme précisé précédemment, les feuilles de style sont déclarées dans le fichier montheme.libraries.yml.
Pour déclarer la feuille de style, indiquer le chemin de la feuille de style comme suit :css:
base:
css/base/elements.css: {}
component:
...
css/components/featured-two.css: {}
Les deux régions sont maintenant ajoutées dans le thème. Ne pas oublier d'effacer les caches pour voir les modifications apportées.
Dans l'aperçu des blocs, les deux colonnes ont une largeur de 50% et sont côte à côte.
Sur le site, les deux nouvelles régions s'affichent bien comme souhaité.
De cette manière, il est possible d'ajouter ou d'enlever des régions afin d'obtenir un thème personnalisé à l'image de l'utilisateur.