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.
- Créer la (les) feuilles de styles
- Créer ou Adapter les fichiers de gabarit.
- 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.
- 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 = css/monstyle.css
regions = Header
regions = Help
regions = Content
regions = Left sidebar
regions = Right sidebar
regions = Footer
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".
- Créer ou adapter les fichiers de gabarit : la suite de l'article est ici
- Connectez-vous ou inscrivez-vous pour publier un commentaire