AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Guide du template "index-body" (Qeel)

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 2945

    le Jeu 2 Oct 2014 - 2:02




    Tuto - Guide du template "index-body" (Qeel)


    Vous avez envie de modifier votre template Index_body ou de faire votre propre qeel, mais vous vous perdez dedans sans le comprendre? C'est... plus que normal. Si on y est pas habitué, il faut quasiment une carte pour arriver à s'en sortir pas trop mal et on ne dégote pas une telle carte au magazin du coin.

    Tout cela pour dire que ce petit guide a pour but de vous guider dans le template pour que vous puissiez vous y repérer et identifier les différentes parties et variables, quelle que soit la version de votre forum ^^

    Voici ce que ce tutoriel va contenir :
    • 1. Visite guidée du template index_body sous PhpBB2
      • 1.1 Les variables de FA
      • 1.2 Le message de l'administrateur (PA)
      • 1.3 Connexion rapide
      • 1.4 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc...
      • 1.5 Qeel
      • 1.6 La fin du template (légende des statuts de forum, etc...)
      • 1.7 Modifier les phrases des variables de FA

    • 2. Visite guidée du template index_body sous PhpBB3
      • 2.1 Les variables de FA
      • 2.2 Date/Heure/Dernière visite - Connexion rapide
      • 2.3 Le message de l'administrateur (PA)
      • 2.4 Qeel
      • 2.5 La fin du template (légende des statuts de forum, etc...)
      • 2.6 Modifier les phrases des variables de FA

    • 3. Visite guidée du template index_body sous Invision
      • 3.1 Les variables de FA
      • 3.2 Le message de l'administrateur (PA)
      • 3.3 Connexion rapide
      • 3.4 Qeel
      • 3.5 La fin du template (légende des statuts de forum, etc...)
      • 3.6 Modifier les phrases des variables de FA

    • 4. Visite guidée du template index_body sous PunBB
      • 4.1 Les variables de FA
      • 4.2 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies" et compagnie ainsi que le login.
      • 4.3 Le message de l'administrateur (PA)
      • 4.4 Connexion rapide
      • 4.5 Qeel
      • 4.6 La fin du template (légende des statuts de forum, etc...)
      • 4.7 Modifier les phrases des variables de FA


    IMPORTANT : La version PunBB n'est pas finie (pratiquement pas touchée en fait), alors ne l'utilisez pas.



    1. Le template index_body avec PhpBB2


    En aperçu, ce template ressemble à ça :
    Image à remplacer

    En ordre, nous allons voir :
    • 1.1 Les variables de FA
    • 1.2 Le message de l'administrateur (PA) (En rouge/rose)
    • 1.3 Connexion rapide (En bleu)
    • 1.4 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc... (En mauve)
    • 1.5 Qeel (En vert)
    • 1.6 La fin du template (légende des statuts de forum, etc...) (En jaune)
    • 1.7 Modifier les phrases des variables de FA

    Comment se rendre dans le template :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > INDEX_BODY



    1.1 Variables de FA


    Il y a certaines variables de ForumActif qui contiennent des éléments déjà programmées par FA et qu'on ne peut pas mettre manuellement. Elles sont encadrées par des { } comme ceci : {VARIABLE_FA}

    Cela ne vous dit toujours rien? Eh bien vous savez la liste des connectés au cours des 24/48/72 dernières heures? Eh bien c'est la variable {L_CONNECTED_MEMBERS}. Si cela n'était pas déjà programmé par FA sous cette forme, nous aurions un truc long comme le bras qu'on aurait peur de toucher au cas ou cela exploserait. À la place, on peut prendre la variable, la déplacer, l'encadrer ou lui mettre une mise en forme sans que cela ne nuise à son fonctionnement.

    Voici la liste de la majorité des variables du template. À la fin de chaque section du tutoriel, il y aura un petit résumé des variables qu'on trouve dans ladite section pour vous permettre de mieux vous repérer ^^

    VariableSignification
    {JAVASCRIPT}Contient la majorité du javascript du template.
    {message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
    {message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)
    {L_USERNAME}Est écrit "Nom d'utilisateur"
    {L_AUTO_LOGIN}Est écrit "Connexion automatique"
    {L_PASSWORD}Est écrit "Mot de passe"
    {S_HIDDEN_FIELDS}Certains champs secrets utilisés pour la connexion, ne l'enlevez pas.
    {switch_user_login_form_header.switch_social_login.L_OR}Pour ceux qui ont activé l'option "Facebook connect", il est écrit "OU"
    {CHATBOX_TOP}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en haut".
    {BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
    {L_MARK_READ}Est écrit "Marquez tous les forums comme lus". Dans le lien qui le contient, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.
    {L_TODAY_ACTIVE}Est écrit "Sujets actifs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien qui mène aux sujets actifs du jour.
    {L_TODAY_POSTERS}Est écrit "Top 20 des posteurs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien qui mène au top 20 des posteurs du jour.
    {L_OVERALL_POSTERS}Est écrit "Top 20 des posteurs du forum". Dans le lien qui le contient, vous trouverez {U_OVERALL_POSTERS} qui est l'urorul du lien qui mène au top 20 des posteurs du forum.
    {switch_on_index.switch_delete
    _cookies.L_DELETE_COOKIES}
    Est écrit "Supprimer les cookies du forum". Dans le lien qui le contient, vous trouverez {switch_on_index.switch_delete
    _cookies.U_DELETE_COOKIES} qui est l'url du lien pour supprimer les cookies du forum.
    {L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
    {L_ONLINE_IMG}Url de l'image du Qeel
    {TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
    {TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
    {NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
    {TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
    {RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
    {LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
    {L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures. Est écrit "Membres connectés au cours des XX dernières heures : NOM"
    {L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
    {L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
    {LEGEND}Est écrit "Légende"
    {GROUP_LEGEND}Légende des groupes visibles
    {TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
    {CHATTERS_LIST}Liste des membres sur la ChatBox
    {CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
    {L_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
    {L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
    {L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"



    1.2 Le message de l'administrateur (PA)


    La première chose que l'on voit en arrivant dans le template, c'est {JAVASCRIPT}. On n'y touche pas, cela correspond à la majorité du javascript qui fait fonctionner ce template!

    On continue et on arrive dans le message de l'administrateur (entre les lignes 2 à 17) qui ressemble à ceci :
    Code:
    <!-- BEGIN message_admin_index -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <!-- BEGIN message_admin_titre -->
       <tr>
          <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
       </tr>
       <!-- END message_admin_titre -->
       <!-- BEGIN message_admin_txt -->
       <tr>
          <td class="row1" rowspan="3" align="center" valign="middle">
          <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
          </td>
       </tr>
       <!-- END message_admin_txt -->
    </table>
    <!-- END message_admin_index -->

    Cela correspond à ceci :
    Image à remplacer

    2 - Au tout début, nous avons «!-- BEGIN message_admin_index --» qui indique que c'est le début du message d'administrateur (PA).

    3 - Puis, nous avons un tableau. Pour tout ceux qui n'aiment pas le fond de leur message d'administrateur, c'est là que vous pourrez agir en changeant le nom de la class pour une class que vous aurez personnalisée ou même enlever carrément la class "forumline".

    4 - Nous avons ensuite le «!-- BEGIN message_admin_titre --» qui indique le début du titre de votre message d'administrateur.

    5 à 7 - Le titre de votre message d'administrateur correspond à cette variable {message_admin_index.message_admin_titre.MES_TITRE}. Encore une fois, vous pouvez modifier la class de la cellule ou du span qui l'entoure pour personnaliser ce titre.

    8 - Le «!-- END message_admin_titre --» indique la fin du titre de votre message d'administrateur.

    9 - À la ligne suivante, le «!-- BEGIN message_admin_txt --» indique le début du contenu de votre message d'administrateur.

    10 à 14 - Vous avez ensuite le contenu de votre message d'administrateur qui correspond à cette variable {message_admin_index.message_admin_txt.MES_TXT}. Vous pouvez modifier la class de la cellule ou du span qui l'entoure pour personnaliser ce contenu.

    15 - Puis, le «!-- BEGIN message_admin_txt --» indique la fin du contenu de votre message d'administrateur.

    16- Le < / table >  ferme le tableau du message d'administrateur.

    17 - Le «!-- END message_admin_index --» indique que la fin du message d'administrateur.

    Voilà !

    Et pour ceux qui veulent un récapitulatif des variables de cette partie :
    {JAVASCRIPT}Contient la majorité du javascript du template.
    {message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
    {message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)



    1.3 Connexion rapide


    Suite au message d'administrateur, nous avons la connexion rapide. Dans les options de notre forum, nous pouvons décider de ne pas l'afficher du tout, de l'afficher en haut de la page d'accueil ou en bas de la page d'accueil. Du coup, on le retrouve à deux endroits dans le template.

    Cela ressemble à ceci :
    Image à remplacer

    Entre les lignes 19 à 59, il y a la connexion rapide du haut. De la ligne 88 à la ligne 128, ce sera la connexion rapide du bas. Histoire de ne pas se répéter deux fois, je vais expliquer seulement la connexion rapide du haut.

    Bref, entre les lignes 19 à 81, le code de la connexion rapide ressemble à ceci :
    Code:
    <!-- BEGIN switch_user_login_form_header -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
            <tr>
                <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                    <table>
                        <tr>
                            <td><span class="genmed">{L_USERNAME}:</span> </td>
                            <td><input class="post" type="text" size="10" name="username"/> </td>
                            <td>
                                <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                                <span class="gensmall">{L_AUTO_LOGIN}</span> 
                            </td>
                        </tr>

                        <tr>
                            <td><span class="genmed">{L_PASSWORD}:</span> </td>
                            <td><input class="post" type="password" size="10" name="password"/> </td>
                            <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                    </table>
                </td>

                <!-- BEGIN switch_social_login -->
                <td width="10%" align="center" valign="middle" class="row1">
                    <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
                </td>
                <td width="40%" class="align_gauche row1">
                    <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    </div>
                </td>
                <!-- END switch_social_login -->

            </tr>
        </table>
    </form>
    <!-- END switch_user_login_form_header -->

    19 - Au tout début, nous avons le «!-- BEGIN switch_user_login_form_header --» qui indique le début de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- BEGIN switch_user_login_form_footer --».

    20 - Nous avons alors le début du formulaire de connexion rapide < form >. Je vous conseille de le laisser comme tel.

    21 à 22 - Nous avons le tableau qui contient le contenu de notre connexion rapide. Vous pouvez modifier la class du tableau afin d'en modifier l'apparence.

    23 - Première cellule du tableau qui contiendra la connexion rapide qu'on voit habituellement.

    25 - Nous avons un autre tableau imbriqué dans la première cellule de notre premier tableau. Ne demandez pas pourquoi, FA aime simplement trop ses tableaux...
    Il est inutile de modifier la class de ce tableau puisqu'il n'a de toute façon pas de mise en forme déjà prédéfinie. Il est seulement là pour aligner les différentes parties de la connexion rapide.

    26 - Première ligne du tableau imbriqué.

    27 - La première cellule de cette ligne contient la variable {L_USERNAME} qui ne sert qu'à écrire "Nom d'utilisateur".

    28 - La deuxième cellule de cette ligne contient la case < input > où nous pouvons inscrire notre nom d'utilisateur.

    29 à 32 - La dernière cellule de cette ligne contient la  case < input > que nous pouvons cocher pour nous connecteur automatiquement et la variable {L_AUTO_LOGIN} qui ne sert qu'à écrire "Connexion automatique".

    33 - Fin de la première ligne du tableau imbriqué.

    35 - Deuxième ligne du tableau imbriqué.

    36 - La première cellule de cette ligne contient la variable {L_PASSWORD} qui ne sert qu'à écrire "Mot de passe".

    37 - La deuxième cellule de cette ligne contient la case < input > où nous pouvons inscrire notre mot de passe.

    38 - La dernière cellule de cette ligne contient la  variable {S_HIDDEN_FIELDS} qui contient des champs secrets utilisés pour la connexion. Je vous conseille de ne pas essayer de modifier cette ligne. La cellule contient également le < input > qui correspond au bouton "connexion" sur lequel on clique pour se connecter. Essayez de ne pas le modifier non plus.

    39 à 40 - Fin de la deuxième ligne du tableau imbriqué et du tableau imbriqué dans le tableau de connexion rapide.

    41 - Fin de la première cellule du tableau de connexion.




    43 - Le «!-- BEGIN switch_social_login --» indique le début de ce qui apparaît si la fonction "Facebook Connect" est activée.

    44 à 46 - Nous voilà enfin avec une deuxième cellule à notre tableau. Elle contient la variable {switch_user_login_form_header.switch_fb_connect.L_OR} qui dit simplement "OU".

    47 - Ouverture la troisième et dernière cellule du tableau.

    48 - La div avec la class "social_btn" contiendra les informations facebook.

    49 - Le «!-- BEGIN fb_connect --» indique le début de la partie du bouton facebook.

    50 - La div avec la class "fb-login-button" est le bouton facebook.

    51 - Le «!-- END fb_connect --» indique la fin de la partie du bouton facebook.

    52 - On ferme la div avec la class "social_btn".

    53 - On ferme la troisième et dernière cellule du tableau de connexion rapide.

    54 - Le «!-- BEGIN switch_social_login --» indique la fin de ce qui apparaît si la fonction "Facebook Connect" est activée.

    56 à 58 - Fermeture du tableau

    59 - Le «!-- END switch_user_login_form_header --» indique la fin de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- END switch_user_login_form_footer --».

    Voilà!

    Pour ceux qui veulent un petit récapitulatif des variables de cette section :
    {JAVASCRIPT}Contient la majorité du javascript du template.
    {message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
    {message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)
    {L_USERNAME}Est écrit "Nom d'utilisateur"
    {L_AUTO_LOGIN}Est écrit "Connexion automatique"
    {L_PASSWORD}Est écrit "Mot de passe"
    {S_HIDDEN_FIELDS}Certains champs secrets utilisés pour la connexion, ne l'enlevez pas.
    {switch_user_login_form_header.switch_social_login.L_OR}Pour ceux qui ont activé l'option "Facebook connect", il est écrit "OU"



    1.4 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc...


    Directement à la suite de la connexion rapide du haut, nous avons deux petites variables aux lignes 61 et 62 qui sont extrèmement importante. Du moins, la deuxième l'est! Voici à quoi cela ressemble :
    Code:
    {CHATBOX_TOP}
    {BOARD_INDEX}

    82 - La variable {CHATBOX_TOP} est la chatbox qui apparaît si on a choisit de l'afficher en haut.

    83 - La variable {BOARD_INDEX} est le coeur de notre forum. Cela contient les catégories/forums et la liste des sujets. Bref, il ne faut surtout pas l'enlever!


    Voilà pour ce petit interlude. Maintenant, passons aux options qui sont habituellement juste en bas des catégories, à savoir entre les lignes 63 et 86. Ces options inclues le "Marquer tous les forums comme lus", "Sujets actifs du jour", "Top 20 des posteurs du jour", "Top 20 des posteurs du forum" et "Supprimer les cookies". Voici à quoi cela ressemble :
    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td width="50%" valign="top">
             <!-- BEGIN switch_user_logged_in -->
             <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
             <!-- END switch_user_logged_in -->
             <!-- BEGIN switch_delete_cookies -->
             <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
             <!-- END switch_delete_cookies -->
          </td>
          <td width="50%" align="right">
             <span class="gensmall">
                <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
                <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
                <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
                <!-- BEGIN switch_on_index -->
                   <!-- BEGIN switch_delete_cookies -->
                   <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
                   <!-- END switch_delete_cookies -->
                <!-- END switch_on_index -->
             </span>
          </td>
       </tr>
    </table>

    63 à 65 - Le début du tableau des options dont la première cellule est alignée à gauche.

    66 - Le «!-- BEGIN switch_user_logged_in --» indique le début d'une section que seul les utilisateurs connectés peuvent voir.

    67 - Cela contient la variable {L_MARK_FORUMS_READ} où il est écrit "Marquez tous les forums comme lus". Dans le lien qui contient cette variable, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.

    68 - Le «!-- END switch_user_logged_in --» indique la fin de la section que seul les membres connectés peuvent voir.

    69 à 71 - Normalement, le «!-- BEGIN switch_delete_cookies --» à la ligne 90 devrait indiquer le début de la section "Supprimer les cookies du forum" et le «!-- END switch_delete_cookies --» devrait indiquer la fin de cette section. Cela date de l'époque où nous n'avions pas encore l'option d'activer ou de désactiver la supression des cookies. Maintenant que nous pouvons l'activer/désactiver, cette section ne sert plus à rien. Vous constaterez d'ailleurs que quoi que vous y mettiez, rien n'apparaît sur le forum.

    72 à 74 - Fin de la première cellule de gauche et début de la cellule de droite avec le < span > qui met en forme le contenu.

    75 - Cela contient la variable {L_TODAY_ACTIVE} où il est écrit "Sujets actifs du jour". Dans le lien qui contient cette variable, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien pour accéder aux sujets actifs du jour.

    76 - Cela contient la variable {L_TODAY_POSTERS} où il est écrit "Top 20 des posteurs du jour". Dans le lien qui contient cette variable, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien pour accéder au top 20 des posteurs du jour.

    77 - Cela contient la variable {L_OVERALL_POSTERS} où il est écrit "Top 20 des posteurs du forum". Dans le lien qui contient cette variable, vous trouverez {U_OVERALL_POSTERS} qui est l'url du lien pour accéder au top 20 des posteurs du forum.

    78 - Le «!-- BEGIN switch_on_index --» indique le début de zone de l'index des cookies.

    79 - Le «!-- BEGIN switch_delete_cookies --»  indique le début de zone des cookies.

    80 - Cela contient la variable {switch_on_index.switch_delete_cookies.L_DELETE_COOKIES} où il est écrit "Supprimer les cookies du forum". Dans le lien qui contient cette variable, vous trouverez {switch_on_index.switch_delete_cookies.U_DELETE_COOKIES} qui est l'url du lien nos permettant de supprimer les cookies du forum.

    81 - Le «!-- END switch_delete_cookies --»  indique la fin de zone des cookies.

    82 - Le «!-- END switch_on_index --» indique la fin de zone de l'index des cookies.

    83 à 86 - La fermeture de la cellule de droite et du tableau.

    Voilà !

    Pour ceux qui veulent un récapitulatif des variables utilisées :
    {BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
    {L_MARK_READ}Est écrit "Marquez tous les forums comme lus". Dans le lien qui le contient, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.
    {L_TODAY_ACTIVE}Est écrit "Sujets actifs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien qui mène aux sujets actifs du jour.
    {L_TODAY_POSTERS}Est écrit "Top 20 des posteurs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien qui mène au top 20 des posteurs du jour.
    {L_OVERALL_POSTERS}Est écrit "Top 20 des posteurs du forum". Dans le lien qui le contient, vous trouverez {U_OVERALL_POSTERS} qui est l'urorul du lien qui mène au top 20 des posteurs du forum.
    {switch_on_index.switch_delete
    _cookies.L_DELETE_COOKIES}
    Est écrit "Supprimer les cookies du forum". Dans le lien qui le contient, vous trouverez {switch_on_index.switch_delete
    _cookies.U_DELETE_COOKIES} qui est l'url du lien pour supprimer les cookies du forum.



    1.5 Qeel


    Suite aux liens spéciaux, nous avons la fonction de connexion rapide qui revient encore une fois comme nous l'avions déjà mentionné. Puis, nous arrivons à la partie qui vous intéresse le plus, à savoir le Qeel.

    Vous le trouverez entre les lignes 130 et 178. Cela devrait ressembler à cela :
    Code:
    <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <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>
       <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>
       <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
       </tr>
       {L_CONNECTED_MEMBERS}
       {L_WHOSBIRTHDAY_TODAY}
       {L_WHOSBIRTHDAY_WEEK}
       <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
       </tr>
       <!-- BEGIN switch_chatbox_activate -->
       <tr>
          <td class="row1">
             <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                <!-- 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 -->
    </table>
    <!-- END disable_viewonline -->

    Dans les explications qui suivent, vous trouverez les indicateurs suivants qui veulent dire :

    *row1
    Si vous voulez modifier la mise en forme de cette cellule, vous pouvez changer le nom de la class pour une class que vous aurez personnalisée ou même enlever carrément la class "row1".

    **gensmall
    Si vous voulez modifier la mise en forme des variables de cette cellule, vous pouvez changer le nom de la class du span qui entoure les variables pour une class que vous aurez personnalisée ou même enlever carrément la class "gensmall".


    130 - Au tout début, le «!-- BEGIN disable_viewonline --» nous indique le début du qeel. Si nous désactivons les statistiques, tout ce que sera dans cette section n'apparaîtra pas.

    131 - Début du tableau du qeel. Vous pouvez changer le nom de la class pour une class que vous aurez personnalisée ou même enlever carrément la class "forumline".

    132 à 133 - Début de l'entête du qeel. Vous pouvez changer le nom de la class de la cellule pour une class que vous aurez personnalisée ou même enlever carrément la class "catHead".

    134 - Le «!-- BEGIN switch_viewonline_link --» nous indique le début de la zone du titre du qeel sous forme de lien.

    135 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?" et qui est à l'intérieur du lien dont l'url est la variable {U_VIEWONLINE} qui vous permet d'accéder à la localisation des IP des membres.
    Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class du lien et du span qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "cattitle".

    136 - Le «!-- END switch_viewonline_link --» nous indique la fin de la zone du titre du qeel sous forme de texte.

    138 - Le «!-- BEGIN switch_viewonline_nolink --» nous indique le début de la zone du titre du qeel sous forme de texte.

    139 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?".
    Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class du span qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "cattitle".

    140 - Le «!-- END switch_viewonline_nolink --» nous indique la fin de la zone du titre du qeel sous forme de texte.

    141 à 142 - On ferme la ligne de l'entête.

    143 - On ouvre la première ligne qui va contenir la cellule l'image du qeel et la première cellule des statistiques.

    144 - Cellule qui contient l'image du qeel. La variable {L_WHO_IS_ONLINE} correspond à l'url de l'image du qeel. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.
    *row1

    145 - Première ligne de la première cellule des statistiques. Cela contient la variable {TOTAL_POSTS}, soit la phrase "Nos membres ont posté un total de X messages" qui correspond au nombre de messages postés sur le forum.
    *row1
    **gensmall

    146 - Deuxième ligne de la première cellule des statistiques. Cela contient la variable {TOTAL_USERS}, soit la phrase "Nous avons X membre enregistré" qui correspond au nombre d'utilisateurs inscrits sur le forum.

    147 - Troisième ligne de la première cellule des statistiques. Cela contient la variable {NEWEST_USER}, soit la phrase "L'utilisateur enregistré le plus récent est NOM" qui correspond à l'utilisateur inscrit le plus récent.

    148 - On ferme notre première ligne du tableau.
    149 - On passe à la deuxième ligne du tableau.

    150 - Première ligne de la deuxième cellule des statistiques. Cela contient la variable {TOTAL_USERS_ONLINE}, soit la phrase "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité" qui correspond au nombre d'utilisateurs présents sur le site, dont les inscirts, les inscrits invisibles et les non-inscrits.
    *row1
    **gensmall

    151 - Deuxième ligne de la deuxième cellule des statistiques. Cela contient la variable {RECORD_USERS}, soit la phrase "Le record du nombre d'utilisateurs en ligne est de X le JOUR_DE_LA_SEMAINE JOUR MOIS ANNÉE - HH:MM" qui correspond au record du nombre d'utilisateurs présents sur le site en même temps.

    153 - Troisième ligne de la deuxième cellule des statistiques. Cela contient la variable {LOGGED_IN_USER_LIST}, soit la phrase "Utilisateurs enregistrés : NOM" qui correspond aux utilisateurs inscrits connectés en ce moment sur le forum.

    154 - On ferme la deuxième ligne du tableau.

    155 - La variable {L_CONNECTED_MEMBERS}, soit la phrase "Membres connectés au cours des XX dernières heures : NOM" qui correspond aux utilisateurs inscrits connectés au cours des dernières heures sur le forum.
    ATTENTION: Cette variable a certaines particuliarités qui seront expliquées à la fin de cette partie.

    156 - La variable {L_WHOSBIRTHDAY_TODAY}, soit la phrase "Aucun membre ne fête son anniversaire aujourd'hui" ou "Membres fêtant leur anniversaire aujourd'hui : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire aujourd'hui.
    ATTENTION: Cette variable a certaines particuliarités qui seront expliquées à la fin de cette partie.

    157 - La variable {L_WHOSBIRTHDAY_WEEK}, soit la phrase "Aucun membre ne fête son anniversaire au cours des 7 prochains jours" ou "Membres fêtant leur anniversaire au cours des 7 prochains jours : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire au cours des 7 prochains jours.
    ATTENTION: Cette variable a certaines particuliarités qui seront expliquées à la fin de cette partie.

    158 - Ouverture de l'avant dernière ligne du tableau.

    159 - Cellule qui contient la variable {LEGEND}, soit le mot "Légende :" et la variable {GROUP_LEGEND} qui correspond aux groupes visibles.
    *row1
    **gensmall

    160 - Fermeture de l'avant dernière ligne du tableau.

    161 - Le «!-- BEGIN switch_chatbox_activate --» indique le début de la zone des statistiques qui n'apparaissent que si la CB est activée.

    162 - Ouverture de la dernière ligne du tableau.
    163 - Ouverture de la dernière cellule du tableau.

    164 - Première ligne de la dernière cellule des statistiques. Cela contient la variable {TOTAL_CHATTERS_ONLINE}, soit la phrase "Il y a actuellement X utilisateur(s) sur la ChatBox : " qui correspond au nombre d'utilisateurs connectés sur la CB et la variable {CHATTERS_LIST} qui correspond aux pseudos des membres connectés sur la CB.
    *row1
    **gensmall

    165 - Le «!-- BEGIN switch_chatbox_popup --» indique le début du lien pour rejoindre la CB.

    166 à 171 - Script contenant le lien utilisé pour rejoindre la CB (Le [Rejoindre le Chat])

    172 - Le «!-- END switch_chatbox_popup --» indique la fin du lien pour rejoindre la CB.

    174 - Fermeture de la dernière cellule du tableau.
    175 - Fermeture de la dernière ligne du tableau.

    176 - Le «!-- END switch_chatbox_activate --» indique la fin de la zone des statistiques qui n'apparaissent que si la CB est activée.

    177 - On ferme le tableau.

    178 - Le «!-- END disable_viewonline --» indique la fin du qeel.



    Particularités de certaines variables :

    {L_CONNECTED_MEMBERS}, {L_WHOSBIRTHDAY_TODAY} et {L_WHOSBIRTHDAY_WEEK}

    Vous le remarquerez peut-être, mais ces variables ne sont pas dans une cellule. Elles sont glissées entre deux lignes du tableau.
    Pourquoi? Parce qu'en réalité, elles sont sous la forme suivante :
    Code:
    <tr><td class="row1><span class="gensmall">Membres connectés au cours des XX dernières heures : <a href="Lien vers le profil"><span style="color: couleur;"><strong>NOM</strong></span></a></span></td></tr>

    <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>


    Et là, vous vous dites "Mais moi, il y a un fond bleu sur ma class "row1" et je veux le garder sur le reste de mon forum. Sauf que je ne le veux pas dans mon CSS... Comment je m'en débarasse?

    Premièrement, si vous voulez créer votre propre qeel de A à Z en utilisant les variables, vous devrez faire attention d'encadrer ces variables d'un tableau «table» pour respecter la mise en forme.
    Pour ce qui est de la mise en forme, il y a deux classes qui sont déjà intégrés à la variable. Pour modifier ces classes, il vous suffit de mettre une class au tableau que vous avez utilisé pour encadrer votre variable. Puis, dans votre CSS, vous mettez la mise en forme que vous voulez en allant directement modifier les classes "row1" et "gensmall".

    Exemple dans le template :
    Code:
    <div id="qeel">
      <table class="nom_de_la_class_de_mon_tableau">
        {L_CONNECTED_MEMBERS}
      </table>

      <table class="nom_de_la_class_de_mon_tableau">
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
      </table>
    </div>

    Exemple dans le CSS :
    Code:
    /*Cellules des anniversaires et des derniers connectés*/
    .nom_de_la_class_de_mon_tableau td.row1 {
      background-color: transparent; /*Met la couleur de fond transparent*/
      padding: 0px; /*Enlève le padding automatique des cellules des anniversaires et des derniers connectés*/
    }

    /*Écriture des anniversaires et des derniers connectés*/
    .nom_de_la_class_de_mon_tableau span.gensmall {
      color: blue; /*Couleur du texte des anniversaires et des derniers connectés*/
      font-size: 12px; /*Taille du texte des anniversaires et des derniers connectés*/
      font-family: calibri; /*Police du texte des anniversaires et des derniers connectés*/
    }

    C'est fini!

    Pour ceux qui veulent un petit récapitulatif des variables :
    {L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
    {L_ONLINE_IMG}Url de l'image du Qeel
    {TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
    {TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
    {NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
    {TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
    {RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
    {LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
    {L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures. Est écrit "Membres connectés au cours des XX dernières heures : NOM"
    {L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
    {L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
    {LEGEND}Est écrit "Légende"
    {GROUP_LEGEND}Légende des groupes visibles
    {TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
    {CHATTERS_LIST}Liste des membres sur la ChatBox



    1.6 La fin du template (légende des statuts de forum, etc...)


    Suite au qeel, nous avons le reste du template, dont la légende des status de forum, la chat-box du bas, etc...

    Cela se situe entre les lignes 179 et 196. Cela devrait ressembler à cela :
    Code:
    {CHATBOX_BOTTOM}
    <br clear="all" />
    <!-- BEGIN switch_legend -->
    <table border="0" cellspacing="3" cellpadding="0" align="center">
       <tr>
          <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
          <td><span class="gensmall">{L_NEW_POSTS}</span></td>
          <td></td>
          <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
          <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
          <td> &nbsp;</td>
          <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
          <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
       </tr>
    </table>
    <!-- END switch_legend -->

    {AUTO_DST}

    179 - Au tout début, la variable {CHATBOX_BOTTOM} correspond à la chat-box qui vous avez choisi l'affichage "au bas de la page d'accueil".

    180 - Saut de ligne qui termine tous les flottements à droite ou gauche.

    181 - Le «!-- BEGIN switch_legend --» indique le début de la légende des statuts de forums (New/Old/Lock ou  "Nouveau/Anciens/Verrouillé).

    182 à 183 - Début du tableau de cette légende

    184 - Première cellule qui contient l'image de l'image New/Nouveau. La variable {FORUM_NEW_IMG} correspond à l'url de cette image.

    185 - Deuxième cellule qui contient la variable {L_NEW_POSTS} qui correspond à la phrase "Nouveaux messages"

    186 - Troisième cellule qui est vide pour créer un espace.

    187 - Quatrième cellule qui contient l'image de l'image Old/Ancien. La variable {FORUM_IMG} correspond à l'url de cette image.

    188 - Cinquième cellule qui contient la variable {L_NO_NEW_POSTS} qui correspond à la phrase "Pas de nouveaux messages"

    189 - Sixième cellule qui est vide pour créer un espace.

    190 - Septième cellule qui contient l'image de l'image Lock/Verrouillé. La variable {FORUM_LOCKED_IMG} correspond à l'url de cette image.

    191 - Huitième cellule qui contient la variable {L_FORUM_LOCKED} qui correspond à la phrase "Forum Verrouillé"

    192 à 193 - Fin du tableau.

    194 - Le «!-- END switch_legend --» indique la fin de la légende.

    196 - La variable {AUTO_DST} dont je ne suis jamais arrivé à trouver l'utilité... Par précaution, ne l'enlevez pas ^^

    Voilà!

    Pour ceux qui veulent un petit récapitulatif des variables :
    {CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
    {L_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
    {L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
    {L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"



    1.7 Modifier les phrases des variables de FA


    Nous avons vu comment se rendre au template, les variables qui y sont utilisées et une visite en profondeur du template. Nous avons aussi vu que beaucoup de variables contiennent un texte déjà pré-programmé.
    Mais comment garder les fonctionnalités d'une variable tout en changeant son texte? Eh bien c'est ce qu'on va voir ^^

    Tous les exemples seront faits avec la variable {NEWEST_USER} dont le texte est "L'utilisateur enregistré le plus récent est NOM" et qui devient, grace à un javascript, "La nouvelle recrue est NOM"

    Premièrement, nous devons avoir un moyen de sélectionner notre variable. Donc nous nous rendrons dans le template et nous entourerons notre variable d'un "span" ou d'une "div" à laquelle nous donnerons un "id" afin de l'identifier.

    Exemple :
    Code:
    <span id="newuser">{NEWEST_USER}</span>

    Ensuite, nous allons ajouter un petit javascript dans notre template. Ce javascript est séparé en deux parties :
    1. Il repère le contenu du span/div qui contient l'id indiqué.
    2. Il remplace un certain texte par un nouveau texte.

    Le voici :
    Code:
    <script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");</script>

    À deux endroit dans le script,  on voit ceci :
    document.getElementById('newuser')
    Il faut s'assurer de mettre l'id que nous avons mis à notre variable dans les parenthèses et entre les ' '.

    Vers la fin, nous avons :
    replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");
    Il faut mettre le texte à remplacer dans les parenthèses, entre les / /.
    Il faut mettre le nouveau texte dans les parenthèses, entre les " ".

    Voilà, vous savez comment modifier le texte de vos variables! À savoir que vous devez faire attention lorsqu'il y a des phrases au pluriel et au singulier afin de mettre un javascript pour chacune des options possibles.


    Dernière édition par Onyx le Sam 25 Mar 2017 - 18:44, édité 37 fois



    avatar
    Onyx
    FémininAge : 23Messages : 2945

    le Ven 3 Oct 2014 - 3:45


    2. Le template index_body avec PhpBB3


    En aperçu, ce template ressemble à ça :
    Image à venir.

    En ordre, nous allons voir :
    • 2.1 Les variables de FA
    • 2.2 Date/Heure/Dernière visite - Connexion rapide
    • 2.3 Le message de l'administrateur (PA)
    • 2.4 Qeel
    • 2.5 La fin du template (légende des statuts de forum, etc...)
    • 2.6 Modifier les phrases des variables de FA

    Les grosses différences entre PhpBB2, c'est que PhpBB2 tend à utiliser des tableaux pour tout alors que PhpBB3 tend à utiliser des div et des p. À savoir que la classe "pannel" de PhpBB3 est l'équivalent de la class "forumline" de PhpBB2.

    Comment se rendre dans le template :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > INDEX_BODY



    2.1 Variables de FA


    Il y a certaines variables de ForumActif qui contiennent des éléments déjà programmées par FA et qu'on ne peut pas mettre manuellement. Elles sont encadrées par des { } comme ceci : {VARIABLE_FA}

    Cela ne vous dit toujours rien? Eh bien vous savez la liste des connectés au cours des 24/48/72 dernières heures? Eh bien c'est la variable {L_CONNECTED_MEMBERS}. Si cela n'était pas déjà programmé par FA sous cette forme, nous aurions un truc long comme le bras qu'on aurait peur de toucher au cas ou cela exploserait. À la place, on peut prendre la variable, la déplacer, l'encadrer ou lui mettre une mise en forme sans que cela ne nuise à son fonctionnement.

    Voici la liste de la majorité des variables du template. À la fin de chaque section du tutoriel, il y aura un petit résumé des variables qu'on trouve dans ladite section pour vous permettre de mieux vous repérer ^^

    VariableSignification
    {JAVASCRIPT}Contient la majorité du javascript du template.
    {LAST_VISIT_DATE}Ta dernière visite sur le forum
    {CURRENT_TIME}La date/heure actuelle.
    {L_USERNAME}Est écrit "Nom d'utilisateur"
    {L_AUTO_LOGIN}Est écrit "Connexion automatique"
    {L_PASSWORD}Est écrit "Mot de passe"
    {S_HIDDEN_FIELDS}Certains champs secrets nécessaires à la connexion.
    {message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
    {message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)
    {CHATBOX_TOP}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en haut".
    {BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
    {L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
    {L_ONLINE_IMG}Url de l'image du Qeel
    {TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
    {RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
    {LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
    {L_ONLINE_USERS}Est écrit "Membres connectés au cours des XX dernières heures : "
    {L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures.
    {L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
    {L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
    {LEGEND}Est écrit "Légende"
    {GROUP_LEGEND}Légende des groupes visibles
    {L_STATISTICS}Est écrit "Statistiques" Lorsqu'il est dans un lien, vous trouverez {U_STATISTICS} qui est l'url qui mène aux statistiques du forum.
    {TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
    {TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
    {NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
    {CHATBOX_NAME}Est écrit "Chatbox" Lorsqu'il est dans un lien, vous trouverez {S_JOIN_CHAT} qui est l'url qui mène à la CB dans un nouvel onglet.
    {TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
    {CHATTERS_LIST}Liste des membres sur la ChatBox
    {CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
    {L_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
    {L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
    {L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"
    {AUTO_DST}Je n'en sais honnêtement rien. Pas touche au cas où ça servirait à quelque chose...



    2.2 Dernière visite/Date/Heure et Connexion rapide


    La première chose que l'on voit en arrivant dans le template, c'est {JAVASCRIPT}. On n'y touche pas, cela correspond à la majorité du javascript qui fait fonctionner ce template!

    Ensuite, on a la date de notre dernière visite ainsi que la date et l'heure du jour (entre les lignes 2 à 4) qui ressemble à ceci :
    Code:
    <!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
    <p>{CURRENT_TIME}</p>
    <br class="clear" />

    2 - Au tout début, le «!-- BEGIN switch_user_logged_in --» indique que ce qui apparaît ensuite n'est visible que si on est connecté en tant que membre.
    Le «p class="right rightside"» est une balise de paragraphe dont la class colle le contenu à droite.
    À l'intérieur, on a la variable {LAST_VISIT_DATE} qui montre la date et l'heure de votre dernière visite.
    Puis, la balise de paragraphe se ferme et le «!-- END switch_user_logged_in --» indique la fin de la zone visible seulement si on est connecté.

    3 - Le p est une balise normale de paragraphe. À l'intérieur, il y a la variable {CURRENT_TIME} qui montre la date et l'heure actuelles. Puis, la balise p est refermée.

    4 - C'est un saut de ligne dont la class "clear" met fin au "float" (positionnement qui fait flotter les éléments pour qu'ils soient côte à côte à la place d'un sous l'autre) de certaines balises précédentes.


    Ensuite, nous avons la connexion rapide. Dans les options de notre forum, nous pouvons décider de ne pas l'afficher du tout, de l'afficher en haut de la page d'accueil ou en bas de la page d'accueil. Du coup, on le retrouve à deux endroits dans le template.

    Entre les lignes 6 à 27, il y a la connexion rapide du haut. De la ligne 107 à la ligne 128, ce sera la connexion rapide du bas. Histoire de ne pas se répéter deux fois, je vais expliquer seulement la connexion rapide du haut.

    Bref, entre les lignes 6 à 23, le code de la connexion rapide ressemble à ceci :
    Code:
    <!-- BEGIN switch_user_login_form_header -->
    <div class="panel">
       <div class="inner"><span class="corners-top"><span></span></span>
          <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
             <div class="user_login_form center">
                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label> 
                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label> 
                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
                {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />

                    <!-- BEGIN switch_social_login -->
                    <div class="social_btn">
                        <!-- BEGIN fb_connect -->
                        <div class="fb-login-button"></div>
                        <!-- END fb_connect -->
                    </div>
                    <!-- END switch_social_login -->
             </div>
          </form>
       <span class="corners-bottom"><span></span></span></div>
    </div>
    <!-- END switch_user_login_form_header -->

    6 - Au tout début, nous avons le «!-- BEGIN switch_user_login_form_header --» qui indique le début de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- BEGIN switch_user_login_form_footer --».

    7 - Puis, nous avons une div avec la classe "panel" que vous pouvez personnaliser dans votre CSS si vous le souhaitez.

    8 - Nous avons alors une autre div avec la classe "inner" qui ne sert pas à grand chose. Le span avec la class "corners-top" qui suit sert à créer un effet arrondi sur le coin en haut à gauche. Quant au span à l'intérieur, il sert à créer l'effet arrondi sur le coin en haut de droite.

    9 - Nous avons alors le début du formulaire de connexion rapide < form >. Je vous conseille de le laisser comme tel si vous voulez que cela continue de fonctionner comme il faut.

    10 - Nous avons alors une div avec la classe "user_login_form" et "center" qui sert à centrer le contenu de la connexion rapide.

    11 - Le < label > indique une zone d'entrée de données, la variable {L_USERNAME} écrit "Nom d'utilisateur : " et la case < input > est la case où nous pouvons inscrire notre nom d'utilisateur.

    12 - Le < label > indique une zone d'entrée de données, la variable {L_PASSWORD} écrit "Mot de passe : " et la case < input > est la case où nous pouvons inscrire mot de passe.

    13 - Le < label > indique une zone d'entrée de données, la variable {L_AUTO_LOGIN} écrit "Connexion automatique : " et la case < input > est la case que nous pouvons cocher pour nous connecter automatiquement.

    14 - Nous commençons par la variable {S_HIDDEN_FIELDS} qui contient certains champs secrets nécessaires à la connexion, puis le bouton < input > "Connexion" qui nous permet de nous connecter au forum. Je vous conseille de ne pas essayer de modifier cette ligne.

    16 - Le «!-- BEGIN switch_fb_connect --» correspond au début de ce qui apparaît si la fonction Facebook Connect est activée.

    17 - Nous avons la variable {switch_user_login_form_header.switch_fb_connect.L_OR} qui écrit simplement "ou" à l'intérieur d'un span qui met en forme ce "ou".

    17 à 21 - C'est le bouton de connexion Facebook, on n'y touche pas.

    22 - Le «!-- END switch_fb_connect --» correspond à la fin de ce qui apparaît si la fonction Facebook Connect est activée.

    23 - On ferme la div qui centrait le texte.

    24 - On ferme le formulaire < /form >.

    25 - Comme au début, on a les span qui servent à faire les coins, sauf que cette fois-ci, c'est les coins du bas.

    26 - On ferme la div de cette section.

    27 - Le «!-- END switch_user_login_form_header --» indique la fin de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- END switch_user_login_form_footer --».

    Voilà! C'est... nettement plus simple que la version PhpBB2 XD

    Allez, voilà le récapitulatif des variables utilisées :
    {JAVASCRIPT}Contient la majorité du javascript du template.
    {LAST_VISIT_DATE}Ta dernière visite sur le forum
    {CURRENT_TIME}La date/heure actuelle.
    {L_USERNAME}Est écrit "Nom d'utilisateur"
    {L_AUTO_LOGIN}Est écrit "Connexion automatique"
    {L_PASSWORD}Est écrit "Mot de passe"
    {S_HIDDEN_FIELDS}Certains champs secrets nécessaires à la connexion.



    2.3 Le message de l'administrateur (PA)


    Suite au à la connexion rapide, on arrive dans le message de l'administrateur (entre les lignes 29 à 41) qui ressemble à ceci :
    Code:
    <!-- BEGIN message_admin_index -->
       <div class="panel introduction">
          <div class="inner"><span class="corners-top"><span></span></span>
       <!-- BEGIN message_admin_titre -->
          <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
       <!-- END message_admin_titre -->

       <!-- BEGIN message_admin_txt -->
          <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
       <!-- END message_admin_txt -->
          <span class="corners-bottom"><span></span></span></div>
       </div>
    <!-- END message_admin_index -->

    29 - Au tout début, nous avons «!-- BEGIN message_admin_index --» qui indique que c'est le début du message d'administrateur (PA).

    30 - Nous avons une div avec les classes "panel" et "introduction". Pour tout ceux qui n'aiment pas le fond de leur message d'administrateur, c'est là que vous pourrez agir en changeant le nom des classes pour une class que vous aurez personnalisée ou même enlever carrément les classes.

    31 - On a encore notre div "inner" qui est l'intérieur et dans laquelle il y a les span qui font les coins.

    32 - Nous avons ensuite le «!-- BEGIN message_admin_titre --» qui indique le début du titre de votre message d'administrateur.

    33 - Le titre de votre message d'administrateur correspond à cette variable {message_admin_index.message_admin_titre.MES_TITRE}. Encore une fois, vous pouvez modifier la class "h3" du span qui l'entoure pour personnaliser ce titre.

    34 - Le «!-- END message_admin_titre --» indique la fin du titre de votre message d'administrateur.

    36 - Deux lignes après, le «!-- BEGIN message_admin_txt --» indique le début du contenu de votre message d'administrateur.

    37 - Vous avez ensuite le contenu de votre message d'administrateur qui correspond à cette variable {message_admin_index.message_admin_txt.MES_TXT}. Vous pouvez modifier la class "mes-txt" de la div qui l'entoure pour personnaliser ce contenu.

    38 - Puis, le «!-- BEGIN message_admin_txt --» indique la fin du contenu de votre message d'administrateur.

    39 - On a nos habituels span qui font les coins et le texte et la fin de notre div "inner".

    40 - Fermeture de notre div du message d'administration.

    41 - Le «!-- END message_admin_index --» indique que la fin du message d'administrateur.

    Voilà ~


    Pour ceux qui veulent le récapitulatif des variables utilisées :
    {message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
    {message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)



    2.4 Qeel


    Directement à la suite de la connexion rapide du haut, nous avons deux petites variables aux lignes 43 et 44 qui sont extrèmement importante. Du moins, la deuxième l'est! Voici à quoi cela ressemble :
    Code:
    {CHATBOX_TOP}
    {BOARD_INDEX}

    43 - La variable {CHATBOX_TOP} est la chatbox qui apparaît si on a choisit de l'afficher en haut.

    44 - La variable {BOARD_INDEX} est le coeur de notre forum. Cela contient les catégories/forums et la liste des sujets. Bref, il ne faut surtout pas l'enlever!

    Dans PhpBB2, il y avait ensuite les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc. Ces liens sont inclus dans le {BOARD_INDEX} et sont modifiables à partir d'un autre template.


    Maintenant qu'on a passé ces petits détail, allons à la partie qui vous intéresse probablement le plus, à savoir le Qeel.

    Vous le trouverez entre les lignes 46 et 103. Cela devrait ressembler à cela :
    Code:
    <!-- BEGIN disable_viewonline -->

       <!-- BEGIN switch_viewonline_link -->
       <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
       <!-- END switch_viewonline_link -->

       <!-- BEGIN switch_viewonline_nolink -->
       <div class="h3">{L_WHO_IS_ONLINE}</div>
       <!-- END switch_viewonline_nolink -->

    <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
    <p>{TOTAL_USERS_ONLINE}<br />
    {RECORD_USERS}

    <br />
    {LOGGED_IN_USER_LIST}

    {L_ONLINE_USERS}
    {L_CONNECTED_MEMBERS}<br />
    {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

    <br />
    <em>{LEGEND} : {GROUP_LEGEND}</em>

    </p>
    <div class="clear"></div>

       <!-- BEGIN switch_statistics_link -->
       <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
       <!-- END switch_statistics_link -->

       <!-- BEGIN switch_statistics_nolink -->
       <div class="h3">{L_STATISTICS}</div>
       <!-- END switch_statistics_nolink -->

    <p class="page-bottom">
    {TOTAL_POSTS}
    </p>
    <p class="page-bottom">
    {TOTAL_USERS}
    </p>
    <p class="page-bottom">
    {NEWEST_USER}
    </p>
       <!-- BEGIN switch_chatbox_activate -->
       <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
       <div class="page-bottom">
       {TOTAL_CHATTERS_ONLINE} :&nbsp;
       {CHATTERS_LIST}<br />
       </div>
          <!-- BEGIN switch_chatbox_popup -->
          <div id="chatbox_popup"></div>
          <script type="text/javascript">
          insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
          </script>
          <!-- END switch_chatbox_popup -->
       <!-- END switch_chatbox_activate -->
    <!-- END disable_viewonline -->

    46 - Au tout début, le «!-- BEGIN disable_viewonline --» nous indique le début du qeel. Si nous désactivons les statistiques, tout ce que sera dans cette section n'apparaîtra pas.

    48 - Le «!-- BEGIN switch_viewonline_link --» nous indique le début de la zone du titre du qeel sous forme de lien.

    49 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?" et qui est à l'intérieur du lien dont l'url est la variable {U_VIEWONLINE} qui vous permet d'accéder à la localisation des IP des membres.
    Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    50 - Le «!-- END switch_viewonline_link --» nous indique la fin de la zone du titre du qeel sous forme de lien.

    52 - Le «!-- BEGIN switch_viewonline_nolink --» nous indique le début de la zone du titre du qeel sous forme de texte.

    53 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?".
    Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    54 - Le «!-- END switch_viewonline_nolink --» nous indique la fin de la zone du titre du qeel sous forme de texte.

    56 - Nous avons l'image du qeel. La variable {L_WHO_IS_ONLINE} correspond à l'url de l'image du qeel. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.

    57 - Il y a l'ouverture d'une balise de paragraphe < p > qui va contenir la majorité des statistiques.
    Puis, il y a la variable TOTAL_USERS_ONLINE}, soit la phrase "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité" qui correspond au nombre d'utilisateurs présents sur le site, dont les inscirts, les inscrits invisibles et les non-inscrits.
    Enfin, il y a un saut de ligne.

    58 - Voici la variable {RECORD_USERS}, soit la phrase "Le record du nombre d'utilisateurs en ligne est de X le JOUR_DE_LA_SEMAINE JOUR MOIS ANNÉE - HH:MM" qui correspond au record du nombre d'utilisateurs présents sur le site en même temps.
    NOTE : Il y a un saut de ligne automatique inclus à la fin de cette variable.

    60 - Un simple saut de ligne.

    61 - {LOGGED_IN_USER_LIST}, soit la phrase "Utilisateurs enregistrés : NOM" qui correspond aux utilisateurs inscrits connectés en ce moment sur le forum.

    63 - Nous avons la variable {L_ONLINE_USERS}, soit la phrase "Membres connectés au cours des XX dernières heures : ".
    NOTE : Il y a un saut de ligne automatique inclus à la fin de cette variable.

    64 - La variable {L_CONNECTED_MEMBERS} qui correspond aux utilisateurs inscrits connectés au cours des dernières heures sur le forum, puis un saut de ligne.

    65 - La variable {L_WHOSBIRTHDAY_TODAY}, soit la phrase "Aucun membre ne fête son anniversaire aujourd'hui" ou "Membres fêtant leur anniversaire aujourd'hui : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire aujourd'hui.
    Puis, la variable {L_WHOSBIRTHDAY_WEEK}, soit la phrase "Aucun membre ne fête son anniversaire au cours des 7 prochains jours" ou "Membres fêtant leur anniversaire au cours des 7 prochains jours : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire au cours des 7 prochains jours.
    NOTE : Il y a un saut de ligne automatique inclus à la fin de chacune de ces variables.

    67 - Un saut de ligne.

    68 - La variable {LEGEND}, soit le mot "Légende" et la variable {GROUP_LEGEND} qui correspond aux groupes visibles.

    70- Fermeture de la balise < p > qui ferme cette section du qeel.

    71 - Une div qui sert à arrêter les float des balises précédentes s'il y en avait.

    73 - Le «!-- BEGIN switch_statistics_link --» nous indique le début de la zone du titre des statistiques du qeel sous forme de lien.

    74 - La variable {L_STATISTICS} qui contient le texte "Statistiques" et qui est à l'intérieur du lien dont l'url est la variable {U_STATISTICS} qui vous permet d'accéder aux statistiques du forum.
    Si vous voulez modifier la mise en forme du "Statistiques", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    75 - Le «!-- END switch_statistics_link --» nous indique la fin de la zone du titre des statistiques sous forme de lien.

    77 - Le «!-- BEGIN switch_statistics_nolink --» nous indique le début de la zone du titre des statistiques du qeel sous forme de texte.

    78 - La variable {L_STATISTICS} qui contient le texte "Statistiques".
    Si vous voulez modifier la mise en forme du "Statistiques", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    79 - Le «!-- END switch_statistics_nolink --» nous indique la fin de la zone du titre des statistiques sous forme de texte.

    81 à 83 - La variable {TOTAL_POSTS}, soit la phrase "Nous avons X membre enregistré" qui correspond au nombre d'utilisateurs inscrits sur le forum. C'est encadré d'une balise de paragraphe.

    84 à 86 - La variable {TOTAL_USERS}, soit la phrase "Nous avons X membre enregistré" qui correspond au nombre d'utilisateurs inscrits sur le forum.. C'est encadré d'une balise de paragraphe.

    87 à 89 - La variable {NEWEST_USER}, soit la phrase "L'utilisateur enregistré le plus récent est NOM" qui correspond à l'utilisateur inscrit le plus récent. C'est encadré d'une balise de paragraphe.

    90 - Le «!-- BEGIN switch_chatbox_activate --» indique le début de la zone des statistiques qui n'apparaissent que si la CB est activée.

    91 - La variable {CHATBOX_NAME} qui contient le texte "Chatbox" et qui est à l'intérieur du lien dont l'url est la variable {S_JOIN_CHAT} qui vous permet d'accéder à la chatbox dans un nouvel onglet.
    Si vous voulez modifier la mise en forme du "Statistiques", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    92 - Voilà la div qui englobe les statistiques de la CB.

    93 - La variable {TOTAL_CHATTERS_ONLINE}, soit la phrase "Il y a actuellement X utilisateur(s) sur la ChatBox" qui correspond au nombre d'utilisateurs connectés sur la CB.

    94 - La variable {CHATTERS_LIST} qui correspond aux pseudos des membres connectés sur la CB. Puis, il y a un saut de ligne.

    95 - Fin de la div des statistiques de la CB.

    96 - Le «!-- BEGIN switch_chatbox_popup --» indique le début du lien pour rejoindre la CB.

    97 à 100 - Script contenant le lien utilisé pour rejoindre la CB (Le [Rejoindre le Chat])

    101 - Le «!-- END switch_chatbox_popup --» indique la fin du lien pour rejoindre la CB.

    102 - Le «!-- END switch_chatbox_activate --» indique la fin de la zone des statistiques qui n'apparaissent que si la CB est activée.

    103 - Le «!-- END disable_viewonline --» indique la fin du qeel.


    Pour ceux qui veulent le récapitulatif des variables utilisées :
    {CHATBOX_TOP}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en haut".
    {BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
    {L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
    {L_ONLINE_IMG}Url de l'image du Qeel
    {TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
    {RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
    {LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
    {L_ONLINE_USERS}Est écrit "Membres connectés au cours des XX dernières heures : "
    {L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures.
    {L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
    {L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
    {LEGEND}Est écrit "Légende"
    {GROUP_LEGEND}Légende des groupes visibles
    {L_STATISTICS}Est écrit "Statistiques" Lorsqu'il est dans un lien, vous trouverez {U_STATISTICS} qui est l'url qui mène aux statistiques du forum.
    {TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
    {TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
    {NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
    {CHATBOX_NAME}Est écrit "Chatbox" Lorsqu'il est dans un lien, vous trouverez {S_JOIN_CHAT} qui est l'url qui mène à la CB dans un nouvel onglet.
    {TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
    {CHATTERS_LIST}Liste des membres sur la ChatBox



    2.5 La fin du template (légende des statuts de forum, etc...)


    Suite au qeel, nous avons le reste du template, dont la légende des status de forum, la chat-box du bas, etc... On va commencer par ce qui n'est pas trop dur :

    - Nous avons une petite variable intéressanteà la ligne 105, à savoir la variable {CHATBOX_BOTTOM} est la chatbox qui apparaît si on a choisit de l'afficher en bas.
    - Les lignes 107 à 128 correspondent à notre connexion rapide du bas, alors nous n'allons pas revenir dessus.

    Pour ce qui n'est pas rebondant, on a les lignes 130 à 140 :
    Code:
    <br style="clear:both" />

    <!-- BEGIN switch_legend -->
    <ul id="picture_legend">
       <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
       <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
       <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
    </ul>
    <!-- END switch_legend -->

    {AUTO_DST}

    130 - Saut de ligne qui termine tous les flottements à droite ou gauche.

    132 - Le «!-- BEGIN switch_legend --» indique le début de la légende des statuts de forums (New/Old/Lock ou "Nouveau/Anciens/Verrouillé).

    133 - Début de la liste < ul > horizontale de cette légende.

    134 - Première section de cette liste < li > qui contient l'image de l'image New/Nouveau. La variable {FORUM_NEW_IMG} correspond à l'url de cette image.
    Puis, on a la variable {L_NEW_POSTS} qui correspond à la phrase "Nouveaux messages".

    135 - Première section de cette liste < li > contient l'image de l'image Old/Ancien. La variable {FORUM_IMG} correspond à l'url de cette image.
    Puis, on a la variable {L_NO_NEW_POSTS} qui correspond à la phrase "Pas de nouveaux messages".

    136 - Première section de cette liste < li > qui contient l'image de l'image Lock/Verrouillé. La variable {FORUM_LOCKED_IMG} correspond à l'url de cette image.
    Puis, on a la variable {L_FORUM_LOCKED} qui correspond à la phrase "Forum Verrouillé".

    137 - Fin de la liste.

    138 - Le «!-- END switch_legend --» indique la fin de la légende.

    140- La variable {AUTO_DST} dont je ne suis jamais arrivé à trouver l'utilité... Par précaution, ne l'enlevez pas ^^

    Voilà !


    Pour ceux qui veulent le récapitulatif des variables utilisées :

    {CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
    {L_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
    {L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
    {L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"
    {AUTO_DST}Je n'en sais honnêtement rien. Pas touche au cas où ça servirait à quelque chose...



    2.6 Modifier les phrases des variables de FA


    Nous avons vu comment se rendre au template, les variables qui y sont utilisées et une visite en profondeur du template. Nous avons aussi vu que beaucoup de variables contiennent un texte déjà pré-programmé.
    Mais comment garder les fonctionnalités d'une variable tout en changeant son texte? Eh bien c'est ce qu'on va voir ^^

    Tous les exemples seront faits avec la variable {NEWEST_USER} dont le texte est "L'utilisateur enregistré le plus récent est NOM" et qui devient, grace à un javascript, "La nouvelle recrue est NOM"

    Premièrement, nous devons avoir un moyen de sélectionner notre variable. Donc nous nous rendrons dans le template et nous entourerons notre variable d'un "span" ou d'une "div" à laquelle nous donnerons un "id" afin de l'identifier.

    Exemple :
    Code:
    <span id="newuser">{NEWEST_USER}</span>

    Ensuite, nous allons ajouter un petit javascript dans notre template. Ce javascript est séparé en deux parties :
    1. Il repère le contenu du span/div qui contient l'id indiqué.
    2. Il remplace un certain texte par un nouveau texte.

    Le voici :
    Code:
    <script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");</script>

    À deux endroit dans le script, on voit ceci :
    document.getElementById('newuser')
    Il faut s'assurer de mettre l'id que nous avons mis à notre variable dans les parenthèses et entre les ' '.

    Vers la fin, nous avons :
    replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");
    Il faut mettre le texte à remplacer dans les parenthèses, entre les / /.
    Il faut mettre le nouveau texte dans les parenthèses, entre les " ".

    Voilà, vous savez comment modifier le texte de vos variables! À savoir que vous devez faire attention lorsqu'il y a des phrases au pluriel et au singulier afin de mettre un javascript pour chacune des options possibles.


    Dernière édition par Onyx le Sam 25 Mar 2017 - 3:07, édité 6 fois



    avatar
    Onyx
    FémininAge : 23Messages : 2945

    le Ven 3 Oct 2014 - 3:46


    3. Le template index_body avec Invision


    En aperçu, ce template ressemble à ça :
    Image à venir.

    En ordre, nous allons voir:
    • 3.1 Les variables de FA
    • 3.2 Le message de l'administrateur (PA)
    • 3.3 Connexion rapide
    • 3.4 Qeel
    • 3.5 La fin du template (légende des statuts de forum, etc...)
    • 3.6 Modifier les phrases des variables de FA

    Invision mélange à la fois les tableaux, les p et les div. Il est donc à la fois plus complexe et plus simple que les deux versions précédentes.
    Les fameuses classes "forumline" pour PhpBB2 et "pannel" pour PhpBB3 correspondent à la classe "borderwrap" sur Invision.

    Comment se rendre dans le template :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > INDEX_BODY



    3.1 Variables de FA


    Il y a certaines variables de ForumActif qui contiennent des éléments déjà programmés par FA et qu'on ne peut pas mettre manuellement. Elles sont encadrées par des { } comme ceci : {VARIABLE_FA}

    Cela ne vous dit toujours rien? Eh bien vous savez la liste des connectés au cours des 24/48/72 dernières heures? Eh bien c'est la variable {L_CONNECTED_MEMBERS}. Si cela n'était pas déjà programmé par FA sous cette forme, nous aurions un truc long comme le bras qu'on aurait peur de toucher au cas où cela exploserait. À la place, on peut prendre la variable, la déplacer, l'encadrer ou lui mettre une mise en forme sans que cela nuise à son fonctionnement.

    Voici la liste de la majorité des variables du template. À la fin de chaque section du tutoriel, il y aura un petit résumé des variables qu'on trouve dans ladite section pour vous permettre de mieux vous repérer ^^

    VariableSignification
    {JAVASCRIPT}Contient la majorité du javascript du template.
    {L_INDEX}Il s'agit du nom du forum juste en haut à gauche du message d'accueil.
    {U_INDEX}C'est l'url du lien qui contient le {L_INDEX}. Cela nous ramène à la page d'accueil du forum.
    {LAST_VISIT_DATE}Ta dernière visite sur le forum
    {message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
    {message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)
    {L_USERNAME}Est écrit "Nom d'utilisateur"
    {L_PASSWORD}Est écrit "Mot de passe"
    {L_AUTO_LOGIN}Est écrit "Connexion automatique"
    {S_HIDDEN_FIELDS}Ce sont des champs secrets utilisés pour la connexion rapide, pas touche ~
    {CHATBOX_TOP}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en haut".
    {BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
    {L_STATISTICS}Est écrit "Statistiques". Lorsqu'il est dans un lien, vous trouverez {U_STATISTICS} qui est l'url qui mène aux statistiques du forum.
    {L_TODAY_ACTIVE}Est écrit "Sujets actifs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien qui mène aux sujets actifs du jour.
    {L_TODAY_POSTERS}Est écrit "Top 20 des posteurs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien qui mène au top 20 des posteurs du jour.
    {L_OVERALL_POSTERS}Est écrit "Top 20 des posteurs du forum". Dans le lien qui le contient, vous trouverez {U_OVERALL_POSTERS} qui est l'urorul du lien qui mène au top 20 des posteurs du forum.
    {L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
    {L_ONLINE_IMG}Url de l'image du Qeel
    {TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
    {LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
    {L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures. Est écrit "Membres connectés au cours des XX dernières heures : NOM".
    {LEGEND}Est écrit "Légende"
    {GROUP_LEGEND}Légende des groupes visibles
    {L_BIRTHDAY}Est écrit "Anniversaires".
    {L_BIRTHDAY_IMG}Url de l'image des anniversaires.
    {L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
    {L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
    {L_CALENDAR_5DAYS}Est écrit "Evènements à venir dans le calendrier pour les 5 prochains jours".
    {L_CALENDAR_IMG}Url de l'image du calendrier des 5 prochains jours.
    {CALENDAR_EVENTS_5DAYS}Évènements des 5 prochains jours.
    {TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
    {TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
    {NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
    {RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
    {CHATBOX_NAME}Est écrit "Chatbox".
    {CHATBOX_IMG}Url de l'image de la chatbox.
    {TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
    {CHATTERS_LIST}Liste des membres sur la ChatBox
    {CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
    {L_NEW_POSTS}Fait partie de la légende des statuts de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
    {L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
    {L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"
    {AUTO_DST}Variable qui, après vérification, ne sert strictement à rien. Joyeux, non?



    3.2 Le message de l'administrateur (PA)


    La première chose que l'on voit en arrivant dans le template, c'est {JAVASCRIPT}. On n'y touche pas, cela correspond à la majorité du javascript qui fait fonctionner ce template!

    Puis, juste avant le message de l'administrateur, on a un lien pour l'index du forum aux lignes 2 à 5 :
    Code:
    <ul id="navstrip" class="clearfix" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
       <li class="begin"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></li>
       {NAV_CAT_DESC}
    </ul>

    2 - Début de la liste < ul > de l'index.

    3 - Début de la première ligne de l'index qui ne contient que l'index, soit la variable {U_INDEX} qui est le lien qui mène vers l'index et la variable {L_INDEX} qui est le nom de l'index (le nom du forum dans ce cas).

    4 - La variable {NAV_CAT_DESC} correspond à la description de l'index. Cela n'apparaît normalement jamais, ce qui me pousse à dire que c'est le vestige d'un ancien update qui n'est plus utilisé.

    5 - On ferme la liste.




    Voilà enfin le message de l'administrateur (entre les lignes 7 à 18) qui ressemble à ceci :
    Code:
    <!-- BEGIN message_admin_index -->
       <div class="newslink">
       <p class="date">{LAST_VISIT_DATE}</p>
       <!-- BEGIN message_admin_titre -->
          <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
       <!-- END message_admin_titre -->

       <!-- BEGIN message_admin_txt -->
          <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
       <!-- END message_admin_txt -->
       </div>
    <!-- END message_admin_index -->

    7 - Au tout début, nous avons «!-- BEGIN message_admin_index --» qui indique que c'est le début du message d'administrateur (PA).

    8 - Nous avons une div avec la class "newslink". Pour tous ceux qui n'aiment pas le fond de leur message d'administrateur, c'est là que vous pourrez agir en changeant le nom des classes pour une class que vous aurez personnalisée ou même enlever carrément la classe.

    9 - Nous avons la variable {LAST_VISIT_DATE} à l'intérieur de balises p qui correspond à votre dernière visite sur le forum.

    10 - Nous avons ensuite le «!-- BEGIN message_admin_titre --» qui indique le début du titre de votre message d'administrateur.

    11 - Le titre de votre message d'administrateur correspond à cette variable {message_admin_index.message_admin_titre.MES_TITRE}. Encore une fois, vous pouvez modifier la class "h3" du span qui l'entoure pour personnaliser ce titre.

    12 - Le «!-- END message_admin_titre --» indique la fin du titre de votre message d'administrateur.

    14 - Deux lignes après, le «!-- BEGIN message_admin_txt --» indique le début du contenu de votre message d'administrateur.

    15 - Vous avez ensuite le contenu de votre message d'administrateur qui correspond à cette variable {message_admin_index.message_admin_txt.MES_TXT} à l'intérieur d'un paragraphe (p).

    16 - Puis, le «!-- BEGIN message_admin_txt --» indique la fin du contenu de votre message d'administrateur.

    17 - Fermeture de notre div du message d'administration.

    18 - Le «!-- END message_admin_index --» indique que la fin du message d'administrateur.

    Voilà ~


    Pour ceux qui veulent un récapitulatif des variables :
    {JAVASCRIPT}Contient la majorité du javascript du template.
    {L_INDEX}Il s'agit du nom du forum juste en haut à gauche du message d'accueil.
    {U_INDEX}C'est l'url du lien qui contient le {L_INDEX}. Cela nous ramène à la page d'accueil du forum.
    {LAST_VISIT_DATE}Ta dernière visite sur le forum
    {message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
    {message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)



    3.3 Connexion rapide


    Ensuite, nous avons la connexion rapide. Dans les options de notre forum, nous pouvons décider de ne pas l'afficher du tout, de l'afficher en haut de la page d'accueil ou en bas de la page d'accueil. Du coup, on le retrouve à deux endroits dans le template.

    Entre les lignes 20 à 42, il y a la connexion rapide du haut. De la ligne 175 à la ligne 195, ce sera la connexion rapide du bas. Histoire de ne pas se répéter deux fois, je vais expliquer seulement la connexion rapide du haut.

    Bref, entre les lignes 20 à 42, le code de la connexion rapide ressemble à ceci :
    Code:
    <!-- BEGIN switch_user_login_form_header -->
    <div class="borderwrap module">
       <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
          <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
             <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label>  
             <label><span class="genmed">{L_PASSWORD}:</span> <input class="" type="password" size="10" name="password"/></label>  
             <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>  
             {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
               
                <!-- BEGIN switch_social_login -->
                <div class="mt10">
                    <div class="social_btn">
                        <!-- BEGIN fb_connect -->
                        <div class="fb-login-button"></div>
                        <!-- END fb_connect -->
                    </div>
                </div>
                <!-- END switch_social_login -->
          </div>
       </form>
    </div>
     <br />
    <!-- END switch_user_login_form_header -->

    20 - Au tout début, nous avons le «!-- BEGIN switch_user_login_form_header --» qui indique le début de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- BEGIN switch_user_login_form_footer --».

    21 - Puis, nous avons une div avec les classes "borderwrap"et "module" que vous pouvez personnaliser dans votre CSS si vous le souhaitez.

    22 - Nous avons alors le début du formulaire de connexion rapide < form >. Je vous conseille de le laisser comme tel si vous voulez que cela continue de fonctionner comme il faut.

    23 - Nous avons alors une div qui sert à centrer et mettre un espace autour du contenu de la connexion rapide.

    24 - Le < label > indique une zone d'entrée de données, la variable {L_USERNAME} écrit "Nom d'utilisateur : " et la case < input > est la case où nous pouvons inscrire notre nom d'utilisateur.

    25 - Le < label > indique une zone d'entrée de données, la variable {L_PASSWORD} écrit "Mot de passe : " et la case < input > est la case où nous pouvons inscrire mot de passe.

    26 - Le < label > indique une zone d'entrée de données, la variable {L_AUTO_LOGIN} écrit "Connexion automatique : " et la case < input > est la case que nous pouvons cocher pour nous connecter automatiquement.

    27 - Nous commençons par la variable {S_HIDDEN_FIELDS} qui sont les champs secrets utilisés pour la connexion et qui ne doivent pas être modifiés, puis le bouton < input > "Connexion" qui nous permet de nous connecter au forum. Je vous conseille de ne pas essayer de modifier cette ligne.

    29 - Le «!-- BEGIN switch_fb_connect --» correspond au début de ce qui apparaît si la fonction Facebook Connect est activée.

    30 à 36 - C'est le bouton de connexion Facebook, on n'y touche pas.

    37 - Le «!-- END switch_fb_connect --» correspond à la fin de ce qui apparaît si la fonction Facebook Connect est activée.

    38 - On ferme la div qui centrait le texte.

    39 - On ferme le formulaire < /form >.

    40 - On ferme la div de cette section.

    41 - Un simple saut de ligne.

    42 - Le «!-- END switch_user_login_form_header --» indique la fin de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- END switch_user_login_form_footer --».

    Voilà !

    Pour ceux qui veulent un récapitulatif des variables :
    {L_USERNAME}Est écrit "Nom d'utilisateur"
    {L_PASSWORD}Est écrit "Mot de passe"
    {L_AUTO_LOGIN}Est écrit "Connexion automatique"
    {S_HIDDEN_FIELDS}Ce sont des champs secrets utilisés pour la connexion rapide, pas touche ~



    3.4 Qeel


    Directement à la suite de la connexion rapide du haut, nous avons deux petites variables aux lignes 44 et 46 qui sont extrêmement importantes. Du moins, la deuxième l'est! Voici à quoi cela ressemble :
    Code:
    {CHATBOX_TOP}
    {BOARD_INDEX}

    44 - La variable {CHATBOX_TOP} est la chatbox qui apparaît si on a choisi de l'afficher en haut.

    46- La variable {BOARD_INDEX} est le coeur de notre forum. Cela contient les catégories/forums et la liste des sujets. Bref, il ne faut surtout pas l'enlever!

    Dans PhpBB2, il y avait ensuite les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc. Tout comme sur PhpBB3, ces liens sont inclus dans le {BOARD_INDEX} et sont modifiables à partir d'un autre template sur Invision.




    Maintenant qu'on a passé ces petits détails, allons à la partie qui vous intéresse probablement le plus, à savoir le Qeel.

    Vous le trouverez entre les lignes 48 et 159. Cela devrait ressembler à cela :
    Code:
    <!-- BEGIN disable_viewonline -->
    <div id="fo_stat" class="borderwrap">
       <div class="maintitle floated">
          <h3>{L_STATISTICS}</h3>
          <div class="contract" id="bs0" onclick="toggleCategory('s0');">
                
          </div>
       </div>

       <table cellpadding="0" cellspacing="0" class="ipbtable">
          <thead>
             <tr>
                <th colspan="2">
                   <div class="linklist clearfix statlinks">
                      <ul>
                         <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                         <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                         <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
                      </ul>
                   </div>
                </th>
             </tr>
          </thead>
          <tfoot>
             <tr><td colspan="2"></td></tr>
          </tfoot>
          <tbody id="s0">
             <tr>
                <th colspan="2" class="formsubtitle">
                <!-- BEGIN switch_viewonline_link -->
                <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
                <!-- END switch_viewonline_link -->
                <!-- BEGIN switch_viewonline_nolink -->
                {L_WHO_IS_ONLINE}
                <!-- END switch_viewonline_nolink -->
                </th>
             </tr>
             <tr>
                <td class="row1" width="1%"><a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" /></a></td>
                <td class="row2">
                   <div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
                   <div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
                   <div>{LEGEND} : {GROUP_LEGEND}</div>
                </td>
             </tr>
             <!-- BEGIN switch_birthday -->
             <tr>
                <th colspan="2" class="formsubtitle">{L_BIRTHDAY}</th>
             </tr>
             <tr>
                <td class="row1" width="1%"><img src="{L_BIRTHDAY_IMG}" alt="{L_BIRTHDAY}" /></td>
                <td class="row2">
                   <p>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
                </td>
             </tr>
             <!-- END switch_birthday -->
             <!-- BEGIN switch_calendar_5days -->
             <tr>
                <th colspan="2" class="formsubtitle">{L_CALENDAR_5DAYS}</th>
             </tr>
             <tr>
                <td class="row1" width="1%"><img src="{L_CALENDAR_IMG}" alt="{L_CALENDAR}" /></td>
                <td class="row2">
                   {CALENDAR_EVENTS_5DAYS}
                </td>
             </tr>
             <!-- END switch_calendar_5days -->
             <tr>
                <th colspan="2" class="formsubtitle">

                <!-- BEGIN switch_statistics_link -->
                <a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a>
                <!-- END switch_statistics_link -->

                <!-- BEGIN switch_statistics_nolink -->
                {L_STATISTICS}
                <!-- END switch_statistics_nolink -->
                </th>
             </tr>
             <tr>
                <td class="row1"><img src="{L_STATISTICS_IMG}" alt="{L_STATISTICS}" /></td>
                <td class="row2">
                   <p>{TOTAL_POSTS}</p>
                   <p>{TOTAL_USERS}</p>
                   <p>{NEWEST_USER}</p>
                   <p>{RECORD_USERS}</p>
                </td>
             </tr>
             <!-- BEGIN switch_chatbox_activate -->
             <tr>
                <th colspan="2" class="formsubtitle">{CHATBOX_NAME}</th>
             </tr>
             <tr>
                <td class="row1"><img src="{CHATBOX_IMG}" alt="{CHATBOX_NAME}" /></td>
                <td class="row2">
                   <p>{TOTAL_CHATTERS_ONLINE}</p>
                   <p>{CHATTERS_LIST}</p>
                   <!-- BEGIN switch_chatbox_popup -->
                   <div id="chatbox_popup"></div>
                   <script type="text/javascript">
                   insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                   </script>
                   <!-- END switch_chatbox_popup -->
                </td>
             </tr>
             <!-- END switch_chatbox_activate -->
          </tbody>
       </table>

    </div>

    <!-- END disable_viewonline -->

    48 - Au tout début, le «!-- BEGIN disable_viewonline --» nous indique le début du qeel. Si nous désactivons les statistiques, tout ce que sera dans cette section n'apparaîtra pas.

    49 - Il s'agit de la div qui englobe tout le qeel.

    50 - Une autre div avec les classes "maintitle" et "floated" qui fait flotter le titre à gauche et qui met en forme la barre de titre.

    51 - La variable {L_STATISTICS} qui contient le texte "Statistiques".
    Si vous voulez modifier la mise en forme du "Statistiques", vous pouvez enlever le < h3 > qui l'entoure et le changer par une div ou un span

    52 à 54 - Une div avec la class "contract" et une action en javascript. Il s'agit du petit "-" à droite de la barre de titre qui permet de fermer les statistiques et de les rouvrir. Ce qui est intéressant, c'est que le navigateur se souvient de notre décision. Si on rafraîchit la page, cela restera fermé ou ouvert comme on l'avait mis.

    55 - Fermeture de la div de la barre de titre.


    57 - Début du tableau du contenu du qeel dont vous pouvez personnaliser la class "ipbtable".

    58 - Le < thead > sert à indiquer que c'est la tête du tableau.

    59 - Le < tr > commence la première ligne (la ligne des sujets actifs du jour et des top 20).

    60 - Première cellule (ils utilisent "th" à la place de "td" pour un effet visuel différent).

    61 - La div qui contient le contenu de la première cellule.

    62 - Début de la liste horizontale des liens "sujets actifs du jour" et les "top 20 des posteurs".

    63 - Premier point de la liste. Cela contient la variable {L_TODAY_ACTIVE} où il est écrit "Sujets actifs du jour". Dans le lien qui contient cette variable, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien pour accéder aux sujets actifs du jour.

    64 - Deuxième point de la liste. Cela contient la variable {L_TODAY_POSTERS} où il est écrit "Top 20 des posteurs du jour". Dans le lien qui contient cette variable, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien pour accéder au top 20 des posteurs du jour.

    65 - Troisième point de la liste. Cela contient la variable {L_OVERALL_POSTERS} où il est écrit "Top 20 des posteurs du forum". Dans le lien qui contient cette variable, vous trouverez {U_OVERALL_POSTERS} qui est l'url du lien pour accéder au top 20 des posteurs du forum.

    66 à 70 - On ferme la liste, la div qui l'entoure, la cellule, la ligne du tableau et le thead.


    71 - à 73 - Si le < thead > est supposé corresponde à la tête, alors le < tfoot > est l'équivalent du pied. Il s'agit de la barre grise tout en bas du tableau.


    74 - L'id "s0" du < tbody > indique que tout ce qu'il y a à l'intérieur qui se cache qui on ferme le qeel.

    75 - Début de la deuxième ligne du tableau (la ligne "qui est en ligne").

    76 - Début de la première cellule de la première ligne (en th avec classe "forumsubtitle" pour mettre la mise en forme des sous-titres).

    77 - Le «!-- BEGIN switch_viewonline_link --» nous indique le début de la zone du titre du qeel sous forme de lien.

    78 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?" et qui est à l'intérieur du lien dont l'url est la variable {U_VIEWONLINE} qui vous permet d'accéder à la localisation des IP des membres.

    79 - Le «!-- END switch_viewonline_link --» nous indique la fin de la zone du titre du qeel sous forme de lien.

    80 - Le «!-- BEGIN switch_viewonline_nolink --» nous indique le début de la zone du titre du qeel sous forme de texte.

    81 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?".

    82 - Le «!-- END switch_viewonline_nolink --» nous indique la fin de la zone du titre du qeel sous forme de texte.

    83 - Fermeture de cette cellule.

    84 - Fermeture de la deuxième ligne du tableau.


    85 - Ouverture de la troisième ligne du tableau (la ligne du contenu du qui est en ligne).

    86 - Première cellule de la troisième ligne avec la classe "row1". À l'intérieur, il y a l'image du qeel. La variable {L_WHO_IS_ONLINE} correspond à l'url de l'image du qeel. Cette image est à l'intérieur du lien dont l'url est la variable {U_VIEWONLINE} qui vous permet d'accéder à la localisation des IP des membres. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.

    87 - Deuxième cellule de la troisième ligne avec la classe "row2".

    88 - Il y a l'ouverture de deux div qui contiennent la variable TOTAL_USERS_ONLINE}, soit la phrase "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité" qui correspond au nombre d'utilisateurs présents sur le site, dont les inscrits, les inscrits invisibles et les non-inscrits.
    Je n'ai pas trouvé l'utilité du lien avec la variable {L_VIEW_COMPLETE_LIST}. Elle ne fait rien apparaître et vous pouvez l'enlever sans que cela n'affecte le reste.

    89 - Une div qui contient {LOGGED_IN_USER_LIST}, soit la phrase "Utilisateurs enregistrés : NOM" qui correspond aux utilisateurs inscrits connectés en ce moment sur le forum.
    NOTE : Il y a un saut de ligne automatique inclus à la fin de cette variable.
    Puis, il y a la variable {L_CONNECTED_MEMBERS}, soit la phrase "Membres connectés au cours des XX dernières heures : NOM" qui correspond aux utilisateurs inscrits connectés au cours des dernières heures sur le forum.

    90 - Une div contient la variable {LEGEND}, soit le mot "Légende" et la variable {GROUP_LEGEND} qui correspond aux groupes visibles.

    91 - On ferme cette cellule.

    92 - On ferme la troisième ligne.


    93 - Le «!-- BEGIN switch_birthday --» indique que la suite ne s'affiche que si les anniversaires sont activés (automatiquement, c'est oui).

    94 - Ouverture de la quatrième ligne (la ligne du Anniversaires).

    95 - Début de la première cellule de la sixième ligne (en th avec classe "forumsubtitle" pour mettre la mise en forme des sous-titres). Cela contient la variable {L_BIRTHDAY} qui contient le texte "Anniversaires".

    96 - Fermeture de la quatrième ligne.

    97 - Ouverture de la cinquième ligne (ligne du contenu des anniversaires).

    98 - Première cellule de la cinquième ligne avec la classe "row1". À l'intérieur, il y a l'image des anniversaires.. La variable {L_BIRTHDAY_IMG} correspond à l'url de l'image des anniversaires. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.

    99 - Deuxième cellule de la cinquième ligne avec la classe "row2".

    100 - La variable {L_WHOSBIRTHDAY_TODAY}, soit la phrase "Aucun membre ne fête son anniversaire aujourd'hui" ou "Membres fêtant leur anniversaire aujourd'hui : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire aujourd'hui.
    NOTE : Il y a un saut de ligne automatique inclus à la fin de chacune de cette variable.
    Puis, la variable {L_WHOSBIRTHDAY_WEEK}, soit la phrase "Aucun membre ne fête son anniversaire au cours des 7 prochains jours" ou "Membres fêtant leur anniversaire au cours des 7 prochains jours : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire au cours des 7 prochains jours.

    101 - Fermeture de la deuxième cellule de la cinquième ligne.

    102 - Fermeture de la cinquième ligne.

    103 - Le «!-- END switch_birthday --» indique que la fin de la zone qui ne s'affiche que si les anniversaires sont activés.


    104 - Le «!-- BEGIN switch_calendar_5days --» indique que la suite ne s'affiche que si le calendrier est activé.

    105 - Ouverture de la sixième ligne (la ligne du calendrier).

    106 - Début de la première cellule de la sixième (en th avec classe "forumsubtitle" pour mettre la mise en forme des sous-titres). Cela contient la variable {L_CALENDAR_5DAYS} qui contient le texte "Evènements à venir dans le calendrier pour les 5 prochains jours".

    107 - Fermeture de la sixième ligne.

    108 - Ouverture de la septième ligne (ligne du contenu du calendrier).

    109 - Première cellule de la cinquième ligne avec la classe "row1". À l'intérieur, il y a l'image du calendrier. La variable {L_CALENDAR_IMG} correspond à l'url de l'image du calendrier. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.

    110 - Deuxième cellule de la septième ligne avec la classe "row2".

    111 - La variable {CALENDAR_EVENTS_5DAYS} correspond aux évènements des 5 prochains jours.

    112 - Fermeture de la deuxième cellule de la septième ligne.

    113 - Fermeture de la septième ligne.

    114 - Le «!-- END switch_calendar_5days --» indique que la fin de la zone qui ne s'affiche que si le calendrier est activé.


    115 - Ouverture de la huitième ligne (la ligne des statistiques).

    116 - Début de la première cellule de la huitième (en th avec classe "forumsubtitle" pour mettre la mise en forme des sous-titres).

    118 - Le «!-- BEGIN switch_statistics_link --» nous indique le début de la zone du titre des statistiques du qeel sous forme de lien.

    119 - La variable {L_STATISTICS} qui contient le texte "Statistiques" et qui est à l'intérieur du lien dont l'url est la variable {U_STATISTICS} qui vous permet d'accéder aux statistiques du forum.

    120 -Le «!-- END switch_statistics_link --» nous indique la fin de la zone du titre des statistiques sous forme de lien.

    122 -Le «!-- BEGIN switch_statistics_nolink --» nous indique le début de la zone du titre des statistiques du qeel sous forme de texte.

    123 - La variable {L_STATISTICS} qui contient le texte "Statistiques".

    124 - Le «!-- END switch_statistics_nolink --» nous indique la fin de la zone du titre des statistiques sous forme de texte.

    125 - Fermeture de la cellule.

    126 - Fermeture de la huitième ligne.

    127 - Ouverture de la neuvième ligne (ligne du contenu des statistiques).

    128 - Première cellule de la neuvième ligne avec la classe "row1". À l'intérieur, il y a l'image des statistiques. La variable {L_STATISTICS_IMG} correspond à l'url de l'image des statistiques. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.

    129 - Ouverture de la deuxième cellule de la neuvième ligne avec la class "row2".

    130 - La variable {TOTAL_POSTS}, soit la phrase "Nous avons X membre enregistré" qui correspond au nombre d'utilisateurs inscrits sur le forum. C'est encadré d'une balise de paragraphe.

    131 - La variable {TOTAL_USERS}, soit la phrase "Nous avons X membre enregistré" qui correspond au nombre d'utilisateurs inscrits sur le forum.. C'est encadré d'une balise de paragraphe.

    132 - La variable {NEWEST_USER}, soit la phrase "L'utilisateur enregistré le plus récent est NOM" qui correspond à l'utilisateur inscrit le plus récent. C'est encadré d'une balise de paragraphe.

    133 - La variable {RECORD_USERS}, soit la phrase "Le record du nombre d'utilisateurs en ligne est de X le JOUR_DE_LA_SEMAINE JOUR MOIS ANNÉE - HH:MM" qui correspond au record du nombre d'utilisateurs présents sur le site en même temps. C'est encadré d'une balise de paragraphe.

    134 - Fermeture de la cellule.

    135 - Fermeture de la neuvième ligne.


    136 - Le «!-- BEGIN switch_chatbox_activate --» indique le début de la zone des statistiques qui n'apparaissent que si la CB est activée.

    137 - Ouverture de la dixième ligne (la ligne de la chatbox).

    138 - Début de la première cellule de la dixième (en th avec classe "forumsubtitle" pour mettre la mise en forme des sous-titres). Cela contient la variable {CHATBOX_NAME} qui contient le texte "Chatbox".

    139 - Fermeture de la dixième ligne.

    140 - Ouverture de la onzième ligne (ligne du contenu de la chatbox).

    141 - Première cellule de la onzième ligne avec la classe "row1". À l'intérieur, il y a l'image de la chatbox. La variable {CHATBOX_IMG} correspond à l'url de l'image de la chatbox. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.

    142 - Deuxième cellule de la onzième ligne avec la classe "row2".

    143 - La variable {TOTAL_CHATTERS_ONLINE}, soit la phrase "Il y a actuellement X utilisateur(s) sur la ChatBox" qui correspond au nombre d'utilisateurs connectés sur la CB. C'est encadré d'une balise de paragraphe.

    144 - La variable {CHATTERS_LIST} qui correspond aux pseudos des membres connectés sur la CB. C'est encadré d'une balise de paragraphe.

    145 - Le «!-- BEGIN switch_chatbox_popup --» indique le début du lien pour rejoindre la CB.

    146 à 149 - Script contenant le lien utilisé pour rejoindre la CB (Le [Rejoindre le Chat])

    150 - Le «!-- END switch_chatbox_popup --» indique la fin du lien pour rejoindre la CB.

    151 - Fermeture de la cellule.

    152 - Fermeture de la onzième ligne.

    153 - Le «!-- END switch_chatbox_activate --» indique la fin de la zone des statistiques qui n'apparaissent que si la CB est activée.


    154 - Fermeture du < /tbody > qui englobait la section "fermable" du qeel (qui est en ligne, anniversaires, calendrier, statistiques, chatbox).

    155 - Fermeture du tableau du qeel.
    157 - Fermeture de la div du qeel.

    159 - Le «!-- END disable_viewonline --» indique la fin du qeel.

    Voilà!


    Pour ceux qui veulent un récapitulatif des variables :
    {CHATBOX_TOP}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en haut".
    {BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
    {L_STATISTICS}Est écrit "Statistiques". Lorsqu'il est dans un lien, vous trouverez {U_STATISTICS} qui est l'url qui mène aux statistiques du forum.
    {L_TODAY_ACTIVE}Est écrit "Sujets actifs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien qui mène aux sujets actifs du jour.
    {L_TODAY_POSTERS}Est écrit "Top 20 des posteurs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien qui mène au top 20 des posteurs du jour.
    {L_OVERALL_POSTERS}Est écrit "Top 20 des posteurs du forum". Dans le lien qui le contient, vous trouverez {U_OVERALL_POSTERS} qui est l'urorul du lien qui mène au top 20 des posteurs du forum.
    {L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
    {L_ONLINE_IMG}Url de l'image du Qeel
    {TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
    {LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
    {L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures. Est écrit "Membres connectés au cours des XX dernières heures : NOM".
    {LEGEND}Est écrit "Légende"
    {GROUP_LEGEND}Légende des groupes visibles
    {L_BIRTHDAY}Est écrit "Anniversaires".
    {L_BIRTHDAY_IMG}Url de l'image des anniversaires.
    {L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
    {L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
    {L_CALENDAR_5DAYS}Est écrit "Evènements à venir dans le calendrier pour les 5 prochains jours".
    {L_CALENDAR_IMG}Url de l'image du calendrier des 5 prochains jours.
    {CALENDAR_EVENTS_5DAYS}Évènements des 5 prochains jours.
    {TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
    {TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
    {NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
    {RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
    {CHATBOX_NAME}Est écrit "Chatbox".
    {CHATBOX_IMG}Url de l'image de la chatbox.
    {TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
    {CHATTERS_LIST}Liste des membres sur la ChatBox



    3.5 La fin du template (légende des statuts de forum, etc...)


    Suite au qeel, nous avons le reste du template, dont la légende des statuts de forum, la chat-box du bas, etc...

    Nous avons une petite variable intéressante à la ligne 161, à savoir la variable {CHATBOX_BOTTOM} est la chatbox qui apparaît si on a choisi de l'afficher en bas.

    Puis, on a la légende des statuts de forum entre les lignes 163 à 172:
    Code:
    <!-- BEGIN switch_legend -->
    <br />
    <div class="activeusers clearfix">
        <ul class="ul-icons-home">
            <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}</li>
            <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}</li>
            <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}</li>
        </ul>
    </div>
    <!-- END switch_legend -->

    163 - Le «!-- BEGIN switch_legend --» indique le début de la légende des statuts de forums (New/Old/Lock ou "Nouveau/Anciens/Verrouillé).

    164 - Simple saut de ligne.

    165 - La div qui va englober la légende.

    166 - Début de la liste < ul > horizontale de cette légende.

    167 - Première section de cette liste < li > qui contient l'image de l'image New/Nouveau. La variable {FORUM_NEW_IMG} correspond à l'url de cette image.
    Puis, on a la variable {L_NEW_POSTS} qui correspond à la phrase "Nouveaux messages".

    168 - Deuxième section de cette liste < li > contient l'image de l'image Old/Ancien. La variable {FORUM_IMG} correspond à l'url de cette image.
    Puis, on a la variable {L_NO_NEW_POSTS} qui correspond à la phrase "Pas de nouveaux messages".

    169 - Troisième section de cette liste < li > qui contient l'image de l'image Lock/Verrouillé. La variable {FORUM_LOCKED_IMG} correspond à l'url de cette image.
    Puis, on a la variable {L_FORUM_LOCKED} qui correspond à la phrase "Forum Verrouillé".

    170 - Fin de la liste.

    171 - Fin de la div qui englobe le tout.

    172 - Le «!-- END switch_legend --» indique la fin de la légende.


    Entre les lignes 175 à 195, nous avons la connexion rapide du bas qu'on ne va pas répéter puisqu'elle est identique à celle du haut.

    À la ligne 197, vous avez la variable {AUTO_DST} qui, après vérifications, ne sert actuellement à rien Par précautionau cas où FA déciderait d'en faire quelque chose, ne l'enlevez pas ^^

    Voilà ~


    Pour ceux qui veulent un récapitulatif des variables :
    {CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
    {L_NEW_POSTS}Fait partie de la légende des statuts de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
    {L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
    {L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"
    {AUTO_DST}Variable qui, après vérification, ne sert strictement à rien. Joyeux, non?



    3.6 Modifier les phrases des variables de FA


    Nous avons vu comment se rendre au template, les variables qui y sont utilisées et une visite en profondeur du template. Nous avons aussi vu que beaucoup de variables contiennent un texte déjà pré-programmé.
    Mais comment garder les fonctionnalités d'une variable tout en changeant son texte? Eh bien, c'est ce qu'on va voir ^^

    Tous les exemples seront faits avec la variable {NEWEST_USER} dont le texte est "L'utilisateur enregistré le plus récent est NOM" et qui devient, grâce à un javascript, "La nouvelle recrue est NOM"

    Premièrement, nous devons avoir un moyen de sélectionner notre variable. Donc nous nous rendrons dans le template et nous entourerons notre variable d'un "span" ou d'une "div" à laquelle nous donnerons un "id" afin de l'identifier.

    Exemple :
    Code:
    <span id="newuser">{NEWEST_USER}</span>

    Ensuite, nous allons ajouter un petit javascript dans notre template. Ce javascript est séparé en deux parties :
    1. Il repère le contenu du span/div qui contient l'id indiqué.
    2. Il remplace un certain texte par un nouveau texte.

    Le voici :
    Code:
    <script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");</script>

    À deux endroit dans le script, on voit ceci :
    document.getElementById('newuser')
    Il faut s'assurer de mettre l'id que nous avons mis à notre variable dans les parenthèses et entre les ' '.

    Vers la fin, nous avons :
    replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");
    Il faut mettre le texte à remplacer dans les parenthèses, entre les / /.
    Il faut mettre le nouveau texte dans les parenthèses, entre les " ".

    Voilà, vous savez comment modifier le texte de vos variables! À savoir que vous devez faire attention lorsqu'il y a des phrases au pluriel et au singulier afin de mettre un javascript pour chacune des options possibles.


    Dernière édition par Onyx le Sam 25 Mar 2017 - 3:02, édité 11 fois



    avatar
    Onyx
    FémininAge : 23Messages : 2945

    le Ven 3 Oct 2014 - 3:46

    Pas terminé, ne regardez pas è_é

    Pas fini, ne pas s'y fier:

    4. Le template index_body avec PunBB
    [EN COURS, la majorité est un copié/collé des posts d'avant, ne pas s'y fier pour le moment plz.]


    Note à moi-même : Le tableau est ok, le reste est Invision, c'est encore tout à faire

    En aperçu, ce template ressemble à ça : X
    À savoir qu'il y a les catégories qui sont normalement entre X et X.

    En ordre, nous allons voir :
    • 4.1 Les variables de FA
    • 4.2 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies" et compagnie ainsi que le login.
    • 4.3 Le message de l'administrateur (PA)
    • 4.4 Connexion rapide
    • 4.5 Qeel
    • 4.6 La fin du template (légende des statuts de forum, etc...)
    • 4.7 Modifier les phrases des variables de FA

    Je dirais que cette version ressemble plus à PhpBB3. Il y a beaucoup d'utilisations de div et un peu de p. Les fameuses classes "forumline" pour PhpBB2, "pannel" pour PhpBB3 et "borderwrap" pour Invision correspondent à la classe "main" sur PunBB.

    Comment se rendre dans le template :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > INDEX_BODY



    4.1 Variables de FA


    Il y a certaines variables de ForumActif qui contiennent des éléments déjà programmées par FA et qu'on ne peut pas mettre manuellement. Elles sont encadrées par des { } comme ceci : {VARIABLE_FA}

    Cela ne vous dit toujours rien? Eh bien vous savez la liste des connectés au cours des 24/48/72 dernières heures? Eh bien c'est la variable {L_CONNECTED_MEMBERS}. Si cela n'était pas déjà programmé par FA sous cette forme, nous aurions un truc long comme le bras qu'on aurait peur de toucher au cas ou cela exploserait. À la place, on peut prendre la variable, la déplacer, l'encadrer ou lui mettre une mise en forme sans que cela ne nuise à son fonctionnement.

    Voici la liste de la majorité des variables du template. À la fin de chaque section du tutoriel, il y aura un petit résumé des variables qu'on trouve dans ladite section pour vous permettre de mieux vous repérer ^^

    VariableSignification
    {JAVASCRIPT}Contient la majorité du javascript du template.
    {L_SEARCH_NEW}Est écrit "Voir les nouveaux messages depuis votre dernière visite". Dans le lien qui le contient, vous trouverez {U_SEARCH_NEW} qui est l'url du lien pour voir les nouveaux messages non-lus.
    {L_SEARCH_SELF}Est écrit "Voir ses messages". Dans le lien qui le contient, vous trouverez {U_SEARCH_SELF} qui est l'url du lien voir ses propres messages.
    {L_SEARCH_UNANSWERED}Est écrit "Voir les messages sans réponses". Dans le lien qui le contient, vous trouverez {U_SEARCH_UNANSWERED} qui est l'url du lien pour trouver les messages qui n'ont pas de réponses.
    {L_MARK_FORUMS_READ}Est écrit "Marquez tous les forums comme lus". Dans le lien qui le contient, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.
    {LOGGED_AS}Est écrit "Connecté en tant que TON NOM".
    {LAST_VISIT_DATE}Votre dernière visite sur le forum
    {L_NOT_CONNECTED}À vérifier
    {L_NOT_CONNECTED}À vérifier
    {message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
    {message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)
    {L_USERNAME}Est écrit "Nom d'utilisateur"
    {L_AUTO_LOGIN}Est écrit "Connexion automatique"
    {L_PASSWORD}Est écrit "Mot de passe"
    {S_HIDDEN_FIELDS}Une variable cachée dont j'ignore l'utilité. Dans le doute, gardez-là ^^
    {switch_user_login_form_header.
    switch_fb_connect.L_FB_LOGIN_BUTTON}
    Pour ceux qui ont activé l'option "Facebook connect", il est écrit "OU"
    {switch_user_login_form_header.
    switch_fb_connect.L_OR}
    Pour ceux qui ont activé l'option "Facebook connect", il s'agit du bouton pour se connecter à l'aide de Facebook
    {CHATBOX_TOP}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en haut".
    {BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
    {TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
    {TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
    {NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
    {L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
    {TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
    {RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
    {LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
    {L_ONLINE_USERS}Est écrit "Membres connectés au cours des XX dernières heures : "
    {L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures.
    {L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
    {L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
    {LEGEND}Est écrit "Légende"
    {GROUP_LEGEND}Légende des groupes visibles
    {TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
    {CHATTERS_LIST}Liste des membres sur la ChatBox
    {CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
    {L_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
    {L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
    {L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"



    2.2 Dernière visite/Date/Heure et Connexion rapide


    La première chose que l'on voit en arrivant dans le template, c'est {JAVASCRIPT}. On n'y touche pas, cela correspond à la majorité du javascript qui fait fonctionner ce template!

    Ensuite, on a la date de notre dernière visite ainsi que la date et l'heure du jour (entre les lignes 2 à 4) qui ressemble à ceci :
    Code:
    <!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
    <p>{CURRENT_TIME}</p>
    <br class="clear" />

    2 - Au tout début, le «!-- BEGIN switch_user_logged_in --» indique que ce qui apparaît ensuite n'est visible que si on est connecté en tant que membre.
    Le «p class="right rightside"» est une balise de paragraphe dont la class colle le contenu à droite.
    À l'intérieur, on a la variable {LAST_VISIT_DATE} qui montre la date et l'heure de votre dernière visite.
    Puis, la balise de paragraphe se ferme et le «!-- END switch_user_logged_in --» indique la fin de la zone visible seulement si on est connecté.

    3 - Le p est une balise normale de paragraphe. À l'intérieur, il y a la variable {CURRENT_TIME} qui montre la date et l'heure actuelles. Puis, la balise p est refermée.

    4 - C'est un saut de ligne dont la class "clear" met fin au "float" de certaines balises précédentes.


    Ensuite, nous avons la connexion rapide. Dans les options de notre forum, nous pouvons décider de ne pas l'afficher du tout, de l'afficher en haut de la page d'accueil ou en bas de la page d'accueil. Du coup, on le retrouve à deux endroits dans le template.

    Entre les lignes 6 à 23, il y a la connexion rapide du haut. De la ligne 103 à la ligne 120, ce sera la connexion rapide du bas. Histoire de ne pas se répéter deux fois, je vais expliquer seulement la connexion rapide du haut.

    Bref, entre les lignes 6 à 23, le code de la connexion rapide ressemble à ceci :
    Code:
    <!-- BEGIN switch_user_login_form_header -->
    <div class="panel">
     <div class="inner"><span class="corners-top"><span></span></span>
     <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
     <div class="user_login_form center">
     <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label> 
     <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label> 
     <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
     {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
     <!-- BEGIN switch_fb_connect -->
     <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
     <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
     <!-- END switch_fb_connect -->
     </div>
     </form>
     <span class="corners-bottom"><span></span></span></div>
    </div>
    <!-- END switch_user_login_form_header -->

    6 - Au tout début, nous avons le «!-- BEGIN switch_user_login_form_header --» qui indique le début de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- BEGIN switch_user_login_form_footer --».

    7 - Puis, nous avons une div avec la classe "panel" que vous pouvez personnaliser dans votre CSS si vous le souhaitez.

    8 - Nous avons alors une autre div avec la classe "inner" qui ne sert pas à grand chose. Le span avec la class "corners-top" qui suit sert à créer un effet arrondi sur le coin en haut à gauche. Quant au span à l'intérieur, il sert à créer l'effet arrondi sur le coin en haut de droite.

    9 - Nous avons alors le début du formulaire de connexion rapide < form >. Je vous conseille de le laisser comme tel si vous voulez que cela continue de fonctionner comme il faut.

    10 - Nous avons alors une div avec la classe "user_login_form" et "center" qui sert à centrer le contenu de la connexion rapide.

    11 - Le < label > indique une zone d'entrée de données, la variable {L_USERNAME} écrit "Nom d'utilisateur : " et la case < input > est la case où nous pouvons inscrire notre nom d'utilisateur.

    12 - Le < label > indique une zone d'entrée de données, la variable {L_PASSWORD} écrit "Mot de passe : " et la case < input > est la case où nous pouvons inscrire mot de passe.

    13 - Le < label > indique une zone d'entrée de données, la variable {L_AUTO_LOGIN} écrit "Connexion automatique : " et la case < input > est la case que nous pouvons cocher pour nous connecter automatiquement.

    14 - Nous commençons par la variable {S_HIDDEN_FIELDS} dont j'ignore l'utilité, puis le bouton < input > "Connexion" qui nous permet de nous connecter au forum. Je vous conseille de ne pas essayer de modifier cette ligne.

    15 - Le «!-- BEGIN switch_fb_connect --» correspond au début de ce qui apparaît si la fonction Facebook Connect est activée.

    16 - Nous avons la variable {switch_user_login_form_header.switch_fb_connect.L_OR} qui écrit simplement "ou" à l'intérieur d'un span qui met en forme ce "ou".

    17 - C'est le bouton de connexion Facebook, on n'y touche pas.

    18 - Le «!-- END switch_fb_connect --» correspond à la fin de ce qui apparaît si la fonction Facebook Connect est activée.

    19 - On ferme la div qui centrait le texte.

    20 - On ferme le formulaire < /form >.

    21 - Comme au début, on a les span qui servent à faire les coins, sauf que cette fois-ci, c'est les coins du bas.

    22 - On ferme la div de cette section.

    23 - Le «!-- END switch_user_login_form_header --» indique la fin de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- END switch_user_login_form_footer --».

    Voilà! C'est... nettement plus simple que la version PhpBB2 XD



    2.3 Le message de l'administrateur (PA)


    Suite au à la connexion rapide, on arrive dans le message de l'administrateur (entre les lignes 25 à 37) qui ressemble à ceci :
    Code:
    <!-- BEGIN message_admin_index -->
     <div class="panel introduction">
     <div class="inner"><span class="corners-top"><span></span></span>
     <!-- BEGIN message_admin_titre -->
     <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
     <!-- END message_admin_titre -->

     <!-- BEGIN message_admin_txt -->
     <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
     <!-- END message_admin_txt -->
     <span class="corners-bottom"><span></span></span></div>
     </div>
    <!-- END message_admin_index -->

    25 - Au tout début, nous avons «!-- BEGIN message_admin_index --» qui indique que c'est le début du message d'administrateur (PA).

    26 - Nous avons une div avec les classes "panel" et "introduction". Pour tout ceux qui n'aiment pas le fond de leur message d'administrateur, c'est là que vous pourrez agir en changeant le nom des classes pour une class que vous aurez personnalisée ou même enlever carrément les classes.

    27 - On a encore notre div "inner" qui est l'intérieur et dans laquelle il y a les span qui font les coins.

    28 - Nous avons ensuite le «!-- BEGIN message_admin_titre --» qui indique le début du titre de votre message d'administrateur.

    29 - Le titre de votre message d'administrateur correspond à cette variable {message_admin_index.message_admin_titre.MES_TITRE}. Encore une fois, vous pouvez modifier la class "h3" du span qui l'entoure pour personnaliser ce titre.

    30 - Le «!-- END message_admin_titre --» indique la fin du titre de votre message d'administrateur.

    32 - Deux lignes après, le «!-- BEGIN message_admin_txt --» indique le début du contenu de votre message d'administrateur.

    33 - Vous avez ensuite le contenu de votre message d'administrateur qui correspond à cette variable {message_admin_index.message_admin_txt.MES_TXT}. Vous pouvez modifier la class "mes-txt" de la div qui l'entoure pour personnaliser ce contenu.

    34 - Puis, le «!-- BEGIN message_admin_txt --» indique la fin du contenu de votre message d'administrateur.

    35 - On a nos habituels span qui font les coins et le texte et la fin de notre div "inner".

    36 - Fermeture de notre div du message d'administration.

    37 - Le «!-- END message_admin_index --» indique que la fin du message d'administrateur.

    Voilà ~



    2.4 Qeel


    Directement à la suite de la connexion rapide du haut, nous avons deux petites variables aux lignes 39 et 40 qui sont extrèmement importante. Du moins, la deuxième l'est! Voici à quoi cela ressemble :
    Code:
    {CHATBOX_TOP}
    {BOARD_INDEX}

    39 - La variable {CHATBOX_TOP} est la chatbox qui apparaît si on a choisit de l'afficher en haut.

    40- La variable {BOARD_INDEX} est le coeur de notre forum. Cela contient les catégories/forums et la liste des sujets. Bref, il ne faut surtout pas l'enlever!

    Dans PhpBB2, il y avait ensuite les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc. Ces liens sont inclus dans le {BOARD_INDEX} et sont modifiables à partir d'un autre template.


    Maintenant qu'on a passé ces petits détail, allons à la partie qui vous intéresse probablement le plus, à savoir le Qeel.

    Vous le trouverez entre les lignes 42 et 99. Cela devrait ressembler à cela :
    Code:
    <!-- BEGIN disable_viewonline -->

     <!-- BEGIN switch_viewonline_link -->
     <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
     <!-- END switch_viewonline_link -->

     <!-- BEGIN switch_viewonline_nolink -->
     <div class="h3">{L_WHO_IS_ONLINE}</div>
     <!-- END switch_viewonline_nolink -->

    <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
    <p>{TOTAL_USERS_ONLINE}<br />
    {RECORD_USERS}

    <br />
    {LOGGED_IN_USER_LIST}

    {L_ONLINE_USERS}
    {L_CONNECTED_MEMBERS}<br />
    {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

    <br />
    <em>{LEGEND} : {GROUP_LEGEND}</em>

    </p>
    <div class="clear"></div>

     <!-- BEGIN switch_statistics_link -->
     <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
     <!-- END switch_statistics_link -->

     <!-- BEGIN switch_statistics_nolink -->
     <div class="h3">{L_STATISTICS}</div>
     <!-- END switch_statistics_nolink -->

    <p class="page-bottom">
    {TOTAL_POSTS}
    </p>
    <p class="page-bottom">
    {TOTAL_USERS}
    </p>
    <p class="page-bottom">
    {NEWEST_USER}
    </p>
     <!-- BEGIN switch_chatbox_activate -->
     <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
     <div class="page-bottom">
     {TOTAL_CHATTERS_ONLINE} :&nbsp;
     {CHATTERS_LIST}<br />
     </div>
     <!-- BEGIN switch_chatbox_popup -->
     <div id="chatbox_popup"></div>
     <script type="text/javascript">
     insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
     </script>
     <!-- END switch_chatbox_popup -->
     <!-- END switch_chatbox_activate -->
    <!-- END disable_viewonline -->

    42 - Au tout début, le «!-- BEGIN disable_viewonline --» nous indique le début du qeel. Si nous désactivons les statistiques, tout ce que sera dans cette section n'apparaîtra pas.

    44  - Le «!-- BEGIN switch_viewonline_link --» nous indique le début de la zone du titre du qeel sous forme de lien.

    45 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?" et qui est à l'intérieur du lien dont l'url est la variable {U_VIEWONLINE} qui vous permet d'accéder à la localisation des IP des membres.
    Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    46 - Le «!-- END switch_viewonline_link --» nous indique la fin de la zone du titre du qeel sous forme de lien.

    48 - Le «!-- BEGIN switch_viewonline_nolink --» nous indique le début de la zone du titre du qeel sous forme de texte.

    49 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?".
    Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    50 - Le «!-- END switch_viewonline_nolink --» nous indique la fin de la zone du titre du qeel sous forme de texte.

    52 - Nous avons l'image du qeel. La variable {L_WHO_IS_ONLINE} correspond à l'url de l'image du qeel. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.

    53 - Il y a l'ouverture d'une balise de paragraphe < p > qui va contenir la majorité des statistiques.
    Puis, il y a la variable TOTAL_USERS_ONLINE}, soit la phrase "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité" qui correspond au nombre d'utilisateurs présents sur le site, dont les inscirts, les inscrits invisibles et les non-inscrits.
    Enfin, il y a un saut de ligne.

    54 - Voici la variable {RECORD_USERS}, soit la phrase "Le record du nombre d'utilisateurs en ligne est de X le JOUR_DE_LA_SEMAINE JOUR MOIS ANNÉE - HH:MM" qui correspond au record du nombre d'utilisateurs présents sur le site en même temps.
    NOTE : Il y a un saut de ligne automatique inclus à la fin de cette variable.

    56 - Un simple saut de ligne.

    57 - {LOGGED_IN_USER_LIST}, soit la phrase "Utilisateurs enregistrés : NOM" qui correspond aux utilisateurs inscrits connectés en ce moment sur le forum.

    59 - Nous avons la variable {L_ONLINE_USERS}, soit la phrase "Membres connectés au cours des XX dernières heures : ".
    NOTE : Il y a un saut de ligne automatique inclus à la fin de cette variable.

    60 - La variable {L_CONNECTED_MEMBERS} qui correspond aux utilisateurs inscrits connectés au cours des dernières heures sur le forum, puis un saut de ligne.

    61 - La variable {L_WHOSBIRTHDAY_TODAY}, soit la phrase "Aucun membre ne fête son anniversaire aujourd'hui" ou "Membres fêtant leur anniversaire aujourd'hui : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire aujourd'hui.
    Puis, la variable {L_WHOSBIRTHDAY_WEEK}, soit la phrase "Aucun membre ne fête son anniversaire au cours des 7 prochains jours" ou "Membres fêtant leur anniversaire au cours des 7 prochains jours : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire au cours des 7 prochains jours.
    NOTE : Il y a un saut de ligne automatique inclus à la fin de chacune de ces variables.

    63 - Un saut de ligne.

    64 - La variable {LEGEND}, soit le mot "Légende" et la variable {GROUP_LEGEND} qui correspond aux groupes visibles.

    66 - Fermeture de la balise < p > qui ferme cette section du qeel.

    67 - Une div qui sert à arrêter les float des balises précédentes s'il y en avait.

    69  - Le «!-- BEGIN switch_statistics_link --» nous indique le début de la zone du titre des statistiques du qeel sous forme de lien.

    70 - La variable {L_STATISTICS} qui contient le texte "Statistiques" et qui est à l'intérieur du lien dont l'url est la variable {U_STATISTICS} qui vous permet d'accéder aux statistiques du forum.
    Si vous voulez modifier la mise en forme du "Statistiques", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    71 - Le «!-- END switch_statistics_link --» nous indique la fin de la zone du titre des statistiques sous forme de lien.

    73 - Le «!-- BEGIN switch_statistics_nolink --» nous indique le début de la zone du titre des statistiques du qeel sous forme de texte.

    74 - La variable {L_STATISTICS} qui contient le texte "Statistiques".
    Si vous voulez modifier la mise en forme du "Statistiques", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    75 - Le «!-- END switch_statistics_nolink --» nous indique la fin de la zone du titre des statistiques sous forme de texte.

    77 à 79 - La variable {TOTAL_POSTS}, soit la phrase "Nous avons X membre enregistré" qui correspond au nombre d'utilisateurs inscrits sur le forum. C'est encadré d'une balise de paragraphe.

    80 à 82 - La variable {TOTAL_USERS}, soit la phrase "Nous avons X membre enregistré" qui correspond au nombre d'utilisateurs inscrits sur le forum.. C'est encadré d'une balise de paragraphe.

    83 à 85 - La variable {NEWEST_USER}, soit la phrase "L'utilisateur enregistré le plus récent est NOM" qui correspond à l'utilisateur inscrit le plus récent. C'est encadré d'une balise de paragraphe.

    86 - Le «!-- BEGIN switch_chatbox_activate --» indique le début de la zone des statistiques qui n'apparaissent que si la CB est activée.

    87 - La variable {CHATBOX_NAME} qui contient le texte "Chatbox" et qui est à l'intérieur du lien dont l'url est la variable {S_JOIN_CHAT} qui vous permet d'accéder à la chatbox dans un nouvel onglet.
    Si vous voulez modifier la mise en forme du "Statistiques", vous pouvez changer le nom de la class de la div qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "h3".

    88 - Voilà la div qui englobe les statistiques de la CB.

    89 - La variable {TOTAL_CHATTERS_ONLINE}, soit la phrase "Il y a actuellement X utilisateur(s) sur la ChatBox" qui correspond au nombre d'utilisateurs connectés sur la CB.

    90 - La variable {CHATTERS_LIST} qui correspond aux pseudos des membres connectés sur la CB. Puis, il y a un saut de ligne.

    91 - Fin de la div des statistiques de la CB.

    92 - Le «!-- BEGIN switch_chatbox_popup --» indique le début du lien pour rejoindre la CB.

    93 à 96 - Script contenant le lien utilisé pour rejoindre la CB (Le [Rejoindre le Chat])

    97 - Le «!-- END switch_chatbox_popup --» indique la fin du lien pour rejoindre la CB.

    98 - Le «!-- END switch_chatbox_activate --» indique la fin de la zone des statistiques qui n'apparaissent que si la CB est activée.

    99 - Le «!-- END disable_viewonline --» indique la fin du qeel.



    2.5 La fin du template (légende des statuts de forum, etc...)


    Suite au qeel, nous avons le reste du template, dont la légende des status de forum, la chat-box du bas, etc... On va commencer par ce qui n'est pas trop dur :

    - Nous avons une petite variable intéressanteà la ligne 101, à savoir la variable {CHATBOX_BOTTOM} est la chatbox qui apparaît si on a choisit de l'afficher en bas.
    - Les lignes 103 à 120 correspondent à notre connexion rapide du bas, alors nous n'allons pas revenir dessus.

    Pour ce qui n'est pas rebondant, on a les lignes 122 à 147 :
    Code:
    <br style="clear:both" />

    <!-- BEGIN switch_legend -->
    <ul id="picture_legend">
     <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
     <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
     <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
    </ul>
    <!-- END switch_legend -->

    {AUTO_DST}

    <!-- BEGIN switch_fb_index_login -->
    <div id="fb-root"></div>
    <script type="text/javascript">
    //<![CDATA[
    FB.init({
     appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
     status: true,
     cookie: true,
     xfbml: true,
     oauth: true
    });
    //]]>
    </script>
    <!-- END switch_fb_index_login -->

    122 - Saut de ligne qui termine tous les flottements à droite ou gauche.

    124 - Le «!-- BEGIN switch_legend --» indique le début de la légende des statuts de forums (New/Old/Lock ou  "Nouveau/Anciens/Verrouillé).

    125 - Début de la liste < ul > horizontale de cette légende.

    126 - Première section de cette liste < li > qui contient l'image de l'image New/Nouveau. La variable {FORUM_NEW_IMG} correspond à l'url de cette image.
    Puis, on a la variable {L_NEW_POSTS} qui correspond à la phrase "Nouveaux messages".

    127 - Première section de cette liste < li > contient l'image de l'image Old/Ancien. La variable {FORUM_IMG} correspond à l'url de cette image.
    Puis, on a la variable {L_NO_NEW_POSTS} qui correspond à la phrase "Pas de nouveaux messages".

    128 - Première section de cette liste < li > qui contient l'image de l'image Lock/Verrouillé. La variable {FORUM_LOCKED_IMG} correspond à l'url de cette image.
    Puis, on a la variable {L_FORUM_LOCKED} qui correspond à la phrase "Forum Verrouillé".

    129 - Fin de la liste.

    130 - Le «!-- END switch_legend --» indique la fin de la légende.

    132 - La variable {AUTO_DST} dont je ne suis jamais arrivé à trouver l'utilité... Par précaution, ne l'enlevez pas ^^

    134 - Le «!-- BEGIN switch_fb_index_login --» indique le début de la zone du script qui sert à faire fonctionner la fonction Facebook Connect.

    235 à 246 - Script qui sert à faire fonctionner la fonction Facebook Connect.

    247 - Le «!-- FIN switch_fb_index_login --» indique la fin de la zone du script qui sert à faire fonctionner la fonction Facebook Connect.



    2.6 Modifier les phrases des variables de FA


    Nous avons vu comment se rendre au template, les variables qui y sont utilisées et une visite en profondeur du template. Nous avons aussi vu que beaucoup de variables contiennent un texte déjà pré-programmé.
    Mais comment garder les fonctionnalités d'une variable tout en changeant son texte? Eh bien c'est ce qu'on va voir ^^

    Tous les exemples seront faits avec la variable {NEWEST_USER} dont le texte est "L'utilisateur enregistré le plus récent est NOM" et qui devient, grace à un javascript, "La nouvelle recrue est NOM"

    Premièrement, nous devons avoir un moyen de sélectionner notre variable. Donc nous nous rendrons dans le template et nous entourerons notre variable d'un "span" ou d'une "div" à laquelle nous donnerons un "id" afin de l'identifier.

    Exemple :
    Code:
    <span id="newuser">{NEWEST_USER}</span>

    Ensuite, nous allons ajouter un petit javascript dans notre template. Ce javascript est séparé en deux parties :
    1. Il repère le contenu du span/div qui contient l'id indiqué.
    2. Il remplace un certain texte par un nouveau texte.

    Le voici :
    Code:
    <script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");</script>

    À deux endroit dans le script,  on voit ceci :
    document.getElementById('newuser')
    Il faut s'assurer de mettre l'id que nous avons mis à notre variable dans les parenthèses et entre les ' '.

    Vers la fin, nous avons :
    replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");
    Il faut mettre le texte à remplacer dans les parenthèses, entre les / /.
    Il faut mettre le nouveau texte dans les parenthèses, entre les " ".

    Voilà, vous savez comment modifier le texte de vos variables! À savoir que vous devez faire attention lorsqu'il y a des phrases au pluriel et au singulier afin de mettre un javascript pour chacune des options possibles.


    Dernière édition par Onyx le Lun 18 Avr 2016 - 8:04, édité 2 fois



    avatar
    Ehawee
    FémininAge : 24Messages : 4627

    le Lun 31 Aoû 2015 - 23:07

    Onyx, je me dois de le dire : je t'aime de vénération! (Tu m'as sauvé la vie sur un QEEL, voilà <3 )
    Franchement, c'est un travail de fou ce que tu fais <3 Bravo! Tu gères à mort! Et tu as toute mon admiration pour ce boulot de méga-ampleur!



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Nihil Scar Winspeare
    Messages : 4635

    le Jeu 3 Sep 2015 - 13:36

    Tout comme Eha, je voulais te dire merci et bon courage pour le reste (vu qu'il te reste encore une partie Very Happy).
    Quand les gens ont un problème avec les variables spéciales, je leur mets presque toujours le lien du tuto. *-*



    avatar
    Lidia64
    FémininAge : 19Messages : 60

    le Jeu 3 Sep 2015 - 16:56

    Mon dieu tout ce travail *-*
    En tout cas milles merci pour cette fabuleuse banque de données <3



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 871

    le Ven 4 Mar 2016 - 23:34

    Omg
    Je dis juste...rien en fait, je suis bouche bée ._.



    avatar
    Shaneliae
    FémininAge : 21Messages : 806

    le Jeu 26 Mai 2016 - 14:24

    Allez tu as presque fini Onyx ! Du courage pour finir ce tuto ♥

    N'hésites pas à demander de l'aide si tu as besoin ^^



    Présence réduite.
    avatar
    Nihil Scar Winspeare
    Messages : 4635

    le Dim 12 Mar 2017 - 15:05

    Coucou :hug:

    Je me disais, comme tu as déjà fait un boulot monstrueux, peut-être qu'on peut valider déjà tout ce qu'il y a ? Comme ça ça sera disponible pour les membres facilement ♥︎

    Et ensuite on éditera la partie PunBB quand elle sera faite ? (surtout que c'est un template beaucoup moins utilisé, je trouve ça dommage de bloquer une ressource aussi bien faite alors que la majorité des gens peuvent déjà la trouver super utile comme ça >-<)



    avatar
    Onyx
    FémininAge : 23Messages : 2945

    le Sam 25 Mar 2017 - 18:41

    Oui oui, comme on en a parlé sur Discord, je vais déplacer ça aujourd'hui ^^

    (À moins que quelqu'un me saute à la gorge parce qu'ils remarquent des erreurs T_T)



    Contenu sponsorisé


      La date/heure actuelle est Sam 19 Aoû 2017 - 0:02