Description Catégorie Sympa

Aperçu (avec quelques modifications apporté au code) :



Voila un tout petit code afin de vous permettre l'affichage des descriptions des catégories d'une façon originale:

Code:

<table><tr><td><span style="color: #couleur; font-size: 1;">Texte descriptif</span></td><td width="25%"><div style="margin:auto;text-align:center;width:100%"><a href="liens sous forums" class="postlink">nom du sous forum</a></div><div style="margin:auto;text-align:center;width:100%"><a href="Liens sous forum 2" class="postlink">nom sous forum 2</a></div></td></tr></table>

Pour ajouter un lien ,il vous suffit de coller :

Code:

<div style="margin:auto;text-align:center;width:100%;"><a href="Liens sous forum 2" class="postlink">nom sous forum 2</a></div>

entre le dernier lien se finissant par la balise

Code:

</div>

et la fin de la balise colonne

Code:

</td>

Il vous faudra aussi retirer l'affichage des sous catégories dans structures & hiérarchies.

C'est certainement un tuto intéressant... mais je ne met un peu à la place d'une personne qui ne lit pas les codes très facilement et j'y vois pas grand chose^^" Un screen pour montrer le résultat aurait été nécessaire je pense, si tu peux en ajouter un... ?

Voila un exemple en image:

Attention pour le titre de la catégorie c'est un autre code.[Voir petit code CSS sympa]

C'est plus clair, merci. Je me suis permis d'ajouter l'image au début de ton message.

il ce met ou ? dans la feuille css ?

Non, il se met dans la description de la catégorie où tu veux appliquer cet effet. ^^

Merci pour l'astuce Albator, je trouve le rendu très pratique !

Hum je me permets juste de rajouter quelques petits trucs, même si ça peut paraître évident pour tout le monde. Certains n'y penseront justement pas :

Ca change pas le principe du code, juste sa... propreté.



Voilà le rendu que j'ai obtenu sur mon propre forum.

Là, le code de base :

Code:


<table>
<tr>
<td>
<font color=couleur de la typo><font size=1>Test descriptif</font ></font>
</td>
<td width="25%">
<div style="margin:auto;text-align:center;width:100%"><a href="liens sous forums" class="postlink">nom du sous forum</a></div><div style="margin:auto;text-align:center;width:100%"><a href="Liens sous forum 2" class="postlink">nom sous forum 2</a></div>
</td>
</tr>
</table>


Déjà, pour rendre ça plus propre, vous pouvez combiner les balises FONT. Pas forcément utile, mais vous prendrez moins de place, et c'est plus propre.

Ca donne ça :

Code:


<font color="#votre_couleur" size="1">Votre texte descriptif</font>


Au lieu de :

Code:


<font color="#votre_couleur"><font size="1">Votre texte descriptif</font></font>


Ensuite :

Vous pouvez attribuer des class à vos liens, c'est ainsi que j'ai pu obtenir le rendu affiché ci-dessus.

Dans cette balise :

Code:


<div style="margin:auto;text-align:center;width:100%">


Vous pouvez mettre :

Code:


<div style="margin:auto;text-align:center;width:100%" class="description_forum">


Vous pourrez ainsi personnaliser vos liens comme vous le souhaitez. De plus, la classe étant attribuée dans un div, la taille des bordures, fonds, etc, ne changera pas en fonction du texte du lien, contrairement à un span (du moins est-ce le rendu que j'avais avec des bordures et fonds de toutes les tailles, un truc bien laid comme il faut).

Et pour finir, vous pouvez toujours rajouter une colonne après la description (ou avant, ça depend comment vous avez mis ça), si vous avez une masse de lien et que vous voulez rendre ça esthétique.

Comme ceci :

Code:


<table>
<tr>
<td width="25%">
<div style="margin:auto;text-align:center;width:100%" class="description_forum"><a href="premier_lien" class="postlink">premier lien</a>
</div>
<div style="margin:auto;text-align:center;width="100%" class="quatrième lien"><a href="http://derniere-prophetie.forumgratuit.org/f13-espace-dessin">Dessin</a>
</div>
</td>
<td>
<div align="justify" style="margin:20px;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE
</div>
</td>
<td width="25%">
<div style="margin:auto;text-align:center;width="100%" class="description_forum"><a href="troisième lien">Troisième lien</a>
</div>
<div style="margin:auto;text-align:center;width="100%" class="description_forum><a href="quatrième_lien">Quatrième lien</a>
</div>
</td>
</tr>
</table>


Bon, pour les classes, je pense pas avoir besoin de vous dire que ça se passe via la feuille de Style CSS de votre forum, et que vous pouvez faire ce que vous voulez de la classe .description_forum (ah mais du coup, je l'ai dit là).

Bref, j'espère que ça en aidera certains et que ça en inspirera d'autres, et que ça sera pas trop inutile non plus. ^^

L.E.

Merci pour le tutoriel !

Coucou, je comprend le principe,
mais est ce qu'il serait possible davoir un code html et un CSS, pour bien voir ce qu'il faut mettre dans l'un ou l'autre, les balises correspondent etc merci ^^

Merci beaucoup =)

Bonjour!

J'ai tester le code sur mon forum teste pour voir comment sa rendais, sauf que j'ai un petit problème regarder

merci

merci

Petit +1 vers le vert !
Très utile, c'est ce que je recherchais, merci !

Merci ^^

merci :)

Merci (= !

MERCI

Merci :)

Merci

Je viens de l'installer sur mon forum, mais j'ai toujours les anciens liens vers les sous forums qui sont affichés en dessous de ma description et je ne sais pas vraiment comment les enlever...

oups, non c'est bon, je suis désolée ^^!

Merci

merci!

Merci du partage