Tutoriel créé par blue mermaid.

Sujet : image en haut et en bas des catégories (+ uniformisation).
Niveau : moyen.
Application : templates.

Coucou tout le monde !  

Vous avez envie de mettre une image en bas et en haut de vos catégories afin que celles-ci n'aient pas simplement des coins droits ou arrondis ? Alors je vais vous donner une astuce très simple  

Tout d'abord, voici un aperçu du résultat :

Spoiler:

Vous pouvez également uniformiser l'ensemble de votre forum en appliquant cette image à d'autres endroits.

La page d'accueil :

Spoiler:

Les sujets :

Spoiler:

Affichage d'un sujet :

Spoiler:

Tout d'abord, il faut que tu crées ces fameuses images de haut et de bas de catégorie au moyen d'un logiciel graphique mais ça, ce n'est pas ma spécialité alors je ne vais pas m'étendre sur ce sujet

Pour connaître la largeur de tes catégories, j'ai une méthode mais... elle est un peu triviale donc si quelqu'un en connait une plus scientifique, je suis preneuse xD

Personnellement, je fais un screen de mon forum quand le zoom de ma page est réglé à 100%. J'ouvre le screen sur photofiltre et j'encadre ma catégorie afin de connaître sa largeur exacte. Quand c'est fait, je reprends ces mesures pour créer mon image de haut et de bas de catégorie.

Quand cette étape plus « graphique » est passée, il vous suffit d'héberger l'image et de vous rendre dans la section TEMPLATES  de votre forum (accessible au compte fondateur uniquement) : panneau d'administration → affichage → templates → général.

Les images doivent être placées au sein des templates au moyen du code suivant :

Code:

<img src="IMAGE">

Ensuite, ouvrez le template index_box. Cherchez cette partie :

Code:

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

Juste après, placez l'image qui servira de haut à votre catégorie (nous l’appellerons IMAGE H).

Ensuite, cherchez cette partie :

Code:

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

Placez l'image du bas (IMAGE B) juste avant.

Enregistrez votre template et visualisez votre forum. Si le résultat vous plaît, vous pouvez valider la modification.

Voici les étapes à suivre pour uniformiser le forum.

PAGE D'ACCUEIL

Dans le template index-body, placez l'IMAGE H juste avant ceci :

Code:

<!-- BEGIN message_admin_index -->

Et l'IMAGE B juste après ceci :

Code:

<!-- END message_admin_index -->

LISTE DES SUJETS

Dans le template topics_list_box, placez l'IMAGE H après ceci :

Code:

<!-- END multi_selection -->

Et l'IMAGE B après ceci :

Code:

<!-- END topics_list_box -->

BOX SOUS LA LISTE DES SUJETS

Cette box comprend notamment les noms des utilisateurs parcourant actuellement le forum, etc.

Dans le template viewforum_body, placez l'IMAGE H après :

Code:

{TOPICS_LIST_BOX}

Et l'IMAGE B après :

Code:

<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span></td>

 </tr>

AFFICHAGE D'UN SUJET

Dans le template viewtopic_body, placez l'IMAGE H après :

Code:

<!-- END switch_plus_menu -->
 </span>
 </td>
 </tr>
</table>

Et l'IMAGE B après :

Code:

<!-- END viewtopic_bottom -->

Voilà, il ne vous reste plus qu'à valider vos templates et à admirer votre chef d'oeuvre

Merci pour le beau tutoriel! Je ne manquerais pas de l'utiliser!

Avec plaisir

Ce tutoriel est géniaaaaaaal

Contente qu'il plaise