Introduction

Ce tutoriel est une application de deux autres tutoriels tout aussi utiles que je vous invite d'ores et déjà à aller lire : Personnaliser l'apparence de la liste des sous-forums et Retirer la virgule des sous-forums.

Vous avez les outils en main pour pouvoir mettre en forme proprement la liste des sous-forums, mais comment faire pour placer les liens les uns en dessous des autres et les placer à côté de la description de chaque forum ? C'est de ceci qu'on va parler ici.

Sommaire

• Modification des templates en phpBB2 et en PunBB
  • Placer les sous-forums sous la description
  • Placer chaque élément dans un bloc de contenu
  • Placer le tout dans un bloc conteneur
  • Et encore un bloc dans la description
• Modification des styles CSS
  • Comment cacher les virgules ?
• Et en version Invision ?
• Et en version PhpBB3 ?
  • Un soupçon de javascript
  • Quelques cuillerées de HTML
  • Une pincée de CSS
• Conclusion

Modification des templates en phpBB2 et punBB

Rendez-vous sur votre panneau d'administration, onglet Affichage, menu Templates » Général et éditez le template index_box. Vous avez besoin de modifier la section qui affiche la description du forum et les sous-forums. Le code correspondant, pour un template non modifié, est le suivant :

En version phpBB2 :

Code:

         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>

En version PunBB :

Code:

{catrow.forumrow.FORUM_DESC}
<!-- BEGIN switch_moderators_links -->
<br />
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}

On peut mentionner trois parties distinctes :

• La première ligne contient l'affichage de la description d'un forum ;
  
• Les lignes 3, 4 et 5 (2, 3, 4 et 5 pour PunBB) contiennent l'affichage de la liste des modérateurs ;
  
• La ligne 6 contient l'affichage des sous-forums.
  
• La ligne 7 sur punBB ne sert à rien, vous pouvez la virer.

Voyons un peu étape par étape comment modifier ce code pour obtenir le résultat voulu.

Etape 1 - Séparer les sous-forums des modérateurs

L'affichage des modérateurs peut servir, alors il ne faudra pas le supprimer. Au lieu de ça, on va simplement sortir du <span class="gensmall"> ... </span> la ligne concernant l'affichage des sous-forums (pour rappel, la sixième) et la placer au-dessus, juste après la description. Ce qui vous donne ceci en version phpBB2 :

Code:

         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
         </span>

A noter qu'en version PunBB, il n'y a pas de <span class="gensmall"> ... </span>, vous n'avez donc qu'à placer la ligne concernant l'affichage des sous-forums juste en dessous de celle affichant la description, comme ceci :

Code:

{catrow.forumrow.FORUM_DESC}
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<!-- BEGIN switch_moderators_links -->
  <br />
  {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->

Etape 2 - Placer les différents éléments dans des blocs

Maintenant, on va placer la description dans un bloc (un <div>) et de même pour les sous-forums, en leur attribuant des classes différentes (dans cet exemple, .DescForum et .ListeSousForums). Histoire de rester aussi proche que possible de l'affichage de base de ForumActif en version PhpBB2 (ce qui permet une personnalisation facile par le panneau admin), on va également garder les classes .genmed et .gensmall qui leur étaient respectivement attribuées à la base. Ces deux classes n'existent pas en version punBB donc pas besoin de vous en préoccuper.

En version phpBB2 :

Code:

         <div class="genmed DescForum">{catrow.forumrow.FORUM_DESC}</div>
         <div class="gensmall ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
         </span>

En version PunBB :

Code:

<div class="DescForum">{catrow.forumrow.FORUM_DESC}</div>
<div class="ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
<!-- BEGIN switch_moderators_links -->
  <br />
  {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->

Etape 3 - Placer le tout dans un bloc conteneur

On ne s'arrête pas là, car le tutoriel va demander à utiliser un positionnement flottant des blocs. Pour gérer les dépassements, il faut que les blocs flottants soient eux-même inclus dans un bloc. Les blocs flottants en question étant ceux auxquels on a attribué les classes .DescForum et .ListeSousForums, vous devez encadrer ce duo par une nouvelle balise <div> à laquelle sera attribuée une troisième classe, ici .BlocForum :

En version phpBB2 :

Code:

         <div class="BlocForum">
            <div class="genmed DescForum">{catrow.forumrow.FORUM_DESC}</div>
            <div class="gensmall ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         </div>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
         </span>

En version PunBB :

Code:

<div class="BlocForum">
  <div class="DescForum">{catrow.forumrow.FORUM_DESC}</div>
  <div class="ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</div>
<!-- BEGIN switch_moderators_links -->
  <br />
  {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->

Etape 4 - Encore un bloc dans la description !

Et enfin (on y arrive, courage), pour pouvoir régler quelques subtilités ultérieurement (les flottants étant très capricieux), on place la description des forums dans une nouvelle balise <div> mais cette fois sans classe associée :

En version phpBB2 :

Code:

         <div class="BlocForum">
            <div class="genmed DescForum">
               <div>{catrow.forumrow.FORUM_DESC}</div>
            </div>
            <div class="gensmall ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         </div>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
         </span>

En version PunBB :

Code:

<div class="BlocForum">
  <div class="DescForum">
    <div>{catrow.forumrow.FORUM_DESC}</div>
  </div>
  <div class="ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</div>
<!-- BEGIN switch_moderators_links -->
  <br />
  {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->

Et c'est (enfin) fini pour les personnalisations du template, enregistrez vos modifications et publiez votre template (ou pas, si vous voulez vérifier le rendu final avant de le rendre visible pour vos membres), nous allons passer aux styles.

Modification des styles CSS

Pour le moment, les deux blocs (description et sous-forums) sont placés l'un en dessous de l'autre et les liens sont toujours côte à côte. Nous allons devoir demander à ce que nos blocs soient "flottants", mais aussi à ce que leur conteneur (le fameux bloc avec la classe .BlocForum) s'adapte à leurs dimensions, sinon ils déborderaient (c'est comme ça que marchent les flottants, pas de panique).

Pour ça, on va s'attaquer aux propriétés CSS des classes .BlocForum, .DescForum et .ListeSousForums :

Code:

/******************************************************************
MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS FORUMS EN COLONNE
-----------------------------------------
Code proposé sur CSSActif : http://www.css-actif.com
*[Début du CSS]****************************************************/

/* IMPORTANT : Ceci est la technique dite "clearfix" qui permet de forcer le conteneur des flottants à s'adapter à leur taille */
.BlocForum:after {
  display:table;
  content:"";
  clear:both;
}

/* Positionnement de la description des forums */
.DescForum {
  float:left; /* flottant à gauche */
  width:80%; /* largeur de 80% */
}

/* Positionnement de la liste des sous-forums */
.ListeSousForums {
  float:left; /* flottant à gauche */
  width:20%; /* largeur de 20% */
}

On a positionné les deux blocs en flottants, tous deux positionnés à gauche : ils se mettront l'un à côté de l'autre. La largeur en pourcentage est importante, elle indique à chaque bloc l'espace qu'il peut occuper, sachant qu'on ne doit pas dépasser 100% au total (sans quoi ils seront l'un en dessous de l'autre). N'ajoutez RIEN de plus dans ces blocs de définitions, en particulier surtout pas de marges (margin et padding), car selon les navigateurs celles-ci agrandissent le bloc d'autant, ce qui fait que vous dépasserez les 100%.


Pour pouvoir donner une jolie mise en page à la description, on a prévu le coup et ajouté un <div> juste pour ça dans les templates, vous vous souvenez ? Et par conséquent, le CSS à ajouter est donc le suivant :

Code:

/* mise en page de la description des forums */
.DescForum > div {
  margin:2px 10px 2px 2px; /*marges extérieures, haut droite bas gauche*/
  background:#fff; /* couleur de fond */
  padding:5px; /* marges intérieures, entre le texte et le bord */
  text-align:justify; /* alignement du texte */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0px #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0px #000000;
}

Notez en particulier la propriété margin:2px 10px 2px 2px;. Cette dernière définit toutes les marges à la fois, et la deuxième valeur permet plus particulièrement de rajouter un espace plus grand à droite du bloc pour l'éloigner des sous-forums. Si vous placez les sous-forums à gauche, alors modifiez la quatrième valeur. Pour plus d'informations sur la propriété margin, jetez un oeil à la page de W3Schools qui y est consacrée.

Il nous reste encore à nous occuper des liens vers les sous-forums pour les placer en colonne.

Code:

.ListeSousForums a {
  display:block; /* on transforme les liens en blocs */
  background:#fff; /* couleur de fond */
  padding:2px 10px; /* marges internes haut/bas et droite/gauche */
  margin:2px 0; /*marges externes haut/bas et droite/gauche */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0px #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0px #000000;
}

/*[fin du CSS]*****************************************************
MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS-FORUMS EN COLONNE
*******************************************************************/

Petite remarque après test, pour vous assurer que les liens ne soient pas collés aux bords des cellules (particulièrement visible en version punBB), modifiez la valeur de la propriété margin (par exemple 2px 2px 2px 0px). La marge à gauche (pour des sous-forums à droite), c'est à dire la dernière valeur, devrait rester nulle puisqu'on s'est assuré de la marge entre les sous-forums et la description au moment de définir le sélecteur .DescForum > div.

Code CSS complet pour les feignasses du copié-collé:

Comment cacher les virgules ?

Comme indiqué en introduction de ce tutoriel, il existe justement un tuto concernant les virgules, justement nommé retirer la virgule des sous-forums, et deux méthodes possibles, soit par le javascript, soit par le CSS. Pour notre exemple, on va faire simple et utiliser la méthode javascript. Pour cela, pour rappel, rendez-vous dans votre panneau d'administration, dans l'onglet Modules, puis dans Gestion des codes Javascript. Assurez-vous que le javascript personnalisé est activé sur votre forum, puis créez un nouveau fichier javascript (en cochant les case "sur l'index" et "sur les sous-forums" et collez-y le code suivant :

Code:

$(function(){
    $('.ListeSousForums').each(function(){
        $(this).html($(this).html().replace(/<\/a>,/ig, "</a>"));
    });
});

Et sous Invision ?

Tout passe par le CSS, puisqu'on ne peut pas éditer les templates d'un forum dont le thème est Invision. Cela suit peu ou prou le même principe que précédemment, à ceci près que les sélecteurs CSS sont nettement plus complexes. Notez bien que le raisonnement expliqué plus haut (en particulier la partie CSS) s'applique tout à fait ici, mais pour éviter de vous perdre on va marcher par équivalences.

On écarte les bugs

Premier problème, l'icône des forums/catégories vient nous casser les pieds par un positionnement un peu particulier. Un peu de CSS pour rectifier le problème (et comme c'est le début du code, il y a les crédits au début).

Code:

/******************************************************************
MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS-FORUMS EN COLONNE
-----------------------------------------
Code proposé sur CSSActif : http://www.css-actif.com
*[Début du CSS]****************************************************/

/* On règle le cas de l'icone de forum */
table.ipbtable span.status {
  position:static;
  float:left;
}

On utilise les classes natives

L'équivalent du sélecteur .DescForum pour Invision est le suivant :

Code:

/* Positionnement de la description des forums */
.par {
  float:left;
  width:80%;
}

L'équivalent du sélecteur .ListeSousForums pour Invision est le suivant :

Code:

/* Positionnement de la liste des sous-forums */
div.forum-name + p {
  float:left;
  width:20%;
  /* pour cacher les virgules */
  line-height:0; font-size:0;
}

L'équivalent du sélecteur .DescForum > div pour Invision est le suivant :

Code:

/* mise en forme du texte de la description des forums */
.forum-desc {
  margin:2px 10px 2px 2px; /*marges extérieures, haut droite bas gauche*/
  background:#fff; /* couleur de fond */
  padding:5px; /* marges intérieures, entre le texte et le bord */
  text-align:justify; /* alignement du texte */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0px #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0px #000000;
}

L'équivalent de .ListeSousForums a pour Invision est le suivant :

Code:

/* mise en forme des liens des sous-forums */
div.forum-name + p a.gensmall {
  display:block; /* on transforme les liens en blocs */
  background:#fff; /* couleur de fond */
  padding:2px 10px; /* marges internes haut/bas et droite/gauche */
  margin:2px 0; /*marges externes haut/bas et droite/gauche */
  /* des coins arrondis */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  /* un effet d'ombre */
  -webkit-box-shadow:1px 1px 2px 0px #000000;
  -moz-box-shadow:1px 1px 2px 0px #000000;
  box-shadow:1px 1px 2px 0px #000000;
  /* on affiche le texte */
  line-height:normal; font-size:12px;
}

/*[fin du CSS]*****************************************************
MISE EN FORME DES CATÉGORIES : AFFICHER LES SOUS-FORUMS EN COLONNE
*******************************************************************/

Et en version PhpBB3 ?

Un soupçon de Javascript

Grâce au concours de Hiro et Doare, avec un soupçon de support sur le forum des forums, il est possible d'utiliser du JavaScript pour contourner le code de merde les difficultés inhérentes à la structure phpBB3.

Dans votre panneau d'administration, allez à l'onglet Modules puis dans Gestion des codes Javascript et créez un nouveau code Javascript que vous activerez sur l'index et dans les sous-forums. Collez le code suivant :

Code:

$(function() {
  $('dd.dterm > div').each(function(){
      var a = $("br:last", this).nextAll("a.gensmall");
      if(a.length > 1) {
        for(i = 0;i < a.length;i++) {
          var b = a[i];
          if(b.nextSibling.nodeValue != null) {
            b.nextSibling.nodeValue = "";
          }
        }
      }
      // enveloppe tous les liens des sous-forums dans une div
      $(this).children('.gensmall').wrapAll('<div class="ListeSousForums" />');
  });
});

Ce code permettra d'entourer la liste de liens par un div de classe .ListeSousForums, ce qui est déjà ça de gagné.

Explication technique du code pour les intéressés:

Quelques cuillerées de HTML

Rien à faire néanmoins pour ce qui est de la description du forum : vous devrez impérativement encadrer vos descriptions de forum par les balises <div class="DescForum"><div> et </div></div> directement dans la gestion des forums dans le panneau d'administration, comme sur la capture ci après :

Une pincée de CSS

Dernière bidouille, il y a un saut de ligne juste avant les sous-forums qui décale l'affichage, ce qui n'est pas très esthétique. Il vous faudra donc vous arranger en CSS pour que le saut de ligne suivant les descriptions soit escamoté :

Code:

/* Suppression du saut de ligne parasite après les descriptions */
.DescForum + br {
  display:none;
}

Le CSS à utiliser pour la mise en page, au final, est exactement le même que pour la version phpBB2, avec les mêmes sélecteurs et à quelques réglages près.

Conclusion

Vous avez à présent toutes les cartes en main pour présenter vos sous-forums en colonne quelle que soit la version de votre forum. Il peut y avoir quelques légères différences à l'installation entre les aperçus et le résultat que vous obtenez, mais ce sera à vous de faire les réglages en CSS pour obtenir votre visuel idéal !

Comme toujours, si vous avez un problème avec ce tutoriel, n'hésitez pas à ouvrir un sujet dans la section Aide CSS&HTML en précisant le lien de ce tutoriel et en expliquant quel est votre souci (aperçus et lien du forum de test à l'appui), les codeurs se feront un plaisir de vous dépanner.