Catégorie composite

par Lezebre le Mar 4 Mar 2008 - 10:41

Catégorie composite

Voici comment réaliser une catégorie composite
(contenant plusieurs sous-foums comme un seul)
sur l'index de votre forum (version phpBB3)

Exemple :

La réalisation de ce tuto nécessite

une bonne connaissance de la gestion des catégories et forums
quelques notions de HTML (création/modification/mise en forme d'un tableau et rédaction des liens)

Préparation de la catégorie et des sous-forums

Dans le panneau d'administration :

Affichage

Page d'accueil -> Hiérarchie

Paramétrage de la hiérarchie

Puis juste au dessus :

Niveau de compression de l'index

Vous n'oubliez pas d'enregistrer Wink

Ensuite :

Forum

Gestion -> Catégories et forums

Créer une nouvelle catégorie pour l'occasion :

Ajouter, dans cette catégorie, un forum dont le nom est un espace insécable
(caractère obtenu avec la séquence de touches Alt [maintenu appuyé] 0160)
ou une image vide (<img src='http://www.illiweb.com/vide.gif' border=0>)

Puis ajouter dans ce forum le nombre de sous forums désiré, en leur donnant les noms et permissions souhaités (4 dans cet exemple)

Cette opération sera répétée autant de fois que l'on souhaite de sous-forums dans cette section (4 dans cet exemple)

Préparation du Tableau de description

L'astuce consiste, maintenant, à composer, à l'aide d'un tableau, la description du forum dont le nom est vide Wink

Ouvrir le bloc-notes de Windows (Notepad) et coller ce code dans un document vierge :

Code:: <table width=100% rules="rows" border="0" style="margin-top: -10px;"> <tr> <td width=55px> <a href="lien vers le sous forum n°1"><img src="Lien vers l'image N°1" border="0"></a> </td> <td width=42%> <a href="Lien vers le sous-forum N°1">Titre du Sous-forum N°1</a> <ul> <li><a href="Lien vers sujet N°1">Titre du Sujet N°1</a></li> <li><a href="Lien vers sujet N°2">Titre du Sujet N°2</a></li> <li><a href="Lien vers sujet N°3">Titre du Sujet N°3</a></li> </ul> </td> <td width=10px> </td> <td width=55px> <a href="Lien vers le sous-forum N°2"><img src="Lien vers l'image N°2" border="0"></a> </td> <td width=42%> <a href="Lien vers le sous-forum N°2">Titre du Sous-forum N°2</a> <ul> <li><a href="Lien vers sujet N°4">Titre du Sujet N°4</a></li> <li> <a href="Lien vers sujet N°5">Titre du Sujet N°5</a></li> </ul> </td> </tr> <tr> <td width=55px> <a href="Lien vers le sous-forum N°3"><img src="Lien vers l'image N°3" border="0"></a> </td> <td width=42%> <a href="Lien vers le sous-forum N°3">Titre du Sous-forum N°3</a> <ul> <li><a href="Lien vers sujet N°6">Titre du Sujet N°6</a></li> <li><a href="Lien vers sujet N°7">Titre du Sujet N°7</a></li> </ul> </td> <td width=10px> </td> <td width=55px> <a href="Lien vers le sous-forum N°4"><img src="Lien vers l'image N°4" border="0"></a> </td> <td width=42%> <a href="Lien vers le sous-forum N°4">UTitre du Sous-forum N°4</a> <ul> <li><a href="Lien vers sujet N°8">Titre du Sujet N°8</a></li> <li><a href="Lien vers sujet N°9">Titre du Sujet N°9</a></li> </ul> </td> </tr> </table>

Dans ce document du bloc notes, il vous faut indiquer, "en dur" :

les liens vers les sous forums créés plus tôt (en rouge ci-dessous)
l'adresse internet des images préalablement hébergées (en bleu ci-dessous)
Les titres et légendes (en marron ci-dessous)

<table width=100% rules="rows" border="0" style="margin-top: -10px;">
<tr>
<td width=55px>
<a href="Lien vers le sous-forum N°1"><img src="Lien vers l'image N°1" border="0"></a>
</td>
<td width=42%>

<a href="Lien vers le sous-forum N°1">Titre du Sous-forum N°1</a>

<ul>
<li><a href="Lien vers sujet N°1">Titre du Sujet N°1</a></li>
<li><a href="Lien vers sujet N°2">Titre du Sujet N°2</a></li>
<li><a href="Lien vers sujet N°3">Titre du Sujet N°3</a></li>
</ul>
</td>
<td width=10px>

</td>
<td width=55px>
<a href="Lien vers le sous-forum N°2"><img src="Lien vers l'image N°2" border="0"></a>
</td>
<td width=42%>

<a href="Lien vers le sous-forum N°2">Titre du Sous-forum N°2</a> 
<ul>
<li><a href="Lien vers sujet N°4">Titre du Sujet N°4</a></li>
<li> <a href="Lien vers sujet N°5">Titre du Sujet N°5</a></li>
</ul>
</td>
</tr>

<tr>
<td width=55px>
<a href="Lien vers le sous-forum N°3"><img src="Lien vers l'image N°3" border="0"></a>
</td>
<td width=42%>

<a href="Lien vers le sous-forum N°3">Titre du Sous-forum N°3</a>

<ul>
<li><a href="Lien vers sujet N°6">Titre du Sujet N°6</a></li>
<li><a href="Lien vers sujet N°7">Titre du Sujet N°7</a></li>
</ul>
</td>
<td width=10px>

</td>
<td width=55px>
<a href="Lien vers le sous-forum N°4"><img src="Lien vers l'image N°4" border="0"></a>
</td>
<td width=42%>

<a href="Lien vers le sous-forum N°4">Titre du Sous-forum N°4</a> 
<ul>
<li><a href="Lien vers sujet N°8">Titre du Sujet N°8</a></li>
<li><a href="Lien vers sujet N°9">Titre du Sujet N°9</a></li>
</ul>
</td>
</tr>
</table>

Application de la Description :
Modifier les propriétés du forum dont le nom est vide :

Copier le contenu du document du Bloc-notes (code modifié avec les adresse et textes souhaités) et le coller dans la zone "Description" du forum dont le nom est vide.

Enfin, cliquez sur le bouton "Enregistrer", et le tour est joué Wink

Add : Forums en version phpBB2

Le tuto ci-dessus est également applicable pour un forum en version phpBB2.

Cependant, il peut être nécessaire d'ajouter un peu de CSS pour corriger la taille des caractères des liens dans la description de cette catégorie composite

Dans le PA -> Thèmes -> Images et couleurs -> Couleurs -> Onglet Feuille de style CSS :

coller ceci

Code:: .genmed a,.genmed a:active{ font-size:0.8em; text-decoration:none; } .genmed a:hover{ text-decoration:underline; }

La taille 0.8em; (taille proportionnelle 80%) peut-être adaptée ou fixée en pixels (par exemple 10px;)
N'oubliez pas de valider