Pré-requis

Bonjour !

Tout d'abord, le code qui sera décortiqué tout au long de ce tuto est une partie du template index_body

Où trouver ce template ? Dans votre panneau d'administration, cliquez sur l'onglet Affichage puis dans le menu Templates » Général. Vous trouverez le template index_body dans la liste qui s'affiche. Cliquez dessus pour accéder à la fenêtre d'édition du template.

Quelle est la partie qui concerne le QEEL ? Elle est délimitée par deux commentaires dans le code source. Cherchez ces deux lignes :

Code:

<!-- BEGIN disable_viewonline -->

Code:

<!-- END disable_viewonline -->

Tout ce qui est entre ces deux lignes concerne le QEEL. Pour plus de facilité, vous devriez copier coller ce code sur un éditeur de code (notepad++ par exemple, gratuit et en français) pour pouvoir l'étudier et le modifier à votre guise.

Nous allons diviser le tuto en deux parties. La première va essayer d'expliquer la structure du QEEL, la seconde va s'intéresser au contenu.

La Structure générale

Même si le code paraît inquiétant, de prime abord, il n'en est rien ! Il s'agit d'un bête tableau, du même principe que celui qu'on retrouve sur de nombreux messages d'accueil. Lorsqu'on a retiré toutes les parties "parasites", on obtient le tableau, que voici :

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28"></td>
   </tr>
   <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"></td>
      <td class="row1" width="100%"></td>
   </tr>
   <tr>
      <td class="row1"></td>
   </tr>
   
   <tr>
      <td class="row1"></td>
   </tr>
   
   <tr>
      <td class="row1"></td>
   </tr>
</table>

• Le code commence et finit par les balises table
• Chaque ligne du tableau est encadrée par les balises tr
• Chaque cellule est incluse entre les balises td

Rappel:

• A l'intérieur de la balise < table > et des balises < td >, vous pouvez voir des attributs : rowspan, colspan, align, valign, height, class, etc. Beaucoup sont importants, je vais vous les expliquer.

Explication des attributs

Pourquoi sont-ils importants ? Ils sont destinés à la mise en page du tableau. C'est pas très clair, mais essayez de les retirer, vous verrez que votre tableau ne se porte pas du tout de la même manière ! Rien d'étonnant. On va les expliquer un par un :

- width="100%" : L'attribut width signifie largeur. Placé dans la balise table, il donne donc une largeur de 100% au tableau, ce qui veut dire qu'il prendra toute la largeur du forum.
- height="28" : L'attribut height signifie hauteur. Vous le trouvez dans la première cellule du tableau, qui est donc fixée à 28px de haut. Notez qu'il s'agit d'une valeur indicative, si le contenu de la cellule est plus grand, alors celle-ci s'adaptera.
- colspan="2" : Ah ! Déjà plus intéressant. En fait c'est très simple là aussi. Si vous regardez votre QEEL, vous verrez que la première cellule (qui contient la fameuse phrase Qui est en ligne), occupe toute la largeur du tableau et que, par conséquent, elle englobe les autres colonnes. Et ces colonnes sont au nombre de... 2 ^^ d'où le deux ! L'attribut colspan sert donc à fusionner les cellules de manière horizontale (faites un essai sur un logiciel tableur (comme excel) si vous êtes perdu).
- rowspan="6" : Si vous avez bien compris l'effet de colspan, il vous sera aisé de comprendre celui de l'attribut rowspan ; comme colspan fusionne horizontalement les cellules, rowspan fusionne verticalement les cellules. Avec un peu de perspicacité, vous comprendrez que la cellule qui contient "rowspan" est en fait celle où se trouve l'image du QEEL. ^^"

Les autres attributs sont moins importants, plus à but "décoratif". Si vous les retirez, le tableau fonctionnera de la même manière, mais sera moins agréable à regarder. Je ne vais pas les détailler, vous pourrez faire vous-même vos essais. Si vraiment vous ne comprenez pas, je ferai un effort.

Bon, maintenant que nous avons compris comment est formé le tableau du QEEL, nous allons passer à la partie la plus compliquée, celle qui s'attache à la compréhension de son contenu... Ouvrez bien grand vos yeux ! XD

Le contenu...

Ummm... Il y a beaucoup de choses à dire sur le contenu, nous allons donc procéder ligne par ligne, afin de ne rien omettre. Ce n'est peut-être pas le plus compréhensible, sauf que je ne vois pas d'autre manière...

La première ligne : "Qui est en ligne ?"

Code:

   <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
   </tr>

Cette ligne ne contient qu'une cellule, qui en fusionne deux (colspan="2"). Il s'agit de celle qui contient la célèbre phrase "Qui est en Ligne ?". On voit qu'il y a deux éléments entre accolades, ce sont des variables de templates (une variable sert à stocker une donnée, voyez-ça comme les inconnues des équations mathématiques) :
• {U_VIEWONLINE} : Elle contient le lien qui vous mène sur la page contenant la liste des utilisateurs connectés et leur localisation géographique.
• {L_WHO_IS_ONLINE} : Cette variable contient simplement fait la phrase "Qui est en Ligne ?" Si vous la remplacez par "Patate Crue", et bien "Patate Crue" sera affiché à la place de "Qui est en Ligne".

Histoire de vous compliquer la vie, vous remarquez qu'il y a deux fois une ligne contenant cette dernière variable. La première avec un lien, la seconde sans, chacune étant entourée par deux commentaires :

Code:

<!-- BEGIN switch_viewonline_link -->
[LE "QUI EST EN LIGNE" AVEC LE LIEN]
<!-- END switch_viewonline_link -->

<!-- BEGIN switch_viewonline_nolink -->
[LE "QUI EST EN LIGNE" SANS LE LIEN]
<!-- END switch_viewonline_nolink -->

Je ne sais pas s'il s'agit d'une option dans le panneau d'admin (je ne l'ai pas trouvée) ou s'il s'agit d'un affichage réservé aux moteurs de recherche pour éviter qu'ils n'accèdent à cette page.

Mis à part ça, pas grand chose à dire sur cette première ligne, qui est tout de même simple à comprendre.

La deuxième ligne : L'image du QEEL et les statistiques du forum

Code:

<tr>
   <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
   <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
   {TOTAL_USERS}<br />
   {NEWEST_USER}</span></td>
</tr>

Cette ligne-ci est déjà plus intéressante. On remarque qu'elle contient deux cellules.

La première cellule contient une image (utilisation de la balise img). Il s'agit de l'image que vous avez choisie dans votre panneau d'administration. La variable {L_ONLINE_IMG}" contient son adresse. Si vous modifiez cette adresse, il y aura une autre image. Mais attention ! Si vous modifiez l'image en éditant ce code, elle ne changera plus automatiquement lorsque vous changerez de design.

Notez aussi la présence de l'attribut rowspan="6". Cela signifie que la cellule contenant l'image fusionnera avec les cellules en dessous d'elle, sur six lignes. Vous constaterez d'ailleurs dans la suite que, ces cellules ayant été "absorbées", chaque ligne ne contiendra plus qu'une seule cellule, la deuxième.

La deuxième cellule est en fait celle où sont affichées les "statistiques" du forum. Donc le nombre de messages, de membres et le dernier utilisateur.
• {TOTAL_POSTS} affiche Nos membres ont posté un total de xx messages
• {TOTAL_USERS} affiche Nous avons xx membres enregistrés
• {NEWEST_USER} affiche L'utilisateur enregistré le plus récent est xxxxx

La troisième ligne : Les utilisateurs en ligne

Code:

<tr>
   <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
   {RECORD_USERS}<br />
   <br />
   {LOGGED_IN_USER_LIST}</span></td>
</tr>

On remarque que dans cette ligne-ci, il n'y a qu'une cellule. Rien d'étonnant : on a vu dans le premier chapitre, et rappellé plus haut, que le QEEL était formé de 2 colonnes. Celle de gauche est l'image du QEEL. Et elle a déjà été remplie dans la ligne du dessus, donc on n'en parle plus pour la suite.

Bref, donc, cette ligne est celle qui indique le nombre de personnes en ligne, ainsi que le record de connectés. Vous y voyez trois variables de templates :
• {TOTAL_USERS_ONLINE} affiche Il y a en tout 1 utilisateur(s) en ligne :: x Enregistré(s), x Invisible(s) et x Invité(s)
• {RECORD_USERS} affiche Le record du nombre d'utilisateurs en ligne est de xx le xxx xx xxx xxxx
• {LOGGED_IN_USER_LIST} affiche Utilisateurs enregistrés : [liste des utilisateurs connectés]

La quatrième ligne : La liste des membres connectés

Jusqu'ici, tout allait bien. Mais si vous avez bien suivi, vous réalisez qu'il y a trois variables de templates qui se baladent entre les lignes sans raison, or il ne faut pas écrire "entre les lignes" dans un tableau. Voilà qui est bizarre ! La réponse est simple : les variables de template contiennent aussi du HTML et pas seulement du texte.

Commençons par la première : {L_CONNECTED_MEMBERS}
Plutôt qu'une simple ligne de texte, elle contient une ligne de code entière :

Code:

<tr>
   <td class="row1">
      <span class="gensmall">Membres connectés au cours des xx dernières heures : (liste des membres)</span>
   </td>
</tr>

Vous constatez qu'il s'agit d'une des lignes de tableau manquantes. Le fait qu'elle soit stockée dans une variable fait que ne pouvez donc pas modifier sa mise en forme, si vous vouliez "sortir" la liste des membres connectés du QEEL pour la placer de façon originale, il vous faudra d'abord l'encadrer de balises table, comme ceci :

Code:

<table>{L_CONNECTED_MEMBERS}</table>

La cinquième ligne : les anniversaires

Code:

{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}

Ces deux variables là sont encore plus vicieuses que la précédente puisqu'elles contiennent chacune une moitié de ligne de tableau. Les deux ENSEMBLE contiennent le code suivant :

Code:

<tr>
   <td class="row1">
      <span class="gensmall">Aucun membre ne fête son anniversaire aujourd'hui
      <br>
      Aucun membre ne fête son anniversaire dans les 7 prochains jours</span>
   </td>
</tr>

Apparemment, ça ne sert à rien de tenter de les séparer, même en "complétant" les parties manquantes comme avec la liste des dernières 24h. Vous pouvez toujours essayer si ça vous dit, mais vous risquez de tout casser.

La sixième ligne : la légende des groupes !

Code:

<tr>
   <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>

Comme vous devez l'avoir compris, c'est la légende ._. Youpi o/ xD
Bon alors... Deux variables sont utilisées ici :
• {LEGEND} affiche le mot "Légende". Donc théoriquement, si vous remplacez cette variable par "Je veux savoir quels sont les groupes" et bien, y'aura ça affiché au lieu de "Légende".
• {GROUP_LEGEND} affiche la liste des groupes de votre forum, encadrés par des crochets.

La dernière ligne : Statistiques et lien chatbox

On en arrive à la dernière ligne.

Code:

 <!-- BEGIN switch_chatbox_activate -->
  <tr>
      <td class="row1">
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
        </span>
      </td>
  </tr>
  <!-- END switch_chatbox_activate -->

Si vous avez compris l'explication donnée pour le texte Qui est en ligne, vous devez avoir une impression de déjà vu ici. Vous repérez plusieurs commentaires BEGIN et END :

Code:

<!-- BEGIN switch_chatbox_activate -->
   [ENTRE LES DEUX, CE QUI S'AFFICHE SI LA CHATBOX EST ACTIVEE]
 <!-- END switch_chatbox_activate -->

Code:

<!-- BEGIN switch_chatbox_popup -->
   [ENTRE LES DEUX, CE QUI S'AFFICHE SI ON A ACTIVE L'AFFICHAGE DU LIEN "Rejoindre le Chat"]
<!-- END switch_chatbox_popup -->

La seconde est bizarre dans la mesure où actuellement il n'y a pas d'option dans le panneau d'administration qui permette de supprimer le lien... Quoi qu'il en soit, cette partie du tableau ne s'affichera que si la chatbox est activée. On y croise trois variables de template :
• {TOTAL_CHATTERS_ONLINE} affiche "Il y a actuellement 0 utilisateur(s) sur la ChatBox : "
• {CHATTERS_LIST} affiche la liste des membres connectés à la ChatBox
• {L_CLICK_TO_JOIN_CHAT} (si, si, perdu au milieu du script bizarre) affiche le lien "[ Rejoindre le Chat ]"

C'est fini !

Voilà !

J'espère que ce petit tutoriel vous aura aidé à comprendre le fonctionnement et la structure de votre QEEL ! A partir de là, vous pourrez le modifier comme bon vous semble, car il est plus facile de modifier ce que l'on comprend que ce que l'on ne comprend pas.

Certains tutos ont déjà été faits sur le QEEL, et eux pourront vous aider dans vos modifications :
• Modifier l'apparence des noms d'utilisateurs en ligne
• Modifier les phrases du Qui Est En Ligne
• Changer la phrase "Qui est en ligne ?"
• Supprimer l'affichage des statistiques de la chatbox

Voire d'autres encore qui rejoindront ceux qui existent déjà, il vous suffit d'aller dans la section Pas à Pas » Structures de Footer de CSSActif !

Je vous renvoie aussi à la liste des problèmes résolus qui contient plusieurs questions sur les QEEL ^^ (utilisation de la fonction "rechercher" conseillée).