Créer un thème

Réaliser son propre thème nécessite 3 étapes.

  1. Préambule
  2. Définir la maquette ( sur le papier !) de l'organisation de la page
  3. Les fichiers pour réaliser la maquette
  4. 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 pour plus d'info
  • dh.librairies.yml (liste des fichiers JS et CSS).. en savoir plus...
  • éventuellement dh.theme ( modification du comportement par défaut de drupal)
information complémentaire disponible en cliquant ici
Consultez les pages Gérer-site niv2 pour plus étudier comment agir sur ces fichiers.

1. La maquette

L'image ci-dessous montre la maquette du site à réaliser. En jaune, figurent les régions à définir dans le fichier "dh.info.yml" du thème et tel qu'un administrateur pourra les visualiser en cliquant sur le lien "aperçu des régions des blocs" de 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)

Cliquer pour agrandir l'image

Les régions décrites ci-contre devront figurer dans le fichier dh.info.yml dans le dictionnaire regions :

 regions:
     header: "L'entête"
     sidebar_first: 'La colonne gauche'
     breadcrumb: "Le fil d'Ariane"
     help: "L' aide"
     highlighted: 'La mise en evidence'  
     featured: 'La caractéristique'
     content: 'Le contenu du billet'
     footer: 'Le pied de page'
     sidebar_first: 'La colonne gauche'
     sidebar_second: 'La colonne droite'  
    

il n'est pas impossible d'utiliser une  écriture "francisée comme : colonne_droite: 'la colonne droite' si vous le souhaitez.

La mise en page du site se décompose donc ainsi :

  • une zone pour l' entête qui contiendra par exemple  le logo du site et le menu principal.
  • une colonne à droite pour l'agenda, le bloc de recherche....
  • une colonne centrale (le contenu principal du billet) ou figureront les articles. Elle est formée de :
    • un menu  dit "fil d'ariane";
    • 3 blocs d'informations (aide ; mise en évidence ; caractéristique) ;
    • le bloc pour afficher le contenu du billet ;
    • le pied de page
  • une colonne à gauche pour le menu contextuel, le calendrier...

soit 9 régions au minimum.

2. Les fichiers pour réaliser la maquette

Dans Drupal, 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).

On y trouvera  :

  1. les balises Html5 spécialisées pour la mise en page globale, à savoir :
    • <header> pour les entêtes ;
    • <nav> pour les menus ;
    • <main> le contenu principal de la page ;
    • <aside> pour les colonnes ;
    • <article> pour le contenu proprement-dit ;
    • <footer> pour le pied de page.
    • <section> pour le reste .
    • ....
    • en savoir plus sur ces éléments du langage HTML
  2. les variables correspondant aux régions définies dans dh.info.yml sous la forme page.xxxx ou xxx est le nom de la région :
    • page.header
    • page.sidebar_first
    • page.breadcrumb
    • page.help
    • page.highlighted
    • page.featured
    • page. content
    • page.footer
    • page.sidebar_second
    • ..
    • ou page.colonne_droite pour une version francisée

 

 

Les variables page.xxxx affichent tous les blocs placés dans les régions xxx respectives par l'administrateur du site lors de sa page "mise en page des blocs" par l'onglet "structure" du menu "administration".
Par exemple, la variable "page.sidebar_first" affichera tous les blocs de la région sidebar_first ( la colonne de gauche).
La syntaxe twig pour cette variable sera {{  page.sidebar_first }}

Enfin, Il peut être très utile de préciser la définition des balises html, par exemple pour les distinguer ( l'identifier) des autres. C'est le rôle de l'attribut : role.
Dans le fichier page.html.twig,  affiché dans l'onglet ci-dessous, on lira par exemple : <aside[role="colonne-gauche"]>.....</aside>.

Dans la feuille de style, dont un extrait est affiché dans l'onglet style.css ci-dessous, on lira donc cette instruction : aside[role="colonne-gauche"] qui  met en forme le contenu de la balise du codage html : <aside role="colonne-gauche> ....</aside>,

information complémentaire disponible en cliquant ici

Notons les propriétés "flex: 1 1 20%", "flex: 2 1 60%" , "flex: 1 1 20%" qui permettent l'affichage en colonnes juxtaposées des 3 éléments :

  • colonne gauche (aside[role="colonne-gauche"])
  • colonne centrale ( article[role="main"]),
  • colonne droite ( aside[role="colonne-droite"])

Vous pouvez  également lire la page sur la technologie flexbox qui en savoir plus sur les balises CSS "flex" utilisée pour cette mise en page.

 

 



Les régions du fichier info.html sont aussi utilisées pour nommer les fichiers "gabarit" à générer pour les afficher. Par exemple :
 
  • region--header.html.twig est le fichier gabarit à écrire ou modifier pour afficher l'entête des pages ;
  • region--sidebar_first.html.twig est le fichier gabarit à écrire ou modifier pour afficher la colonne gauche ;
  • region--breadcrumb.html.twig est le fichier gabarit à écrire ou modifier pour afficher le fil d'Ariane ;
  • region--sidebar_second.html.twig est le fichier gabarit à écrire ou modifier pour afficher la colonne droite.
    .... 
    voir la page sur les gabarits et consulter les commentaires insérés dans l'onglet "page.html.twig"  ci-dessous.

3. Quelques exemples de fichiers

Cliquez sur le bouton pour copier le code
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: "L'entête"
  content: 'Le contenu du billet'
  help: "L' aide"
  breadcrumb: "Le fil d'Ariane"
  highlighted: 'La mise en evidence'  
  featured: 'La remarque'
  sidebar_first: 'La colonne gauche'
  sidebar_second: 'La colonne droite'  
  footer: 'Le pied de page'

         
Cliquez sur le bouton pour copier le code
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">   
         <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 %}
                 <section role="highlighted">
                    <div class="section clearfix">
                    {{ page.highlighted }}
                    </div>
                </section>
            {% endif %}
            {% if page.help %}
                 <section role="help">
                    <div class="section clearfix">
                    {{ page.help }}
                    </div>
                </section>
            {% endif %}
            {% if page.featured %}
                 <section role="featured">
                    <div class="section clearfix">
                    {{ page.featured }}
                    </div>
                </section>
            {% endif %}
            {# le contenu de la page   #}
            <section role="contenu">
                {{page.content}}
            </section>
            <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>
 </main>
Cliquez sur le bouton pour copier le code
dans le presse papier

/**
 * Zone Contenu
 */
main[role="main"]{
	display:flex;
	flex-direction:row;
	width:100%;
}


aside[role="colonne-gauche"]  {
	flex:1 1 20%;
    font-size: 0.9em;
	padding: 0.5em 0.5em;
	text-align: center;
}

article[role="main"]{
	flex:2 1 60%;
	text-align:justify;
	background: none repeat scroll 0 0 #F8F8F8;
	margin: 0em 0 0em;	
	border-radius: 18px 18px 15px 15px;
	box-shadow: 0px 2px 5px #1c1a19;
	border-bottom: solid thick #c06;
	
}



aside[role="colonne-droite"]  {
	flex:1 1 20%;
     font-size: 0.9em;
	padding: 0.5em 0.5em;
	text-align: center;
}

Cliquez ici pour afficher ces fichiers dans une fenêtre surgissante