Mon 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 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)
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

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>
 

information complémentaire disponible en cliquant ici

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

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: 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'
         
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">   
     <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>
     
Cliquez sur le bouton pour copier le code
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