 | | Sujet: Personnaliser son "qui est en ligne" Jeu 11 Mar - 12:49 | |
| Décidemment, vos formations me font bosser  Etant donné que je prépare des tutos pour celles-ci, autant les faire partager à tous non ? Voici donc ici de petites astuces pour vous permettre de modifier totalement votre qui est en ligne Allons y Tout d'abord, voici le template qui nous intéresse : INDEX_BODY.TPL / La partie concernant le "qui est en ligne" est tout en bas. Voici quelques petites infos avant de commencer  >> {U_VIEWONLINE} : affiche qui est en ligne
>> {TOTAL_POSTS} : correspond à "Nos membres ont posté un total de N messages"
>> {TOTAL_USERS} : correspond à "Nous avons N membres enregistrés"
>> {NEWEST_USER} : correspond à "L'utilisateur enregistré le plus récent est N"
>> {TOTAL_USERS_ONLINE} : correspond à "Il y a en tout 1 utilisateur en ligne : 1 Enregistré, 0 Invisible, 0 Invité et 0 Moteur de recherche"
>> [{L_WHOSONLINE_ADMIN}] : correspond à "[Admin]"
>> [{L_WHOSONLINE_MOD}] : correspond à "[Modérateur]"
>> {RECORD_USERS} : correspond à "Le record du nombre d’utilisateurs en ligne est de ..."
>> {LOGGED_IN_USER_LIST} : correspond à "Utilisateurs enregistrés :..."
>> {L_ONLINE_EXPLAIN} : correspond à "Ces données sont basées sur les utilisateurs actifs des 60 dernières minutes"*** Modifier le texte *** Commençons tout d'abord par apprendre à modifier le texte. Prenons par exemple "Nos membres ont posté un total de N messages". Nous voulons le remplacer par : "Nos étudiants ont posté un total de N messages". Voici comment faire. 1/ Déjà, repérons le code que nous allons modifier : | Code: | <td class="row1" align="left" width="100%"><span class="gensmall">{TOTAL_POSTS}
{TOTAL_USERS}
{NEWEST_USER}</td> |
2/ Ensuite, nous allons donner à "{TOTAL_POSTS}" un nom d'id en span que nous allons pouvoir réutiliser dans un script.
| Code: | <td class="row1" align="left" width="100%"><span class="gensmall"><span id="nb_messages">{TOTAL_POSTS}</span>
{TOTAL_USERS}
{NEWEST_USER}</td> |
3/ Maintenant, on écrit le script
| Code: | <script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres/,"Nos étudiants");</script> |
Avant d'aller plus loin, expliquons rapidement ce script (oui, c'est bien mieux de comprendre ce que l'on fait plutôt que de faire un simple copier/coller non? ^^)
| Code: | document.getElementById('nb_messages').innerHTML |
Cela correspond au contenu html de l'élément (pour le "span") qui se nomme "nb_messages"
| Code: | document.getElementById('nb_messages').innerHTML.replace |
Nous allons remplacer le contenu html de l'élement nommé "nb_messages"
| Code: | (/Nos membres/,"Nos étudiants") |
On dit au code de remplacer "Nos membres" par "Nos étudiants".
4/ Et finalement, on l'insère dans notre code de base :
| Code: | <td class="row1" align="left" width="100%"><span class="gensmall"><span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres/,"Nos étudiants");</script></span>
{TOTAL_USERS}
{NEWEST_USER}</td> |
Si vous désirez remplacer plusieurs mots, il suffit de copier/coller cette partie autant de fois que les parties que vous voulez modifier.
| Code: | document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/mot_avant/,"mot_après"); |
Voici un petit exemple ^^
> Le code modifié : (je n'ai pas tout changé, mais c'est pour vous montrer que tout est possible  )
| Code: | <td class="row1" align="center" valign="middle" rowspan="2"><img src="http://img6.xooimage.com/files/2/5/f/qeel1-164804b.png" alt="{L_WHO_IS_ONLINE}" /></td>
<td class="row1" align="left" width="100%"><span class="gensmall"><span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres/,"Nos étudiants");</script></span>
<span id="mb_inscrits">{TOTAL_USERS}<script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/membres enregistrés/,"élèves inscrits dans notre école.");</script></span>
<span id="newest">{NEWEST_USER}<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L’utilisateur enregistré le plus récent est/,"Le dernier élève inscrit est ");</script></span></span>
</td>
</tr>
<tr>
<td class="row1" align="left"><span class="gensmall"><span id="online">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/ Enregistré/," étudiant(s)");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invité/, "sécheur(s) de cours");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateur en ligne/, "personne(s) dans l'école");</script></span> [ {L_WHOSONLINE_ADMIN} ] [ {L_WHOSONLINE_MOD} ]
{RECORD_USERS}
{LOGGED_IN_USER_LIST}</span></td> |
*** Modifier les couleurs, mise en page, fond, etc ***
Tout comme pour le texte, tout est modifiable en ce qui concerne la mise en page. Pour cela, nous allons utiliser du CSS (voir ce tuto pour les propriétés de base : [clic] )
Reprenons donc notre code correspond à toute la partie "Qui est en ligne"
| Code: | <table width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline"> <tr> <td class="catHead" colspan="2" height="28"><span class="cattitle"><a href="{U_VIEWONLINE}" style="color:#ffffff;" class="cattitle">Qui est avec nous sur le forum ?</a></span></td> </tr> <tr> <td class="row1" align="center" valign="middle" rowspan="2"><img src="http://img6.xooimage.com/files/2/5/f/qeel1-164804b.png" alt="{L_WHO_IS_ONLINE}" /></td> <td class="row1" align="left" width="100%"><span class="gensmall"><span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres/,"Nos étudiants");</script></span> <span id="mb_inscrits">{TOTAL_USERS}<script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/membres enregistrés/,"élèves inscrits dans notre école.");</script></span> <span id="newest">{NEWEST_USER}<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L’utilisateur enregistré le plus récent est/,"Le dernier élève inscrit est ");</script></span></span> </td> </tr> <tr> <td class="row1" align="left"><span class="gensmall"><span id="online">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/ Enregistré/," étudiant(s)");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invité/, "sécheur(s) de cours");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateur en ligne/, "personne(s) dans l'école");</script></span> [ {L_WHOSONLINE_ADMIN} ] [ {L_WHOSONLINE_MOD} ] {RECORD_USERS} {LOGGED_IN_USER_LIST}</span></td> </tr> </table> |
1/ Nous allons d'abord commencer par mettre une image de fond à notre tableau Pour cela, nous allons modifier les lignes et colonnes en leur ajoutant du CSS.
Commençons par enlever l'image de la colonne de gauche. Pour cela, il vous suffit de supprimer ce bout de code :
| Code: | <td class="row1" align="center" valign="middle" rowspan="2"><img src="http://img6.xooimage.com/files/2/5/f/qeel1-164804b.png" alt="{L_WHO_IS_ONLINE}" /></td> |
Ajoutons maintenant une image de fond. Pour cela, copier le code CSS suivant dans la balise "table"
| Code: | style="background-image: url('http://i754.photobucket.com/albums/xx188/School_of_pub/annv_2010/sans_t34.jpg');" |
Petit soucis, on ne voit pas l'image Pas de panique, c'est normal ! Il faut mettre le fond des lignes du tableau en transparence. Pour cela, ajoutez le code suivant après les "td"
| Code: | style="background-color:transparent;" |
Vous devriez avoir un code de QEEL qui ressemble à ça :
| Code: | <table style="background-image: url('http://i754.photobucket.com/albums/xx188/School_of_pub/annv_2010/sans_t34.jpg');" width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline"> <tr> <td class="catHead" colspan="2" height="28"><span class="cattitle"><a href="{U_VIEWONLINE}" style="color:#ffffff;" class="cattitle">Qui est avec nous sur le forum ?</a></span></td> </tr> <tr> <td style="background-color:transparent;" class="row1" align="left" width="100%"><span class="gensmall"><span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres/,"Nos étudiants");</script></span> <span id="mb_inscrits">{TOTAL_USERS}<script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/membres enregistrés/,"élèves inscrits dans notre école.");</script></span> <span id="newest">{NEWEST_USER}<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L’utilisateur enregistré le plus récent est/,"Le dernier élève inscrit est ");</script></span></span> </td> </tr> <tr> <td style="background-color:transparent;" class="row1" align="left"><span class="gensmall"><span id="online">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/ Enregistré/," étudiant(s)");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invité/, "sécheur(s) de cours");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateur en ligne/, "personne(s) dans l'école");</script></span> [ {L_WHOSONLINE_ADMIN} ] [ {L_WHOSONLINE_MOD} ] {RECORD_USERS} {LOGGED_IN_USER_LIST}</span></td> </tr> </table> <table width="100%" cellpadding="1" cellspacing="1" border="0"> <tr> <td align="left" valign="top"><span class="gensmall">{L_ONLINE_EXPLAIN}</span></td> </tr> </table> |
Avec un rendu de ce type :
Moué, on lit pas très bien mon texte hein...
2/ Mettons maintenant un peu de mise en page
Par défaut, le texte du "qui est en ligne" fait partie de la class "gensmall". Nous allons enlever ceci pour faire notre propre mise en page Pour cela, supprimer ceci du tableau
| Code: | <span class="gensmall"> ... </span> |
Et ajoutons de la mise en page directement dans nos lignes ou colonnes.
Personnellement, j'ai choisi de le faire par ligne. Je vais commencer par
| Citation: | Nos étudiants ont posté un total de 2 messages
Nous avons 3 élèves inscrits dans notre école.
Le dernier élève inscrit est Visiteurs |
Pour cela, je vais ajouter du style au "td" correspondant.
| Code: | <tr style="background-image: url('http://i754.photobucket.com/albums/xx188/School_of_pub/annv_2010/sans_t34.jpg');color:#050646; font-style:italic;font-size:10px;">
<td style="background-color:transparent;" class="row1" align="left" width="100%"><span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres/,"Nos étudiants");</script></span>
<span id="mb_inscrits">{TOTAL_USERS}<script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/membres enregistrés/,"élèves inscrits dans notre école.");</script></span>
<span id="newest">{NEWEST_USER}<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L’utilisateur enregistré le plus récent est/,"Le dernier élève inscrit est ");</script></span>
</td>
</tr> |
Et le rendu :
Passons à la ligne suivante.
Comme précédemment, ajoutons du style au td
| Code: | <td style="background-color:transparent;text-align:center;font-size:12px;color:#0d0e18;" class="row1" align="left"><span id="online">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/ Enregistré/," étudiant(s)");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invité/, "sécheur(s) de cours");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateur en ligne/, "personne(s) dans l'école");</script></span> [ {L_WHOSONLINE_ADMIN} ] [ {L_WHOSONLINE_MOD} ]
{RECORD_USERS}<br/>{LOGGED_IN_USER_LIST}</td> |
Et voilà mon qeel
|
|
