Mon thême
Réaliser son propre thème nécessite 3 étapes.
- Préambule
- Définir la maquette ( sur le papier !) de l'organisation de la page
- Les fichiers pour réaliser la maquette
- Créer ou Adapter les fichiers de gabarit.
0. Préambule
Pour faciliter la compréhension de ce billet, je décide que mon thème se nommera "dh".
Dans l'organisation des thèmes (voir ici) de Drupal V8, (cela signifie donc que les fichiers réalisant ce thême seront stockés dans un dossier intitulé "dh" situé sous theme/custom (ie : theme/custom/dh)
Ce nom devra être repris dans les noms des fichiers décrivant le thème :
- dh.info.yml (définition des bibliothèques et des régions (cf : la maquette) - voir son contenu dans l'onglet dh.info.yml ci-dessous - cliquez ICI et ICI pour plus d'info
- dh.librairies.yml (liste des fichiers JS et CSS).. en savoir plus...
- dh.theme ( modification du comportement par défaut de drupal)
1. La maquette
Ci-dessous figure la maquette du site à réaliser. En jaune, figurent les régions tels qu'elles doivent être définie dans le fichier "dh.info.yml" du thème et tel qu'un administrateur pourra les visualiser dans la page du menu d'administration " dont le lien url est admin/structure/block" (ou dans structure - mise en page des blocs en suivant les items du menu) en cliquant sur le lien "aperçu des régions des blocs" .
La mise en page du site se décompose donc ainsi :
- un entête pour essentiellement le logo du site et le menu principal.
- une colonne à droite pour l'agenda, le bloc de recherche....
- une colonne centrale ou figureront les articles qui est formée de :
- un menu "fil d'ariane";
- 3 blocs d'information (aide ; mise en évidence ; caractéristique) ;
- le bloc pour afficher le contenu des billets ;
- le pied de page
- une colonne à gauche pour le menu contextuel, le calendrier...
soit 10 régions au minimum.
2. Les fichiers pour réaliser la maquette
Dans Drupal V8, comme dans tout site web, 2 types de fichiers sont utilisés :
- le premier se décline en HTML ( php, html, twig..) et définit la structure ("layout") de la page ;
- le second est une feuille de style CSS
La mise en page (layout) du site est réalisée dans le fichier "page.html.twig" situé dans le dossier template du thème (ie : du dossier dh dans notre cas). Voir son contenu dans l'onglet ci-dessous.
En html5, il y a des balises spécialisées pour la mise en page globale, à savoir :
- <header> pour les entêtes.
- <nav> pour les menus.
- <article> pour le contenu proprement-dit.
- <aside> pour les colonnes.
- <footer> pour les pieds de page.
- <section> pour le reste .
Il peut être très utile de préciser la définition de la balise, par exemple pour la distinguer ( l'identifier) d'une autre. C'est le rôle de l'attribut : role.
Dans la feuille de style, dont un extrait est affiché dans l'onglet style.css ci-dessous, on lira donc ce genre de ligne : aside[role="colonne-gauche"] qui met en forme le contenu de la balise du codage html : <aside role="colonne-gauche> ....</aside>
Notons les largeurs de chacune des régions 19% + 50% + 20% = 99% de la largeur d'affichage disponible et l'élément "display:inline-block" sans lequel les 3 régions s'afficheraient les unes sous les autres.
Voir également la page sur la technologie flexbox qui fournit les dernières balises CSS pour la mise en page
3. Quelques exemples de fichiers
dans le presse papier
name: dh
type: theme
description: 'mon premier theme drupal 8'
package: dh
core: 8.x
libraries:
- dh/global-styling
base theme: classy
logo: images/dhsite.gif
screenshot: images/screenshot.png
stylesheets-remove:
- core/assets/vendor/normalize-css/normalize.css
- core/modules/system/css/system.module.css
- core/modules/system/css/system.theme.css
- core/modules/views/css/views.module.css
- core/themes/classy/css/components/book-navigation.css
regions:
header: Header
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
content: Content
help: Help
breadcrumb: Breadcrumb
page_top: 'Page top'
page_bottom: 'Page bottom'
highlighted: Highlighted
featured: Featured
sidebar_first: 'Left sidebar'
sidebar_second: 'Right sidebar'
footer: Footer
search_area : 'Search area'
dans le presse papier
<header role="banner" class="branding clearfix">
{# / afficher tous les blocs qui ont été assignés à la section "header" #}
{{ page.header }}
</header>
<main role="main">
<section role="contenu">
<aside role="colonne-gauche" >
{% if page.sidebar_first %}
{# / colonne-gauche ( region--sidebar_first.html.twig #}
{{ page.sidebar_first}}
{# / fin de colonne-gauche #}
{% endif %}
</aside>
<article role="main">
{# / colonne-centrale : le contenu ( region--content.html.twig #}
{# le menu breadcrumb ( breadcrumb.html.twig #}
{{ page.breadcrumb }}
{% if page.highlighted %}
<aside role="highlighted">
<div class="section clearfix">
{{ page.highlighted }}
</div>
</aside>
{% endif %}
{% if page.help %}
<aside role="help">
<div class="section clearfix">
{{ page.help }}
</div>
</aside>
{% endif %}
{% if page.featured %}
<aside role="featured">
<div class="section clearfix">
{{ page.featured }}
</div>
</aside>
{% endif %}
{# le contenu de la page #}
{{page.content}}
<footer role="pied-de-page">
{% if page.footer %}
{{ page.footer}}
{% endif %}
</footer>
</article> <!-- /main -->
{# / fin de colonne-centrale #}
<aside role="colonne-droite" >
{% if page.sidebar_second %}
{# / colonne-droite ( region--sidebar_second.html.twig #}
{{ page.sidebar_second }}
{# / fin de colonne-gauche #}
{% endif %}
</aside>
</section> <!-- /contenu -->
</main>
dans le presse papier
article[role = "main"], aside[role = "colonne-gauche"], aside[role = "colonne-droite"] {
position:relative;
display: inline-block;
vertical-align: top;
text-align: justify;
}
article[role="main"] {
width: 55%;
text-align:justify;
position:relative;
background: white;
margin: 0em 0 0em;
padding: 0em 0.5em 2em 0.5em;
border-radius: 15px 15px 15px 15px;
box-shadow: 0px 2px 5px #1c1a19;
}
aside[role="colonne-gauche"] {
width: 19%;
padding: 5px;
font-size: 0.9em;
padding: 0.5em 0.5em;
text-align: center;
}
aside[role="colonne-droite"] {
width: 20%;
padding: 5px;
font-size: 0.9em;
padding: 0.5em 0.5em;
text-align: center;
}
Cliquez ici pour afficher ces fichiers dans une fenêtre surgissante