Il arrive souvent que lorsque vous utilisez un template, sa structure soit souvent normalisé selon le standard classique des sites ; menu à gauche et contenu à droite. Or il peut être intéressant de savoir comment intervetir cette structure en placant le menu à droite et le contenu à gauche, sans forcement être une bête d'HTML et de CSS et surtout sans rendre le template HS.
Pour illustrer cette manip. je vais utiliser un de nos templates, myFlowers. Vous pourrez éventuellement le télécharger pour executer en live ce tutoriel.
Le template d'origine, menu à gauche, contenu à droite et bloc annexe à droite.
Fichier HTML / PHP
Dans un premier temps, identifier dans le fichier source php la portion de code correspondant au menu de gauche. Pour des raisons de compatibilité entre navigateur et afin d'éviter des décalages, notamment dans IE, un minimum de tableau est utilisé dans les templates. Les seuls pouvant exister sont lors de mises en pages en plusieurs colonnes, comme dans ce cas présent.
Ensuite, identifiez plus bas la fin du tableau principal. La dernière balise <td> correspond à l'emplacement où nous allons déplacer notre portion de code précédemment sélectionnée.
Pour ceux qui ne serait pas habitué au code HTML, en annexe je rappel briévement la structure de base d'un tableau.
Déplacez la portion de code correspondant au menu gauche après la balise de fermeture de la cellule.
Dans la zone de contenu, vous aurez pu remarquer qu'il y a un bloc de contenu sur la droite, nous allons également déplacer cet élément à gauche du contenu. Pour ce faire identifiez la cellule correspondant à cet affichage. Il se situe juste en après l'appel de la fonction php mosMainBody permettant l'affichage du corps de page.
Déplacez ensuite la sélection au dessus de la ligne d'appel de la fonction mosMainBody (ligne 71).
Suite à ces quelques manipulations vous devriez avoir un template qui ressemble à peu de chose près à ce visuel.
La prochaine étape va consister à ajuster les déclarations de styles CSS pour remettre au droit le template.
Toujours dans la page php, intervertissez les classes <div class="wrapper_r"> et <div class="wrapper_rt"> se trouvant avant le tableau principal par <div class="wrapper_l"> et <div class="wrapper_lt"> pour placer l'ombre portée du menu sur le bord gauche. Faite de même au niveau du menu qui a été déplacé et remplacez :
<td id="left" class="wrapper_l">
<div class="wrapper_lt">
<div id="menuleft"><?php mosLoadModules ( 'left', -2 ); ?></div>
</div>
</td>
par
<td id="left" class="wrapper_r">
<div class="wrapper_rt">
<div id="menuleft"><?php mosLoadModules ( 'left', -2 ); ?></div>
</div>
</td>
Fichier CSS
Dans le fichier CSS, l'intervention va se porter au niveau des classes wrapper_l, wrapper_lt, wrapper_r et wrapper_rt pour modifier l'alignement des images de fond, ajouter un padding à la classe wrapper_lt et la supprimer sur la classe wrapper_rt .
Par la même occasion supprimer l'attribution de la balise sur le style pour la classe wrapper_l et wrapper_r.
.wrapper_l { background: url("../images/wrapper_l.gif") repeat-y 0 0; }
div.wrapper_lt {
background: url("../images/wrapper_lt.gif") no-repeat 0 0;
padding-left: 13px;
}
.wrapper_r { background: url("../images/wrapper_r.gif") repeat-y 0 0; }
div.wrapper_rt { background: url("../images/wrapper_rt.gif") no-repeat 0 0;
}
Du côté du type d'affichage thin ou wide (ligne 14-15 et 26-27), modifiez les classes suivantes pour intervertir les marges gauches et droites .
div.thin div.wrapper_b,
div.thin div.wrapper_t { margin-right: 144px; }
div.wide div.wrapper_t { margin-right: 166px; }
div.wide div#pathway { margin-left: 14px; }
Actuellement, le menu placé à droite se trouve collé sur le bord du cadre de contenu. Ajoutez un padding-left de 10 pixels pour aérer l'ensemble.
Pour l'image du vase avec les fleurs, le css ne permet pas (encore) les rotations d'images mais vous pouvez toujours effectuer une rotation horizontale dans Photoshop afin d'obtenir l'ombre sur la gauche. Modifiez également l'alignement de l'image pour la propriété background en la passant à 0.
La dernière opérations va s'effectuer au niveau du bloc de contenu positionné à gauche du corps de page, nous allons intervertir la marge pour l'espacer par rapport au texte et l'aligner avec le bloc du dessus (Derniers articles sur l'exemple).
Pour ce faire allez à la ligne correspondant au style right (ligne 209) et changez le padding-left de 10 pixels par un padding-right.
Et voilà, vous avez dorénavant un nouveau template avec des éléments intervertis et ceux sans avoir trop chamboulé le code html ou les styles CSS.
Annexe Structure de base d'un tableau HTML.
<table>
<tr>
<td>Mon texte</td>
</tr>
</table>
Les balises <table> et </table> permettent de déclarer le début et la fin d'affichage du tableau.
Les balises <tr> et </tr> définissent un début et une fin de ligne.
Les balises <td> et </td> définissent un début et une fin de cellule, cet élément est celui qui va contenir nos textes et images. Ce jeu de balise est le seul qui permet un affichage correct.
Une balise <tr> peu contenir plusieurs jeux de <td>. Et un tableau peu contenir plusieurs jeux de balises <tr>. |