Tuto : Catégorie composite

Voir le sujet précédent Voir le sujet suivant Aller en bas

Tuto : Catégorie composite

Message par lezebre le Mar 4 Mar - 11:41

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 :

Arrow Général
Arrow Page d'accueil -> Hiérarchie
Arrow Paramétrage de la hiérarchie



Puis juste au dessus :
Arrow Niveau de compression de l'index



Vous n'oubliez pas d'enregistrer Wink


Ensuite :

Arrow Forum
Arrow 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" 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%>
<br />
<a href="Lien vers le sous-forum N°1"><b>Titre du Sous-forum N°1</b></a>
<br />
<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>
&nbsp;
</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%>
<br />
<a href="Lien vers le sous-forum N°2"><b>Titre du Sous-forum N°2</b></a><br>
<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%>
<br />
<a href="Lien vers le sous-forum N°3"><b>Titre du Sous-forum N°3</b></a><br />
<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>
&nbsp;
</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%>
<br />
<a href="Lien vers le sous-forum N°4"><b>UTitre du Sous-forum N°4</b></a><br>
<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" 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%>
<br />
<a href="Lien vers le sous-forum N°1"><b>Titre du Sous-forum N°1</b></a>
<br />
<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>
&nbsp;
</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%>
<br />
<a href="Lien vers le sous-forum N°2"><b>Titre du Sous-forum N°2</b></a><br>
<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%>
<br />
<a href="Lien vers le sous-forum N°3"><b>Titre du Sous-forum N°3</b></a><br />
<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>
&nbsp;
</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%>
<br />
<a href="Lien vers le sous-forum N°4"><b>Titre du Sous-forum N°4</b></a><br>
<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

lezebre
Aidactif
Aidactif

Sexe:MasculinTaureauDragon
Messages : 2837
Inscrit le : 07 Mar 2007
Age : 43
Humeur : Pas de MP non-sollicité (sauf demande de mot de passe).
Localisation : Merci Olivier pour l'avatar
Emploi/Loisirs : Quand votre problême est résolu, éditez votre premier message en mettant l'icone de sujet RESOLU

Revenir en haut Aller en bas

Re: Tuto : Catégorie composite

Message par lezebre le Lun 10 Mar - 15:17

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

lezebre
Aidactif
Aidactif

Sexe:MasculinTaureauDragon
Messages : 2837
Inscrit le : 07 Mar 2007
Age : 43
Humeur : Pas de MP non-sollicité (sauf demande de mot de passe).
Localisation : Merci Olivier pour l'avatar
Emploi/Loisirs : Quand votre problême est résolu, éditez votre premier message en mettant l'icone de sujet RESOLU

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:

Vous ne pouvez pas répondre aux sujets dans ce forum