Header

Partagez | 

[ForumActif] Personnaliser son QEEL

Message Sujet: [ForumActif] Personnaliser son QEEL   Mar 12 Juil - 12:57

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Coucou Smile

Comme beaucoup d'entre vous le demandent 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:
<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:
 
<!-- 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"><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>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

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



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" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>

Ajoutons maintenant une image de fond. Pour cela, donner un nom d'id à votre tableau
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="qeel">

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:
 
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="qeel">
   <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" 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>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

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


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




Vous rencontrer 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
Revenir en haut Aller en bas

Message Sujet: Re: [ForumActif] Personnaliser son QEEL   Sam 8 Oct - 12:47

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
****** 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:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="qeel">
  <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" 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>
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
      <td class="row1">
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

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

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:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

par

Code:
<!-- BEGIN disable_viewonline -->
<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 ^^




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].
Revenir en haut Aller en bas


Message Sujet: Re: [ForumActif] Personnaliser son QEEL   Dim 22 Juil - 15:20

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Questions Fréquentes


Comment supprimer la couleur de fond des cases ?


Il suffit d'ajouter dans le css
Code:
table#qeel td.row1{
background:none!important;
}
Revenir en haut Aller en bas

Message Sujet: Re: [ForumActif] Personnaliser son QEEL   

Mes clubs

Contenu sponsorisé

Revenir en haut Aller en bas
[ForumActif] Personnaliser son QEEL
Page 1 sur 1
 Sujets similaires
-
» Personnaliser le QEEL ...
» Personnaliser son QEEL
» QEEL en tableaux
» personnaliser son message d'accueil 4
» Enlever le "QEEL " et centrer le texte au dessous
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