Tweet
Bonsoir à tous !
Je possède sur mon site www.aesfg.org Joomla! 1.7 avec le template "Siteground-j16-25".
Celui-ci est pourvu de plusieurs position de modules
- Menu Haut (menuload)
- Recherche (position-0)
- Colonne de Droite (position-4)
- Colonne de Gauche (position-7)
J'ai effectué quelques modifications dans les fichiers car il y avait des bugs, je ne pouvais pas mettre de module à droite car dans le index.php la colonne se nommait "position-2" pour un appel à l'emplacement "position-4" donc forcément ça marchait pas, j'ai aussi rajouter un emplacement en "absolute" dans la bannière (en suivant un Tuto pour comprendre le fonctionnement des modules).
Ce que je voudrais, c'est rajouter deux positions de module dans la colonne principale, au dessus des articles publiés en vedette, comme dans cet exemple (retouché à partir de l'original sous photoshop) :
J'ai alors mis les mains dans le cambouis pour comprendre le fonctionnement de PHP (ne gérant que partiellement HTML ...) dans mon template. J'ai fais quelques copié/collé en m'aidant de firebug pour les emplacements.
Ajouts - Fichier index.php***************************************** ***********
dont je me suis aidé grâce à :
Sachant qu'il y avait tout un truc dont je ne comprenais pas l'utilité :
Ajouts - Fichier template.css************************************** **************
avec "box_h3_m1.png" une image modifier jouant le rôle de "fond" du titre.
sachant que partout où il y avait des .leftcol ou .rightcol j'ai rajouté .midcol_r et .midcol_l comme par exemple
Ajouts - Fichier templateDétails.xml******************************* *********
Une fois que j'ai fais tout ça, je transfert mes fichiers sur mon ftp, et sans rien toucher dans le site, il n'y a pas de bug d'affichage (donc je n'ai apparament pas trop foiré).
Les emplacements de modules sont accessibles depuis le panneau d'administration en tant que "Centre1" et "Centre", donc je place deux modules dans ces emplacements, et voilà ce que j'obtiens :
.
Je ne suis absolument pas certain de mes lignes "Align=left" ou "Align=right" mais en tout cas je devrais au minimum avoir deux parties violettes pour les titres de mes modules !?
Ce que je ne comprend pas non plus c'est que malgré que mon code dans index.php soit avant le bandeau rose, mes modules se placent par dessus-lui ! :s
J'ai conscience qu'on ne peut rajouter de telles position en faisant n'importe quoi dans le code mais je suis si proche !!!
Pour la largeur des images de titre j'ai coupé la largeur de la colonne centrale en 2 etc ... Je ne comprend pas pourquoi mon bloc "Centre1" reprend l'image de "Leftcol" :s
Il y a certainement pleins d'endroits que j'ai oublier de modifier (surtout dans template.css) mais je n'y connais rien en CSS et mes connaissances en PHP se limitent à savoir où commence et où prend fin un code php dans une page en HTML ...
Avez-vous des idées ?
Merci beaucoup, je sais que ce que je demande, ce n'est pas rien !
Je possède sur mon site www.aesfg.org Joomla! 1.7 avec le template "Siteground-j16-25".
Celui-ci est pourvu de plusieurs position de modules
- Menu Haut (menuload)
- Recherche (position-0)
- Colonne de Droite (position-4)
- Colonne de Gauche (position-7)
J'ai effectué quelques modifications dans les fichiers car il y avait des bugs, je ne pouvais pas mettre de module à droite car dans le index.php la colonne se nommait "position-2" pour un appel à l'emplacement "position-4" donc forcément ça marchait pas, j'ai aussi rajouter un emplacement en "absolute" dans la bannière (en suivant un Tuto pour comprendre le fonctionnement des modules).
Ce que je voudrais, c'est rajouter deux positions de module dans la colonne principale, au dessus des articles publiés en vedette, comme dans cet exemple (retouché à partir de l'original sous photoshop) :
J'ai alors mis les mains dans le cambouis pour comprendre le fonctionnement de PHP (ne gérant que partiellement HTML ...) dans mon template. J'ai fais quelques copié/collé en m'aidant de firebug pour les emplacements.
Ajouts - Fichier index.php***************************************** ***********
dont je me suis aidé grâce à :
Code:
<!-- Colonne de Droite -->
<?php if( $this->countModules('position-4') ) : ?>
<div class="rightcol">
<jdoc:include type="modules" name="position-4" style="rounded"/>
</div>
<?php endif; ?>
<div class="clr"></div>
<div class="clr"></div>
</div>
Ajouts - Fichier template.css************************************** **************
Code:
.leftcol h3, .rightcol h3, [B].midcol_l, .midcol_r h3[/B] {
background: url("../images/box_h3.png") top left no-repeat;
color: #fff;
font-size: 12px;
font-family:Arial,Tahoma, sans-serif;
font-weight: 700;
height: 34px;
line-height: 31px;
padding: 0 10px;
margin: 0 0 4px;
overflow: hidden;
text-align: left;
width: 191px;
}
.midcol_l h3, {
padding: 0 10px;
background: url("../images/box_h3_m1.png") top center no-repeat;
width: 215px;
height: 20px;
align: left;
text-align: center;
line-height: 20px;
}
.midcol_r h3 {
padding: 0 10px;
background: url("../images/box_h3_m2.png") top center no-repeat;
width: 215px;
height: 20px;
align: right;
text-align: center;
line-height: 20px;
sachant que partout où il y avait des .leftcol ou .rightcol j'ai rajouté .midcol_r et .midcol_l comme par exemple
Code:
.leftcol ul.menu li a, .leftcol ul.menu li a:link, .rightcol ul.menu li a, .rightcol ul.menu li a:link, [B].midcol_l ul.menu li a, .midcol_l ul.menu li a:link, .midcol_r ul.menu li a, .midcol_r ul.menu li a:link[/B] {
background: url("../images/menu_arrow.gif") no-repeat left center transparent;
color: #666;
display: block;
font-size: 11px;
font-weight: 400;
height: 16px;
line-height: 17px;
padding: 0 0 2px 14px;
text-decoration: none;
}
.leftcol ul.menu li.current a,.leftcol ul.menu li.current a:link, .rightcol ul.menu li.current a, .rightcol ul.menu li.current a:link, [B].midcol_l ul.menu li.current a, .midcol_l ul.menu li.current a:link, .midcol_r ul.menu li.current a, .midcol_r ul.menu li.current a:link[/B] {color: #1c96d9;}
Code:
<positions> <position>menuload</position> <position>position-0</position> <position>position-4</position> <position>position-7</position> <position>banniere</position> [B]<position>centre1</position> <position>centre2</position>[/B] </positions>
Une fois que j'ai fais tout ça, je transfert mes fichiers sur mon ftp, et sans rien toucher dans le site, il n'y a pas de bug d'affichage (donc je n'ai apparament pas trop foiré).
Les emplacements de modules sont accessibles depuis le panneau d'administration en tant que "Centre1" et "Centre", donc je place deux modules dans ces emplacements, et voilà ce que j'obtiens :
Je ne suis absolument pas certain de mes lignes "Align=left" ou "Align=right" mais en tout cas je devrais au minimum avoir deux parties violettes pour les titres de mes modules !?
Ce que je ne comprend pas non plus c'est que malgré que mon code dans index.php soit avant le bandeau rose, mes modules se placent par dessus-lui ! :s
J'ai conscience qu'on ne peut rajouter de telles position en faisant n'importe quoi dans le code mais je suis si proche !!!
Pour la largeur des images de titre j'ai coupé la largeur de la colonne centrale en 2 etc ... Je ne comprend pas pourquoi mon bloc "Centre1" reprend l'image de "Leftcol" :s
Il y a certainement pleins d'endroits que j'ai oublier de modifier (surtout dans template.css) mais je n'y connais rien en CSS et mes connaissances en PHP se limitent à savoir où commence et où prend fin un code php dans une page en HTML ...
Avez-vous des idées ?
Merci beaucoup, je sais que ce que je demande, ce n'est pas rien !
Mes images ont en fait des bords carrés mais il y a du transparent pour qu'au final ca donne du rond.
Commentaire