AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Pokémon EV06 : où acheter le Bundle Lot ...
Voir le deal

    Comprendre son QEEL et le personnaliser

    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Ven 16 Mar 2012 - 19:25

    Rappel du premier message :



    Comprendre son QEEL et le personnaliser Dernière mise à jour : 24 Novembre 2012
    Aperçu
    Préparation
    Détails


    W W W
    Il n'y a pas de préparations particulière à part avoir les yeux grands ouverts et le cerveau prêt à réfléchir Wink !

    Vous pouvez maintenant poursuivre et débuter le tutoriel. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau :

    Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


    Niveau : Facile
    Fait : 16/03/2012
    Type : Tutoriel


    J
    e vous propose de connaître comme votre poche votre QEEL, ou Qui Est En Ligne. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    Navigation




    Partie Compréhension

    Ce qu'il faut savoir de votre Qui est en ligne, c'est qu'il est configuré de telle manière que chaque variables (cf: Les Variables FA) renvoient à une phrase bien définie et qui contient la statistique que vous demandez.
    Ce qui signifie, bien évidemment, que vous pouvez les modifier, et c'est ce qu'on va faire dans la dernière partie de ce tutoriel.
    Tout d'abord, nous allons apprendre à reconnaître chaque élément et chaque variable que nous offre le fammeux QEEL [Qui Est En Ligne]

    Allez dans votre Panneau D'administrateur> Affichage (onglet)> Général> Index_body.
    Un long code s'affiche devant vos petits yeux qui n'ont demandés qu'une seule chose, votre qeel ...
    Pas de panique, je peux d'ors et déjà vous dire que nous nous occuperons de cette partie :

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

    En effet, c'est entre  BEGIN disable_viewonline et END disable_viewonline que votre Qui est en ligne se situe.
    Ainsi, nous voilà débarassé de déjà les 3/4 du code et nous pouvons mieux nous concentrer.
    Le code commence par un tableau table munit d'une class forumline et de certains attributs :


    width="100%" : Le tableau prendra la totalité de la page, ou de l'endroit où il est positionné.
    border="0" : Le tableau n'aura aucune bordure, valeur à mettre de préférence.
    cellspacing="1" : Equivaut au "margin" en css. Il indique que les celulles et lignes du tableau auront 1px d'espace entre-elles
    cellpadding="0" : Equivaut au "padding" en css. Il indique que les celulles et lignes du tableau auront 0px de marge intérieur.

    Ensuite, on va accélerer un peu, on repère les lignes, tr, et les colonnes, td.
    On peut donc remarque  5lignes et  2colonnes.
    Maintenant qu'on connait la structure de base de notre QEEL, on va aller piocher chaque élément dedans afin de savoir quelle est sa fonction.
    C'est partit \0/ !

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

     <!-- BEGIN switch_viewonline_nolink -->
     <span class="cattitle">{L_WHO_IS_ONLINE}</span>
     <!-- END switch_viewonline_nolink -->
     </td>
     </tr>
    {L_WHO_IS_ONLINE} : Affiche le titre "Qui est en ligne".
    Ceci vous redirigera vers la geolocalisation de vos membres mais aussi vous indiquera leur position sur le forum.
    switch_viewonline_link & switch_viewonline_nolink vous laisse le choix si vous désirez afficher, ou non, cette géolocalisation, c'est pourquoi il est préférable de ne pas y toucher Wink


    Deuxième ligne :
    Code:

     <tr>
     <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
     <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
     {TOTAL_USERS}<br />
     {NEWEST_USER}</span></td>
     </tr>
    src="{L_ONLINE_IMG}" : Affichera l'image que vous avez mis dans "Qui est en ligne" dans Gestion des images sur votre PA.
    {TOTAL_POSTS} : Affichera la phrase "Nos membres ont posté un total de X messages".
    {TOTAL_USERS} : Nous avons X membre enregistré".
    {NEWEST_USER} : L'utilisateur enregistré le plus récent est XXX".


    Troisième ligne :
    Code:

     <tr>
     <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
     {RECORD_USERS}<br />
     <br />
     {LOGGED_IN_USER_LIST}</span></td>
     </tr>
    {TOTAL_USERS_ONLINE} : Affichera la phrase "Il y a en tout X utilisateurs en ligne :: X Enregistré, X Invisible et X Invités ".
    {RECORD_USERS} : Affichera la phrase "Le record du nombre d'utilisateurs en ligne est de X le XXX XX XXX XXXX - XX:XX".
    {LOGGED_IN_USER_LIST} : Affichera la phrase "Utilisateurs enregistrés  : XXX, XXX, XXX".


    Quatrième ligne :
    Code:

     <tr>
     <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
     </tr>
    {LEGEND} : Affichera le mot "Légende :".
    {GROUP_LEGEND} : Affichera "[ XXX ] - [ XXX ]".


    Cinquième ligne :
    Code:

     <!-- 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 -->
    {TOTAL_CHATTERS_ONLINE} : Affichera la phrase "Il y a actuellement X utilisateur(s) sur la ChatBox :".
    {CHATTERS_LIST} : Affichera "XXX, XXX, XXX".
    switch_chatbox_popup affichera un lien vous redirigeant vers votre Chatbox en vous connectant.


    Voilà, on a terminé.
    Ouuuh, il reste trois trucs que t'as pas explique !
    Ouch, oui x_o

    Les Spéciaux
    Code:

     {L_CONNECTED_MEMBERS}
     {L_WHOSBIRTHDAY_TODAY}
     {L_WHOSBIRTHDAY_WEEK}
    {L_CONNECTED_MEMBERS} : Affichera la phrase "Membres connectés au cours des 24 dernières heures : XXX, XXX, XXX".
    {L_WHOSBIRTHDAY_TODAY} : Affichera "Aucun membre ne fête son anniversaire aujourd'hui".
    {L_WHOSBIRTHDAY_WEEK} : Affichera "Aucun membre ne fête son anniversaire dans les 7 prochains jours".

    Alors, pourquoi les spéciaux ?
    Et bien tout simplement parce que si vous voulez les introduire dans un qeel personnalisé, vous devrez les mettre d'une manière bien spéciale.
    Ces trois là créées une ligne rien qu'à eux et donc, pas besoin d'en créer une manuellement Wink

    On passe à la pratique maintenant !
    Maintenant que vous connaissez votre Qui Est En Ligne par coeur, nous allons le modifier pour le rendre plus personnalisé.

    Partie HTML&CSS


    A partir d'ici, ce n'est plus un tutoriel, mais une astuce.
    Tout sera expliqué en dessous sur sa structure et dans le CSS via des commentaires.

    Code:

    <!-- BEGIN disable_viewonline -->
    <div class="qeel">
      <div style="height: 40px"></div>
    <table align="center" width="75%" border="0" cellspacing="1" cellpadding="0">
     <tr>
     <td valign="top" width="50%" align="left">
                      <h1 style="text-align: center">Statistiques</h1>
     <span class="gensmall">
     {TOTAL_POSTS}<br />
     {TOTAL_USERS}<br />
     {NEWEST_USER}</span>
     </td>
     
     <td valign="top" width="50%" align="left">
                      <h1 style="text-align: center">Actuellement</h1>
     <span class="gensmall">{TOTAL_USERS_ONLINE}<br />
     {RECORD_USERS}<br />
     <br />
     {LOGGED_IN_USER_LIST}</span>
     </td>
     </tr>
     <tr>
     <td valign="top" align="center" colspan="2">
     <table><tr><td>
     {L_CONNECTED_MEMBERS}
     {L_WHOSBIRTHDAY_TODAY}
     {L_WHOSBIRTHDAY_WEEK}
     </td></tr></table>
     </td>
     </tr>
     <tr>
     <td valign="top" colspan="2"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
     </tr>
     <!-- BEGIN switch_chatbox_activate -->
     <tr>
     <td valign="top" align="center" colspan="2">
     <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {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>
    </div>
    <!-- END disable_viewonline -->

    Alors alors, voici le code HTML que vous pouvez déjà prendre si vous ne désirez pas modifier les phrases de votre QEEL.
    Cette fois, c'est rapide et simple :
    Il est composé de 4 lignes et 2 colonnes.
    J'ai volontairement retiré le titre puisqu'il n'avait plus aucune utilité dans mon cas.
    Vous pouvez toujours le rajouter en l'introduisant dans votre code.
    Vous allez constater que pour les "spéciaux" je les ai introduis à l'aide d'un tableau.
    Effectivement, c'est la meilleure méthode que j'ai pu trouver pour ne pas qu'ils sortent de la div Et c'est jusqu'ici la plus efficace que j'ai pu trouver.

    Maintenant le CSS :
    Code:

    .qeel
    {
      background-image: url('http://img19.imageshack.us/img19/3712/sanstitre1cbf.png');
    width: 800px;
    height: 238px;
      margin: auto;
    }

    Aussi petit xD ?
    Oui oui, on a besoin, dans mon cas, que d'une seule balise CSS : qeel.
    Elle a une fond : background-image, une largeur : width, une hauteur : height, et une centrage automatique grace au margin: auto;

    Ce sera tout pour ce qui est de la personnalisation esthétique de votre QEEL.
    Pour ceux voulant modifier les phrases de leur QEEL, plus besoin de sautiller sur votre chaise, c'est votre partie toute entière :3

    Partie Script


    Et bien voilà, nous y voilà à la dernière partie du tutoriel !
    Je ferais rapide de manière à ne pas vous user trop de temps, même si j'ai du le faire auparavant, mais c'était obligatoire =3
    Voici donc un bout de code en rapport avec le qeel de base :
    Code:

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

    On modifie par :
    Code:

     <tr>
     <td class="row1">
     <span class="gensmall" id="totalonline">{TOTAL_USERS_ONLINE}</span><br />
    Utilisateurs enregistrés : Taktiik
     <script type="text/javascript">
     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout /,"Nous avons");
     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"personne navigant sur le forum dont");
     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"personnes navigant sur le forum dont");
     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"Habitué");
     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"Habitués");
     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"Caché");
     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles/,"Cachés");
     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité/,"Timide");
     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités/,"Timides");
     </script>
     <span class="gensmall" id="recorduser">{RECORD_USERS}</span><br /><br />
     <script type="text/javascript">
     document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/- /,"à");
     document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/d'utilisateur /,"de membre");
     document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/d'utilisateurs /,"de membres");
     </script>
     <span class="gensmall" id="loggedusers">{LOGGED_IN_USER_LIST}</span>
     <script type="text/javascript">
     document.getElementById('loggedusers').innerHTML=document.getElementById('loggedusers').innerHTML.replace(/Utilisateurs enregistrés /,"Membres Connectés");
     </script>
     </td>
     </tr>

    Voilà, on a modifié une partie spéciale du QEEL parce que les phrases basiques étaient trop ... basiques x)
    Maintenant, je vous explique comment ça fonctionne et vous pourrez le faire presque partout !
    C'est d'ailleurs grâce à ce "script" que j'ai pu poster le tutoriel des sous-forums en retour à la ligne automatique Wink

    Donc on entoure notre variable d'un span avec un id.
    Cet id sera unique puisqu'il sera reprit dans le script !
    Ensuite, on balance le script et on lui indique de récupérer l'id de la balise. Ensuite, on lui dit que ce qui est dans cette balise, on va le remplacer.
    Code:

     document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace
    Vient ensuite une parenthèse avec comme valeur celle de départ puis séparé d'une slash et d'une virgule et entouré de guillemets, ce par quoi vous voulez le remplacé.
    Il ne faut pas oublier de mettre des "s" au cas où vous auriez plusieurs personnes de connectés par exemple =)
    Vous répérez la manipulation pour tous les éléments du QEEL et vous l'avez entièrement personnalisé !


    Félicitations,
    Vous êtes arrivé à la fin de ce tutoriel et il faut avouer que vous en avez appris des choses.
    Mais c'est quelque chose de bien, en effet, le QEEL est une des partie essentielle de votre forum et parfois trop négligée dans les forums =/
    Grâce à ce tutoriel, j'ai l'espoir qu'il ne le sera plus et que vous le bichonnerez comme il faut :3

    Merci à Michiyo pour l'idée du tutoriel
    Si vous avez des questions, n'hésitez pas à les poster Wink
    Cordialement~~
    Taktiik.


    Dernière édition par Taktiik le Dim 19 Mai 2013 - 13:48, édité 2 fois

    ShamRock
    ShamRock
    FémininAge : 29Messages : 44

    Sam 24 Aoû 2013 - 11:06

    Merci pour le tuto ~
    Chione
    Chione
    MasculinAge : 23Messages : 397

    Sam 24 Aoû 2013 - 15:05

    Merki bien



    Comprendre son QEEL et le personnaliser - Page 20 1435969469-signd
    FEZ!FEZ!
    Comprendre son QEEL et le personnaliser - Page 20 150804081846482087
    Océane Salvatore
    Océane Salvatore
    FémininAge : 26Messages : 9

    Lun 26 Aoû 2013 - 17:18

    Merci réellement, tu fais de beaux trucs et bien sûr que je vais créditer. Ce n'est pas de moi, tous les droits te reviennent ! T'as même pas à le dire ça devrait être un réflexe pour tout le monde..
    Tortue
    Tortue
    MasculinAge : 27Messages : 33

    Lun 26 Aoû 2013 - 22:44

    Merci Wink
    Gravity
    Gravity
    MasculinAge : 26Messages : 2369

    Ven 30 Aoû 2013 - 18:45

    Merci Very Happy



    Comprendre son QEEL et le personnaliser - Page 20 1492519401-bg-copie
    Faucon
    Faucon
    FémininAge : 24Messages : 64

    Ven 30 Aoû 2013 - 21:54

    Merci ♥
    Everald
    Everald
    FémininAge : 24Messages : 17

    Sam 31 Aoû 2013 - 3:17

    un petit merci -pan
    ahem
    genre
    merci beaucoup j'ai hâte de dévorer ce tuto des yeux ♥♥
    alexe-gawa
    alexe-gawa
    FémininAge : 30Messages : 8

    Sam 31 Aoû 2013 - 4:32

    merci !! *.*
    Noir
    Noir
    FémininAge : 31Messages : 16

    Sam 31 Aoû 2013 - 17:51

    Merci beaucoup! (Le QEEL, ma bête noire. D: )



    Comprendre son QEEL et le personnaliser - Page 20 Banner-YummyLove
    RadioEuphoria
    RadioEuphoria
    FémininAge : 27Messages : 14

    Dim 1 Sep 2013 - 6:58

    Merciiiiiii~
    Argy
    Argy
    FémininAge : 25Messages : 98

    Ven 6 Sep 2013 - 18:56

    Merci !
    Syra
    Syra
    FémininAge : 31Messages : 72

    Sam 7 Sep 2013 - 2:08

    Mercii =3



    MlleDarky
    MlleDarky
    FémininAge : 33Messages : 5

    Jeu 12 Sep 2013 - 21:19

    Merci pour le tuto
    A.Volk
    A.Volk
    FémininAge : 32Messages : 145

    Sam 14 Sep 2013 - 15:01

    Merci
    Swethlana.
    Swethlana.
    FémininAge : 24Messages : 24

    Sam 14 Sep 2013 - 15:44

    Merci
    Anonymous
    Invité

    Sam 14 Sep 2013 - 20:04

    Et une fois de plus... Tak' va me sauver ! Thanks mon loulou x)
    ( Lou' )
    ( Lou' )
    FémininAge : 28Messages : 108

    Dim 15 Sep 2013 - 10:32

    Merci :)
    Daenerys
    Daenerys
    FémininAge : 32Messages : 5

    Mar 17 Sep 2013 - 17:46

    Merci d'avance pour ce tuto Wink



    Comprendre son QEEL et le personnaliser - Page 20 Within10
    kitoune
    kitoune
    FémininAge : 39Messages : 23

    Sam 21 Sep 2013 - 17:01

    merci



    Comprendre son QEEL et le personnaliser - Page 20 1309040335014312311522953
    Roromiya
    Roromiya
    FémininAge : 21Messages : 111

    Sam 21 Sep 2013 - 20:38

    Merci !



    Comprendre son QEEL et le personnaliser - Page 20 Enma10
    Databar
    Databar
    MasculinAge : 30Messages : 142

    Dim 22 Sep 2013 - 6:54

    ccooll
    BadVampire
    BadVampire
    FémininAge : 27Messages : 5

    Dim 22 Sep 2013 - 19:22

    Merci pour ce tuto !
    Aki'
    Aki'
    FémininAge : 27Messages : 258

    Mar 24 Sep 2013 - 10:55

    Merci bien =)
    Neycha
    Neycha
    FémininAge : 30Messages : 58

    Mar 24 Sep 2013 - 23:50

    Merci d'avance pour ce tuto !!
    Aylec
    Aylec
    FémininAge : 29Messages : 5

    Ven 27 Sep 2013 - 11:06

    Merci d'avance ! :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 12 Mai 2024 - 17:41