Des sous-forums, c'est quoi ?

Les sous-forums, ce sont des forums qui sont imbriqués à l'intérieur d'autres forums. Vous pouvez demander à ce qu'ils soient affichés (ou non) en vous rendant sur votre panneau d'administration, onglet Affichage, menu Page d'accueil » Structure et hiérarchie et en sélectionnant "Oui" ou "Avec une image" pour l'option Lien vers les niveaux inférieurs.

Par défaut, la liste des sous forums d'une section apparait sous la description, chaque lien de sous-forum étant séparé des autres par une virgule, comme ceci :


Dans ce tutoriel, je vais vous expliquer comment personnaliser leur affichage à votre guise.

Partie Templates

Pour ce faire c'est relativement simple. Rendez vous sur votre panneau d'administration, onglet Affichage puis dans le menu Templates » Général et sélectionnez le template index_box.

Dans ce template recherchez la partie suivante :

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

La viariable {catrow.forumrow.L_LINKS} semble ne servir à rien (Elle devrait afficher "Sous-Forums :" mais apparemment ce n'est pas le cas. Vous pouvez la supprimer si vous voulez, ou ne pas y toucher, ça ne fera pas de différence.)
La variable {catrow.forumrow.LINKS} est celle qui contient la liste des sous forums. Vous ne pouvez pas éditer individuellement chaque lien vu qu'il est "caché" à l'intérieur de la variable.

On va donc devoir utiliser la magie du CSS et entourer la ou les variables par un <div> auquel on attribuera une classe CSS :

Code:

<div class="sousforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>

(Vous pouvez remplacer la classe .sousforums par le nom de classe que vous souhaitez, à condition de mettre le même nom dans les CSS, voir suite.)

Sur PhpBB2 vous aurez donc ceci à faire :

Partie CSS

Passons à la partie un peu plus compliquée du tutoriel. Il va s'agir de personnaliser les liens vers les sous-forums à votre goût avec un peu de CSS.

Pour PhpBB2 et PunBB

Vous allez pouvoir mettre à profit la classe que vous avez attribuée aux sous-forums pour mettre en forme le bloc contenant toute la liste des forums, comme ceci par exemple :

Code:

.sousforums{
    font-variant: small-caps ; /* texte en petites majuscules */
    text-align:center; /* texte centré dans le bloc */
}

(Rappel: Si vous avez changé sousforums tout à l'heure dans les templates, changez le ici aussi !)

Avec cette technique vous pouvez placer vos titres là où vous le souhaitez !
• Soit en choisissant la fonction text-align pour les placer au centre, à droite ou à gauche.
• Soit utiliser la propriété margin pour placer votre texte à une distance précise du bord droit ou gauche.
Vous pouvez aussi rajouter des bordures (propriété border), un fond (propriété background), et des petites décorations comme je l'ai fait dans mon exemple avec la propriété font-variant.

Vous aurez alors ce genre d'affichage :


Vous pouvez également être plus précis en mettant en page les liens eux même avec un code de ce style :

Code:

.sousforums a {
 display:inline-block; /* affichage en ligne mais avec les propriétés d'un bloc */
 background:#COULEUR; /* une couleur de fond derrière chaque lien */
 padding:2px 5px; /*un espacement entre le texte et le bord du bloc-lien*/
 margin:0 5px; /* un espacement entre le bloc-lien et les éléments qui l'entourent */
}

La propriété display avec la valeur inline-block n'est pas indispensable, mais elle vous permet d'appliquer quelques effets réservés aux blocs (les marges !) tout en conservant l'affichage "en ligne" classique.

Ce qui pourrait vous donner ceci :


Vous pouvez également rajouter un effet au survol du lien grâce à la pseudo-classe :hover, pour rappel :

Code:

.sousforums a:hover {
   background:#COULEUR; /*couleur de fond différente de l'état non survolé */
   color:#COULEUR;/* couleur du texte différent de l'état non survolé */
}

Ce qui vous donnerait cette fois (survolez les liens) :


En jongleant avec les CSS, vous pourrez obtenir une belle variété d'effets originaux !

Pour PhpBB3 et Invision

Dans le cas des versions Invision et PhpBB3 de forumActif, vous ne pouvez pas accéder aux templates, vous ne pouvez donc éditer que le CSS. Il est assez difficile de cibler les sous-forums sur cette version de ForumActif car ils ne sont pas placés dans des blocs bien identifiés. De ce fait, il va falloir jongler avec les sélecteurs pour récupérer au moins les liens.

Cas de PhpBB3

Dans le cas de PhpBB3, malheureusement, vous ne pouvez récupérer que les liens, il vous sera donc impossible de faire une mise en forme de toute la "liste de liens".

Pour éditer la mise en page de chaque lien, vous n'avez qu'à utiliser le sélecteur suivant :

Code:

ul.forums dd.dterm a.gensmall {
  /* vos propriétés CSS */
}

Ce qui vous donnera plutôt ce genre de mise en page :

Cas d'Invision

Sous Invision, vous pouvez sélectionner et mettre en forme aussi bien la liste complète que les liens individuels avec ces deux sélecteurs :

Code:

div.forum-name + p  {
  /* vos propriétés CSS pour la liste des sous-forums */
}

Code:

div.forum-name + p a.gensmall {
  /* vos propriétés CSS pour chaque lien de sous-forum*/
}

J'espère avoir réussi à aider plus d'une personne grâce à ce tutoriel. Si vous avez des questions n'hésitez pas !