Header

Partagez | 

[Xooit] Personnaliser son "qui est en ligne"

Message Sujet: [Xooit] Personnaliser son "qui est en ligne"   Jeu 11 Mar - 13:49

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Décidemment, vos formations me font bosser Smile

Etant donné que je prépare des tutos pour celles-ci, autant les faire partager à tous non ? Smile

Voici donc ici de petites astuces pour vous permettre de modifier totalement votre qui est en ligne Smile Allons y Smile

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

>> {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 Wink )
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 Smile 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 Smile 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 Smile

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

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 Smile







Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[Xooit] Personnaliser son "qui est en ligne"" tel que je l'ai rédigé.
Revenir en haut Aller en bas


[Xooit] Personnaliser son "qui est en ligne"
Page 1 sur 1
 Sujets similaires
-
» Personnaliser son « Qui est ligne? »
» Personnaliser la phrase "X utilisateurs en ligne"
» Modifier texte Qui est en Ligne
» Changer la couleur et l'écriture de sont qui et en ligne
» Changer mon nom de domaine personnaliser
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens