Catégorie composite

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

  • 0

Tutoriel Catégorie composite

Message par Lezebre le Mar 4 Mar 2008 - 10:41

Catégorie composite


Attention
La réalisation de ce tutoriel nécessite
  • une bonne connaissance de la gestion des catégories et forums
  • quelques notions de HTML

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

Panneau d'administration Affichage Page d'accueil Hiérarchie

Niveau de compression de l'index : cochez Séparer les catégories sur l'index - Moyen
Lien vers les niveaux inférieurs : cochez Non

Ensuite :
Panneau d'administration Général Forum Catégories et forums

Créer une nouvelle catégorie pour l'occasion, dans laquelle vous ajouterez 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://illiweb.com/fa/empty.gif" alt="" /> )


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)
Vous devriez obtenir quelque chose de similaire :



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%" border="0" style="margin-top: -10px;">
<tr>
<td width="55">
<a href="lien vers le sous forum n°1"><img src="Lien vers l'image N°1" border="0" alt=""></a>
</td>
<td width="42%">


<a href="Lien vers le sous-forum N°1"><b>Titre du Sous-forum N°1</b></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="10">
 
</td>
<td width="55">
<a href="Lien vers le sous-forum N°2"><img src="Lien vers l'image N°2" border="0" alt=""></a>
</td>
<td width="42%">


<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" alt=""></a>
</td>
<td width="42%">


<a href="Lien vers le sous-forum N°3"><b>Titre du Sous-forum N°3</b></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="10">
 
</td>
<td width="55">
<a href="Lien vers le sous-forum N°4"><img src="Lien vers l'image N°4" border="0" alt=""></a>
</td>
<td width="42%">


<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>
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"><b>Titre du Sous-forum N°1</b></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"><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%>


<a href="Lien vers le sous-forum N°3"><b>Titre du Sous-forum N°3</b></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"><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

Ajout : Forums en version phpBB2

Ce tutoriel 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

Panneau d'administration Affichage 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

Notez que ces modifications peuvent toucher d'autres points du forum, la classe .genmed étant utilisée à de nombreux endroits.

avatar

Lezebre
Membre actif

Masculin
Messages : 3055
Inscrit(e) le : 07/03/2007

http://lezebre.superforum.fr
Lezebre a été remercié(e) par l'auteur de ce sujet.

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