Bonjour !

Dans ce tutoriel je vais vous expliquer en quelques lignes comment insérer une image, ou si vous le souhaitez du texte, ou n'importe quoi d'autre, entre vos catégories.

Il y a plusieurs placements possibles. Je vous invite à consulter la liste ci-dessous pour plus de détails

Notez que pour obtenir le résultat voulu, vous devrez placer les codes exactement aux endroits indiqués.

Sommaire

• Image unique au-dessus de toutes les catégories
  
• Image au-dessus de chaque catégorie
  
• Image unique en-dessous de toutes les catégories
  
• Image en-dessous de chaque catégorie
  
• Image unique sous le nom du forum (et des catégories pendant la navigation)
  
• Rappels et astuces

Ajouter un contenu...

Dans l'ensemble des méthodes recensées ci-après, je mettrai "VOTRE CODE (IMAGE, TEXTE...)" à l'emplacement où vous devrez rajouter votre code. Ce sera à vous de le remplacer par ce que vous voulez, il pourra s'agir d'image(s), de texte... de tout ce que vous voulez ! Je donnerai quelques explications supplémentaires pour vos codes dans la prochaine partie de ce tutoriel.

Au-dessus de l'ensemble des catégories

Cherchez ceci :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

Ajoutez votre code JUSTE AVANT, comme ceci :

Code:

VOTRE CODE (IMAGE, TEXTE...)
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

Au-dessus de chaque catégorie

Cherchez ceci :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

Ajoutez votre code JUSTE APRES, comme ceci :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->
VOTRE CODE (IMAGE, TEXTE...)

En dessous de l'ensemble des catégories

Cherchez ceci (tout à la fin du template) :

Code:

<!-- END tablefoot --><!-- END catrow -->

Ajoutez votre code JUSTE APRES, comme ceci :

Code:

<!-- END tablefoot --><!-- END catrow -->
VOTRE CODE (IMAGE, TEXTE...)

En dessous de chaque catégorie

Cherchez ceci (à la fin du template) :

Code:

<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Ajoutez votre code JUSTE AVANT, comme ceci :

Code:

VOTRE CODE (IMAGE, TEXTE...)
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Ou bien après l'image de séparation, comme ceci :

Code:

<img src="{SPACER}" alt="" height="5" width="1" />
VOTRE CODE (IMAGE, TEXTE...)
<!-- END tablefoot --><!-- END catrow -->

(Tout dépend si vous voulez un espace ou non avant votre contenu.)

En dessous des liens rapides

C'est un peu plus compliqué que les opérations précédentes, dans le sens où il y a plus de manipulations à faire. Mais avec un peu d'attention vous devriez comprendre sans trop de difficulté.
Avant de commencer, je vais vous montrer ce que nous allons faire, car je ne suis pas sûre que mon titre soit très explicite. Cliquez sur les liens pour avoir un aperçu.
Aperçu avant
Aperçu après
Nous allons apprendre à ajouter une image (ou éventuellement du texte, ou ce que vous voudrez) là où j'ai mis un cadre rouge sur l'image (ajouté en modifiant le template ^^).

Dans le template index_box, tout en haut, on trouve ceci :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>

En prenant le temps de détailler le code, vous comprendrez que les liens sont affichés dans un tableau à une ligne et deux colonnes.
Ce que nous allons faire, c'est séparer des autres la fonction qui affiche le nom du forum. C'est celle-ci :

Code:

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>

Il y a ensuite plusieurs façons de procéder. On pourrait soit rajouter deux lignes dans le tableau, soit fermer notre tableau et écrire en dessous. Nous allons plutôt utiliser la seconde méthode, car la première est plus longue à mettre en place. Inutile de nous compliquer la tâche alors que le résultat est identique.

Nous allons donc couper la partie de code que j'ai citée juste au-dessus, laisser une ligne vide sous le tableau, et la coller.
Dans la ligne vide qu'on vient de laisser, on mettra notre code. Et le tour est joué !
(Notez qu'il faudra rajouter style="text-align:left;" dans le div au début de la ligne qui contient l'affichage du nom du forum pour qu'il soit aligné à gauche.)

Ça donne quelque chose qui doit ressembler à ça :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>

VOTRE CODE (IMAGE, TEXTE...)

<div class="nav" style="text-align:left;"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>

Rappels et astuces

Dans cette dernière partie, je vais faire quelques rappels qui vont vous permettre de remplacer le "VOTRE CODE (IMAGE, TEXTE...)" inséré respectivement dans chaque cas ci-dessus, par ce que vous voulez. Je ne vais pas détailler toutes les possibilités, car en plus de ne pas être très utile je pense que ça sortirait un peu du but de ce tutoriel, mais seulement les deux qui seront, je pense, les plus utilisées, à savoir : l'ajout d'une image, ou de texte.

Si les explications que je peux donner ici ne vous suffisent pas, je vous renvoie à d'autres tutoriels ou aux cours sur le HTML/CSS.

Ajouter une classe à une balise HTML

On peut ajouter une classe à n'importe quelle balise. C'est très simple : il suffit d'écrire class="maclasse" après le nom de la balise. Le nom MaClasse étant le nom de notre classe, sans espace, sans ponctuation et sans accents. Vous pouvez utiliser les tirets – ou underscore (tiret bas) _
Ça donne :
<balise class="MaClasse"> ... </balise>
<balise class="MaClasse" />
Selon si vous utilisez une balise classique ou orpheline.

Vous pouvez attribuer plus d'une classe à une balise, il suffit de les séparer par un espace :
<balise class="MaClasse AutreClasse"> ... </balise>
Dans cet exemple nous utilisons donc les classes .MaClasse et .AutreClasse

Cette méthode est utile si vous avez plusieurs éléments qui ont la même mise en forme de base, mais que vous souhaitez rajouter quelques spécificités pour l'un d'entre eux.

Définir une classe dans le CSS

Le CSS de votre forum est accessible depuis le Panneau d'Administration, onglet Affichage, menu Images et couleurs » Couleurs puis dans l'onglet Feuille de style CSS.
L'intérêt du CSS est qu'il permet de ne pas surcharger le HTML et qu'il peut être modifié facilement sans qu'on ait besoin de retourner dans les templates.
Une classe se crée comme ceci :

Code:

.nom {
   propriété : valeur ;
}

N'oubliez pas le point devant le nom de la classe !
Vous pouvez mettre autant de propriétés que le vous le voulez. Conseil : pour plus de lisibilité, revenez à la ligne après chacune d'elle.
N'oubliez de nommer vos classes de façon explicite, on comprend mieux..HautDeCategorie que .bloc1 par exemple !

Ajouter un style à une balise

Ajouter un style à une balise revient à lui attribuer des propriétés CSS directement dans le HTML. Elles vont donc s'écrire de la même façon que cité ci-dessus, à la différence près qu'on évite généralement de revenir à la ligne entre deux, on ne fait que laisser un espace.
Pour ajouter le style, on utilise le même principe que pour ajouter une classe à une balise, sauf qu'on utilise l'attribut style au lieu de class, ce qui donne ceci :

Code:

<balise style="propriétés"> ... </balise>

Notez qu'on peut à la fois ajouter une classe et un style à une balise. Mais évitez autant que possible de donner des ordres contradictoires (ex : alignement à gauche demandé par la classe, et un alignement à droite dans style).

Insérer une image

Pas de mystère, il faut utiliser la balise HTML. Sans oublier le slash à la fin s'il vous plaît (la balise <img /> est une balise orpheline, on l'utilise seule, mais il faut la fermer)
Pour bien respecter les règles du langage HTML (je sais que forum + sémantique = incompatible... mais inutile d'empirer ça en faisant n'importe quoi ^^"), il faut mettre notre image entre balises de paragraphes <p>, ou bien entre balises <div>. On pourra ensuite rajouter une classe à notre paragraphe (ou <div>) pour lui appliquer différentes propriétés.
Ce qui donne :

Code:

<p><img src="url_de_l_image" /></p>
<div><img src="url_de_l_image" /></div>
<p class="MonImage"><img src="url_de_l_image" /></p>
<div class="MonImage"><img src="url_de_l_image" /></div>

Ajouter du texte

Là encore rien de sorcier... il suffit d'écrire ! Mais pas n'importe comment, certes. Notre texte devra être placé entre balises de paragraphe <p> :

Code:

<p>texte</p>
<p class="MonMessage"> Du texte </p>

Je rappelle que pour revenir à la ligne il faut utiliser la balise <br /> !

Centrer l'image ou le texte

Si vous avez bien suivi mes indications, votre image ou votre texte doit se trouver dans un bloc de paragraphe <p> ou dans un <div>. Nous allons devoir lui appliquer une propriété, que vous placerez soit directement dans la balise via l'attribut style (déconseillé), soit dans votre CSS si vous lui avez attribué une classe.
La propriété à placer est celle-ci : text-align : center;

Rapprocher l'image du bord de la catégorie

Je parle bien de rapprocher et non de coller, car ceci demanderait quelques manipulations supplémentaires que je préfère laisser aux experts.
Pour rapprocher notre image, nous allons supprimer les marges du div dans lequel elle doit être placée, si vous avez bien suivi mes indications précédentes. Pour ça, on va devoir ajouter des propriétés au bon endroit. C'est-à-dire dans le CSS si votre balise a une classe, ou via style directement dans la balise.
Les propriétés sont celles-ci :

Code:

margin: 0px ;
padding: 0px ;

On va ensuite chercher ceci dans le template index_box :

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

C'est le début du tableau dans lequel se trouvent nos catégories. On va faire la même chose et supprimer ses marges, mais seulement celles du haut (margin-top) et celles du bas (margin-bottom). Si on change celles de gauche et de droite, le tableau ne sera plus centré sur la page. Pour faire les choses proprement, on lui ajoute une classe spécialement pour ça, donc côté HTML on aura ça :

Code:

<table class="forumline SansMarges" width="100%" border="0" cellspacing="1" cellpadding="0">

Et côté CSS vous définissez la classe comme il faut :

Code:

/* Supression des marges haut et bas de forumline sur l'index */
.SansMarges { margin-top: 0px; margin-bottom: 0px; }

(Les sauts de ligne ne sont pas obligatoires en CSS, c'est surtout pour rendre le code plus lisible. Ici c'est assez basique donc on ne va pas se compliquer la vie, hein.)

Aligner le texte dans les cellules du tableau

Si vous avez suivi la dernière option que je propose dans ce tutoriel, vous avez sans doute remarqué que le texte s'aligne en bas de la cellule. Or peut-être préférez-vous qu'il s'aligne en haut, ou soit centré dans la case. Pour ça il suffit de changer un seul paramètre : l'attribut valign.
Je m'explique. Les cellules d'un tableau sont crées avec la balise <td>. Dedans, on peut mettre un attribut qui s'appelle valign, pour "vertical align", c'est à dire alignement vertical en français. Cet attribut gère donc l'alignement vertical du texte dans une case.
Nous allons donc chercher nos cellules td et regarder ce qu'il y a à l'intérieur.
Voici les balises d'ouverture de nos deux cellules :

Code:

<td valign="bottom">
<td class="gensmall" align="right" valign="bottom">

Ici valign a pour valeur bottom, qui signifie "en bas". C'est cette valeur qu'on va devoir changer pour modifier la position du texte. Les valeurs possibles sont les suivantes :
top : haut
middle : au milieu
A vous de voir ce qui vous convient.

Je m'arrêterai là pour les rappels. Les possibilités ne sont bien sûr pas aussi limitées, mais pour d'autres effets je vois renvoie à la lecture d'autres sujets.


Faites-en bon usage !
Fu'