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. Créer la (les) feuilles de styles
  4. Créer ou Adapter les fichiers de gabarit.

 

  1. Préambule :

Je nomme mon thème : dhthemehtml5.
Ce nom devra être repris pour le nom du dossier du thème, pour le nom du fichier ".info"  (donc "dhthemehtml5.info") et pour les fonctions de surchage du fichier "template.php" du thème.

  1. La maquette :

Ci-contre figure la maquette du site à réaliser. En jaune, figure les régions tels qu'elles doivent être définie dans le fichier "dhthemehtml5.info" du thème.

La page se décompose donc ainsi :

un entête  pour essentielement 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.
une colonne à gauche pour le menu contextuel, le calendrier...
un pied de page.

et une place pour afficher une aide ..

soit 6 régions.

Ci dessous, le contenu du fichier "dhthemehtml5.info"

name        = dhthemehtml5
description = mon premier theme  et en html5  svp
core          = 7.x

engine = phptemplate

stylesheets[all][] = css/monstyle.css

regions[header] = Header
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer
 

  1. La feuille de style
     

D'après le fichier "dhthemehtml5.info", la feuille de style doit se nommer "monstyle.css" , et se trouver dans le sous-dossier css (du dossier dhthemehtml5).
Je crée dans ce dossier, avec l' éditeur de texte "notepad++",  le fichier "monstyle.css".

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, on lira donc ce genre de ligne : aside[role="colonne-gauche"] qui  met en forme le codage php : <aside role="colonne-gauche> ....</aside>

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;
}
 

Notons les largeurs des chacunes 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. Cette manière de faire me parait beaucoup plus simple que celle mise en oeuvre précédemment avec force balise "float".

  1. Créer ou adapter les fichiers de gabarit : la suite de l'article est ici