Bonjour à tous !

Dans ce tutoriel, je vais vous expliquer comment agrémenter la description de vos forums.
Deux méthodes sont possibles, mais je vais surtout détailler celle qui consiste à modifier les templates, car pour la seconde avec les bases en CSS et HTML vous devriez être capable d'y arriver sans moi.

Vous trouverez à la fin de ce tutoriel un rappel de quelques balises CSS qui pourront vous être utiles, ainsi que quelques conseils qui pourront peut-être vous aider.

Avant de commencer, vous devez savoir qu'en utilisant la méthode qui consiste à modifier le template TOUTES vos descriptions de forums seront modifiées de la même façon. La seconde méthode vous permettra de modifier chaque description individuellement, mais elle est plus longue à mettre en place. Vous pouvez naturellement combiner les deux. Tout dépend de ce que vous voulez faire. Réfléchissez-y avant de commencer à coder pour vous simplifier la tâche.

1ère Méthode : en modifiant le template

Il faut tout d'abord aller chercher dans le template la fonction qui gère l'affichage de la description des forums. Pas de panique, en suivant mes instructions vous y arriverez en moins de deux minutes sans avoir besoin de vous arracher les cheveux.

Pour accéder à vos templates, rendez vous sur votre Panneau d'administration, onglet Affichage puis dans le menu Templates » Général, et ouvrez le template index_box. Cherchez cette ligne :

Code:

<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>

Pensez à utiliser la fonction de recherche (raccourci clavier : ctrl+f) pour aller plus vite.

Pour modifier toutes nos descriptions de catégories en un tournemain via le CSS, il faut appliquer une nouvelle classe CSS à notre description. Tant qu'à faire, on va carrément transformer le <span> en <div> pour éviter de trop compliquer le code. Remplacez la ligne ci-dessus par celle-ci :

Code:

<div class="genmed DescForum">{catrow.forumrow.FORUM_DESC}</div>

Cela fait, enregistrez puis publiez votre template.

Il ne vous reste plus qu'à vous amuser avec le CSS pour agrémenter vos descriptions comme il vous plaira. Pour cela, rendez vous toujours dans votre panneau d'administration, onglet Affichage puis dans le menu Images et Couleurs » Couleurs et accédez à l'onglet Feuille de style CSS. Vous devez définir la classe que vous avez appliquée à vos descriptions, comme ceci :

Code:

.DescForum {
    /* votre CSS ici */
}

2ème Méthode : en modifiant directement la catégorie

Pour cette méthode... rien d'exceptionnel. Dans votre panneau d'administration, onglet Général puis dans le menu Forum » Catégories et forums, allez sur votre catégorie, et entourez la description d'une balise div à laquelle vous aurez appliqué une classe.

Code:

<div class="DescForum2"> votre description </div>

Il ne vous reste plus qu'à créer votre style dans le CSS, enregistrer, et vous verrez apparaître votre mise en forme.

Cette méthode vous permet de mettre un style différent pour chaque forum, mais elle est assez longue à mettre en place. Je vous recommande de ne l'utiliser que si vous en avez vraiment besoin, sinon préférez la première méthode.

Conseils

Comme je l'ai dit précédemment, rien ne vous empêche d'utiliser les deux méthodes en même temps. C'est très intéressant si vous décidez que toutes vos descriptions doivent avoir des points communs dans leur présentation.

Par exemple, si vous voulez que toutes vos descriptions aient la même largeur et les mêmes marges sans avoir à les répéter, vous le précisez dans ce qui correspond sur mon tutoriel à .DescForum. Et dans .DescForum2 et suivantes vous précisez ce qui sera propre à chaque forum, ou groupe de forums selon ce que vous voulez faire.

Une autre note, qui va dans le même sens que le point précédent : pensez à rassembler le plus de valeurs communes possible plutôt que de les réécrire plusieurs fois.


Je vous mets un exemple :


Pour cet exemple, j'ai défini dans mon .DescForum la largeur de ma description et les marges extérieures (pour qu'elle ne colle pas au titre - même si sur mon exemple ça ne se voit pas puisque mes titres sont courts - et qu'elle soit centrée dans ma case). Dans .DescForum2 et .DescForum3 (les deux ensemble) j'ai défini l'arrondi de mes bordures et la hauteur. Et dans chacune des .DescForumX (X=2 et X=3) j'ai précisé le style de ma bordure (la couleur), et l'arrière plan.

A vous à présent de faire vos combinaisons. Et le meilleur conseil que je puisse encore vous donner c'est : faites des tests !
Et ayez une idée du résultat que vous voulez obtenir avant de commencer, quitte à devoir faire un dessin. Si vous ne savez pas ce que vous voulez atteindre... vous risquez de chercher longtemps !

Quelques propriétés CSS utiles

Pour les bordures :
border : bordure. Ajoutez son style, sa largeur et sa couleur à la suite (border est la méga-propriété)

solid : ligne continue simple
double : ligne continue double (n'apparaît que pour une largeur >= 3px)
dotted : pointillés
dashed : tirets
... et d'autres

Exemple : border : 1px dashed #990000 ;

Pour arrondir les angles : Ajoutez ces trois propriétés, en leur donnant une valeur en pixels (elles font chacune effet sur certains navigateurs et pas sur d'autres, d'où la nécessité de les mettre toutes les trois)

-moz-border-radius : XXpx
-webkit-border-radius : XXpx
border-radius : XXpx

Gérer le fond en CSS :
background : (méga-propriété) image, position et répétition de l'image en question, couleur, par exemple :
background: #COULEURFOND url('image-fond') top center no-repeat;

Je pense avoir dit l'essentiel. J'espère que j'ai réussi à être claire et que ce tutoriel vous sera utile.
Fu'