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
Vous devez être fondateur pour pouvoir éditer les templates
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>
J'ai utilisé le nom DescForum
mais vous pouvez évidemment en mettre un autre. Le tout est de s'en souvenir.
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.
Rappel : vous pouvez regrouper des styles dans le css en les séparant par une virgule. Tout ce qui sera contenu dans les accolades sera commun à tous les styles énoncés.
Par exemple :
- Code:
-
/* propriétés communes aux trois classes MaClasse1, MaClasse2 et MaClasse3 */
.MaClasse1, .MaClasse2, .MaClasse3 {
margin:5px;
padding:5px;
height:100px;
}
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
Rappel: vous pouvez choisir à quel coin doit s'appliquer la propriété en utilisant une écriture de ce genre :
border-radius : XXpx XXpx XXpx XXpx
Les quatre valeurs correspondent, dans l'ordre, au rayons du coin supérieur gauche, coin supérieur droit, coin inférieur droit et coin inférieur gauche (dans le sens des aiguilles d'une montre en partant du coin supérieur gauche).
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'