[forumactif]Personnaliser son QEEL

Coucou

Comme beaucoup d'entre vous le demande et que vous avez du mal à adapter un tuto xooit à vos forums FA, voici le tutoriel rien que pour vous.

Tout d'abord, voici le template qui nous intéresse : index_body / La partie concernant le "qui est en ligne" est tout en bas.

Voici quelques petites infos avant de commencer Very Happy

>> {L_WHO_IS_ONLINE} : 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"
>> {LEGEND} : {GROUP_LEGEND} : correspond aux groupes
>> {RECORD_USERS} : correspond à "Le record du nombre d’utilisateurs en ligne est de ..."
>> {LOGGED_IN_USER_LIST} : correspond à "Utilisateurs enregistrés :..."
>> {L_CONNECTED_MEMBERS} : correspond aux utilisateurs connectés les dernières N heures
>> {L_WHOSBIRTHDAY_TODAY} : membres fêtant leur anniversaire aujourd'hui
>> {L_WHOSBIRTHDAY_WEEK} : membres fêtant leur anniversaire dans la semaine

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

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 class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
   <td class="catHead" colspan="2" height="28">
   
   <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
   

   
   <span class="cattitle">{L_WHO_IS_ONLINE}</span>
   
   </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"><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"><span class="gensmall"><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>

   {RECORD_USERS}



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

<tr>
   <td class="row1">
      <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}

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

Ajoutons maintenant une image de fond. Pour cela, donner un nom d'id à votre tableau

Code:

et dans la feuille de style ajouter :

Code:

table#qeel{
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 dans votre css

Code:

table#qeel td{
background-color:transparent;
}

Vous devriez avoir un code de QEEL qui ressemble à ça :

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="qeel">
<tr>
   <td class="catHead" colspan="2" height="28">
   
   <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
   

   
   <span class="cattitle">{L_WHO_IS_ONLINE}</span>
   
   </td>
</tr>
<tr>
   <td class="row1" 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"><span class="gensmall"><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>

   {RECORD_USERS}



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

<tr>
   <td class="row1">
      <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}

         
         <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>
         
      </span>
   </td>
</tr>

</table>

et ce css

Code:

table#qeel{
background-image: url('http://i754.photobucket.com/albums/xx188/School_of_pub/annv_2010/sans_t34.jpg');
}

table#qeel tr{
background-color:transparent;
}

Avec un rendu de ce type :
[img]

[/img]

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 modifier celui-ci pour avoir notre propre mise en page. Pour cela, on va ajouter ça dans la feuille de style css

Code:

table#qeel td span.gensmall{
color:#050646;
font-style:italic;
font-size:10px;
}

Et le rendu :
[img]

[/img]

Vous savez maintenant comme personnaliser vos qeel sous FA Smile

Astuce : Une remarque de caline :

caline a écrit:

Pour {L_CONNECTED_MEMBERS} c'est modifiable, je cache pas que j'ai eu des soucis avec mais c'est réglé ^^

Il a jouer le vilain template récalcitrant qui ne voulait pas se modifier!! il a fallu le dresser, le dompter pour qu'il obeisse enfin..

Code:

<tr id="qeel8" style="display:none;"><td></td></tr>{L_CONNECTED_MEMBERS}<script type="text/javascript">document.getElementById('qeel8').nextSibling.firstChild.firstChild.innerHTML=document.getElementById('qeel8').nextSibling.firstChild.firstChild.innerHTML.replace(/Membres connectés/,'Nostalgiques présents');</script>

Vous mettez ce que vous voulez comme texte ^^

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]

****** AJOUT ******

Modifier la partie "anniversaire"

Là c'est subtile Smile

En effet, c'est un piège... En gros, on a

Code:

{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

qui est récupéré, et, une fois que le navigateur a récupéré les infos, il les mets dans le span. Du coup, il faut mettre le script en dehors du span pour qu'il soit bien pris en charge. On va donc remplacer le code précédent par :

Code:

{L_WHOSBIRTHDAY_TODAY}<span id="anniversaire"></span>
{L_WHOSBIRTHDAY_WEEK}<script type="text/javascript">document.getElementById('anniversaire').parentNode.innerHTML=document.getElementById('anniversaire').parentNode.innerHTML.replace(/Membres/,"Nouveau mot").replace(/Membres/,"Nouveau mot").replace(/Aucun membre/,"Aucun Nouveau mot").replace(/Aucun membre/,"Aucun Nouveau mot");</script>

Ce qui te donne dans le template

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="qeel">
<tr>
<td class="catHead" colspan="2" height="28">

<span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>



<span class="cattitle">{L_WHO_IS_ONLINE}</span>

</td>
</tr>
<tr>
<td class="row1" 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"><span class="gensmall"><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>

{RECORD_USERS}

{LOGGED_IN_USER_LIST}</span></td>
</tr>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}<span id="anniversaire"></span>
{L_WHOSBIRTHDAY_WEEK}<script type="text/javascript">document.getElementById('anniversaire').parentNode.innerHTML=document.getElementById('anniversaire').parentNode.innerHTML.replace(/Membres/,"Nouveau mot").replace(/Membres/,"Nouveau mot").replace(/Aucun membre/,"Aucun Nouveau mot").replace(/Aucun membre/,"Aucun Nouveau mot");</script>
<tr>
<td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>

<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}


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

</span>
</td>
</tr>

</table>

Donner des coins arrondis au tableau

1/ On va donner un nom au tableau correspond au QEEL. On va tout simplement l'appeler "qeel" et on va utiliser un id (car ce genre de tableau n'apparait qu'une fois sur la page). On remplace donc

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

par

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="qeel">

2/ On va aller bosser le CSS. Toute la mise en page du qeel sera indiquée comme ceci

Code:

table#qeel{les propriétés ici;}

* Tout d'abord, faisons en sorte que la couleur de fond du qeel soit la même partout. Pour cela, on va utiliser cette propriété

Code:

table#qeel{background:#code_couleur !important;}

En remplaçant "code_couleur" par le code de la couleur de vos cases

* Maintenant, les bordures. On va devoir :
a) définir comment on veut la bordure. Par exemple :

Code:

border : 3px solid black;

b) lui dire que ces coins seront arrondis

Code:

border-radius:12px;

c) adapter ce code pour mozilla, chrome...

Code:

-moz-border-radius: 12px; /* pour mozilla */
-webkit-border-radius: 12px; /* pour chrome et safari */

ce qui nous donne pour le css du qeel :

Code:

table#qeel{
background:#e26e26 !important;
border : 3px solid black;
border-radius:12px;
-moz-border-radius: 12px; /* pour mozilla */
-webkit-border-radius: 12px; /* pour chrome et safari */
}

Remarque : Quand on écrit un texte /* comme ça */ ce sont des commentaires donc non pris en charge par le navigateur. C'est pour nous aider à nous repérer ^^

_________________

SoP Story :: 2ème votes éliminatoires