Partagez | 
 

 [Xooit] Modifier les "en ligne"/"hors ligne" des messages

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: [Xooit] Modifier les "en ligne"/"hors ligne" des messages   Sam 22 Fév - 11:50
Bonjour à tous Smile

Dans ce tutoriel, nous allons voir comment remplacer les textes "en ligne / hors ligne" visibles sur nos messages soit par d'autres textes, soit pas des images.

Rendu final:
 

Idea Pré-requis :
  • avoir accès aux templates de votre forum.


Pour faire cette manipulation, nous allons utiliser les langages web suivant :
  • CSS, pour faire "du beau",
  • Javascript, pour remplacer le "en ligne" ou "hors ligne" de chaque message.


Pour le reste, je vous explique le tout ^^

Idea Dans tout ce tutoriel, je pars de template par défaut. Si vous avez fait des modifications sur les vôtres, il faudra peut-être adapter mes explications Wink

Quelques modifications du template


Pour commencer, nous allons devoir cibler la partie "profil" qui contient les textes qui nous intéressent, à savoir les "en ligne" et "hors ligne".

Pour cela, nous allons ouvrir le template viewtopic_body.tpl. Dans celui-ci, il faut repérer le début de l'affichage du profil du posteur :
Code:
<td width="150" align="left" valign="top" class="row3"><span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span><br /><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span></td>

Ici, on va ajouter une class "auteurSjt" au td, ce qui donne :
Code:
<td width="150" align="left" valign="top" class="row3 auteurSjt">

Voilà pour la partie "préparation du html".

On passe au js


Surtout, on ne panique pas, c'est très simple. On va faire le code ensemble, pas à pas.

1/ On lance le javascript, une fois la page chargée :
Code:
jQuery(document).ready(function(){
  /* Le code sera ici */
});

2/ Ensuite, on va parcourir la page. A chaque fois qu'on croisera la class auteurSjt on appliquera la fonction :
Code:
jQuery(document).ready(function(){
  jQuery('.auteurSjt').each(function (){
      /* Le code sera ici */
  }); 
});

3/ On va parcourir les informations du posteur. A chaque fois que l'on croisera la class gensmall, on appliquera une autre fonction :
Code:
jQuery(document).ready(function(){
  jQuery('.auteurSjt').each(function (){
      jQuery('.gensmall', this).each(function(){
         /* Le code sera ici */
      });
  }); 
});

4/ Celle-ci commencera par récupérer le contenu de l'élement ayant pour class gensmall et le stockera dans une variable
Code:
jQuery(document).ready(function(){
  jQuery('.auteurSjt').each(function (){
      jQuery('.gensmall', this).each(function(){
         var contenu = jQuery(this).text();
         /* Le code sera ici */
      });
  }); 
});

5/ On va ensuite tester ce contenu pour savoir s'il contient "En ligne" :
Code:
jQuery(document).ready(function(){
  jQuery('.auteurSjt').each(function (){
      jQuery('.gensmall', this).each(function(){
         var contenu = jQuery(this).text();
         if(contenu == "En ligne"){
            /* Le code sera ici */
         }
      });
  }); 
});
ou "Hors ligne" :
Code:
jQuery(document).ready(function(){
  jQuery('.auteurSjt').each(function (){
      jQuery('.gensmall', this).each(function(){
         var contenu = jQuery(this).text();
         if(contenu == "En ligne"){
            /* Le code sera ici */
         }
         if(contenu == "Hors ligne"){
            /* Le code sera ici */
         }
      });
  }); 
});

6/ Puis, selon la boucle dans laquelle on entre, on va remplacer le contenu de l'élement dans lequel on se trouve et ayant pour class gensmall :
Code:
jQuery(document).ready(function(){
  jQuery('.auteurSjt').each(function (){
      jQuery('.gensmall', this).each(function(){
         var contenu = jQuery(this).text();
         if(contenu == "En ligne"){
            jQuery(this).html('<span class="online">Youhou! Je suis <strong>en ligne</strong> ! <img src="http://icons.iconarchive.com/icons/saviourmachine/chat/256/online-icon.png" alt="En ligne" /></span>');
         }
         if(contenu == "Hors ligne"){
            jQuery(this).html('<span class="offline">ZzzZzz. Je suis <strong>absent</strong>. <img src="http://png-4.findicons.com/files/icons/1733/msn_messenger_aqua/256/msn_offline.png" alt="Hors ligne" /></span>');
         }
      });
  }); 
});

Exclamation Attention ! Si votre texte contient une ou des apostrophes ( ' ) il faut les "contrer" avec des anti-slash ( \ ).
Code:
jQuery(this).html('<span class="offline">ZzzZzz. Je suis <strong>absent</strong>. N\'hésitez pas à me laisser un MP. <img src="http://png-4.findicons.com/files/icons/1733/msn_messenger_aqua/256/msn_offline.png" alt="Hors ligne" /></span>');

Et c'est terminé ^^


*** L'installation du JS
Très simple ici. Tout en bas de notre template , nous allons copier le js que nous avons fait ensemble :
Code:
<script language="Javascript" type="text/javascript">
<!--
jQuery(document).ready(function(){
   jQuery('.auteurSjt').each(function (){
      jQuery('.gensmall', this).each(function(){
         var contenu = jQuery(this).text();
         if(contenu == "En ligne"){
            jQuery(this).html('<span class="online">Youhou! Je suis <strong>en ligne</strong> ! <img src="http://icons.iconarchive.com/icons/saviourmachine/chat/256/online-icon.png" alt="En ligne" /></span>');
         }
         if(contenu == "Hors ligne"){
            jQuery(this).html('<span class="offline">ZzzZzz. Je suis <strong>absent</strong>. <img src="http://png-4.findicons.com/files/icons/1733/msn_messenger_aqua/256/msn_offline.png" alt="Hors ligne" /></span>');
         }
      });
  });
});
//-->
</script>


Un peu de CSS


Ici, on va se contenter :
  • d'écire le texte en non gras et en italique :
    Code:
    .online, .offline{font-weight:normal; font-style:italic;}
  • de donner une hauteur fixe à l'image :
    Code:
    .online img, .offline img{height:12px;}


Idea vous pouvez aussi changer la typo, la couleur, la taille, etc...

*** L'installation de la CSS
Deux solutions s'offrent à vous :
  • soit vous installez la CSS dans le template viewtopic_body.tpl,
  • soit vous installez la CSS dans le template overall_header.tpl contenant le reste de la CSS de votre forum


Cas 1 : dans le template "viewtopic_body.tpl"
Tout en bas de la page, nous allons ajouter :
Code:
<style type="text/css">

.online, .offline{font-weight:normal; font-style:italic;}
.online img, .offline img{height:12px;}

</style>

Cas 2 : dans le template "viewtopic_body.tpl"
Repérez ce code :
Code:
-->
</style>
et ajoutez votre CSS juste avant :
Code:
.online, .offline{font-weight:normal; font-style:italic;}
.online img, .offline img{height:12px;}

-->
</style>

-----

Voici le template viewtopic_body.tpl final :
Code:
<table align="center" width="92%" cellspacing="2" cellpadding="2" border="0">
  <tr>
   <td align="left" valign="bottom" colspan="2"><a class="maintitle" href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a><br />
     <span class="gensmall"><b>{PAGINATION}</b><br />
       </span></td>
  </tr>
</table>

<table align="center" width="92%" cellspacing="2" cellpadding="2" border="0">
  <tr>
   <td align="left" valign="bottom" nowrap="nowrap"><span class="nav"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" align="middle" /></a>   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" border="0" alt="{L_POST_REPLY_TOPIC}" align="middle" /></a></span></td>
   <td align="left" valign="middle" width="100%"><span class="nav">   <a href="{U_INDEX}" class="nav">{L_INDEX}</a>
     -> <a href="{U_VIEW_FORUM}" class="nav">{FORUM_NAME}</a></span></td>
  </tr>
</table>

<table class="forumline" align="center" width="92%" cellspacing="1" cellpadding="3" border="0">
   <tr align="right">
      <td class="catHead" colspan="2" height="28"><span class="nav"><a href="{U_VIEW_OLDER_TOPIC}" class="nav">{L_VIEW_PREVIOUS_TOPIC}</a> :: <a href="{U_VIEW_NEWER_TOPIC}" class="nav">{L_VIEW_NEXT_TOPIC}</a>  </span></td>
   </tr>
   {POLL_DISPLAY}
   <tr>
      <th class="thLeft" width="150" height="26" nowrap="nowrap">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap">{L_MESSAGE}</th>
   </tr>
   <!-- BEGIN postrow -->
   <tr>
      <td width="150" align="left" valign="top" class="row3 auteurSjt"><span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span><br /><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />{postrow.POSTER_FROM}</span></td>
      <td class="{postrow.ROW_CLASS}" width="100%" height="28" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td width="100%"><a href="{postrow.U_MINI_POST}"><img src="{postrow.MINI_POST_IMG}" width="12" height="9" alt="{postrow.L_MINI_POST_ALT}" title="{postrow.L_MINI_POST_ALT}" border="0" /></a><span class="postdetails">{L_POSTED}: {postrow.POST_DATE}<span class="gen"> </span>   <a href="#{postrow.U_POST_ID}">{L_POST_SUBJECT}: {postrow.POST_SUBJECT}</a></span></td>
            <td valign="top" nowrap="nowrap">{postrow.QUOTE_IMG} {postrow.EDIT_IMG} {postrow.DELETE_IMG} {postrow.IP_IMG}</td>
         </tr>
         <tr>
            <td colspan="2"><hr /></td>
         </tr>
         <tr>
            <td colspan="2"><span class="postbody">{postrow.MESSAGE}{postrow.SIGNATURE}</span><span class="gensmall">{postrow.EDITED_MESSAGE}</span></td>
         </tr>
      </table></td>
   </tr>
   <tr>
      <td class="{postrow.ROW_CLASS}" width="150" align="left" valign="middle"><span class="nav"><a href="#top" class="nav">{L_BACK_TO_TOP}</a></span></td>
      <td class="{postrow.ROW_CLASS}" width="100%" height="28" valign="bottom" nowrap="nowrap"><table cellspacing="0" cellpadding="0" border="0" height="18" width="18">
         <tr>
            <td valign="middle" nowrap="nowrap">{postrow.PROFILE_IMG} {postrow.PM_IMG} {postrow.EMAIL_IMG} {postrow.WWW_IMG} {postrow.AIM_IMG} {postrow.YIM_IMG} {postrow.MSN_IMG}<script language="JavaScript" type="text/javascript"><!--

   if ( navigator.userAgent.toLowerCase().indexOf('mozilla') != -1 && navigator.userAgent.indexOf('5.') == -1 && navigator.userAgent.indexOf('6.') == -1 )
      document.write(' {postrow.ICQ_IMG}');
   else
      document.write('</td><td> </td><td valign="top" nowrap="nowrap"><div style="position:relative"><div style="position:absolute">{postrow.ICQ_IMG}</div><div style="position:absolute;left:3px;top:-1px">{postrow.ICQ_STATUS_IMG}</div></div>');
            
            //--></script><noscript>{postrow.ICQ_IMG}</noscript></td>
         </tr>
      </table></td>
   </tr>
   <tr>
      <td class="spaceRow" colspan="2" height="1"><img src="http://img.xooimage.com/files1/_/ti/_-2f2a.gif" alt="" width="1" height="1" /></td>
   </tr>
   <!-- END postrow -->
   <tr align="center">
      <td class="catBottom" colspan="2" height="28"><table cellspacing="0" cellpadding="0" border="0">
         <tr><form method="post" action="{S_POST_DAYS_ACTION}">
            <td align="center"><span class="gensmall">{L_DISPLAY_POSTS}: {S_SELECT_POST_DAYS} {S_SELECT_POST_ORDER} <input type="submit" value="{L_GO}" class="liteoption" name="submit" /></span></td>
         </form></tr>
      </table></td>
   </tr>
</table>

<table align="center" width="92%" cellspacing="2" cellpadding="2" border="0" align="center">
  <tr>
   <td align="left" valign="middle" nowrap="nowrap"><span class="nav"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" align="middle" /></a>   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" border="0" alt="{L_POST_REPLY_TOPIC}" align="middle" /></a></span></td>
   <td align="left" valign="middle" width="100%"><span class="nav">   <a href="{U_INDEX}" class="nav">{L_INDEX}</a>
     -> <a href="{U_VIEW_FORUM}" class="nav">{FORUM_NAME}</a></span></td>
   <td align="right" valign="top" nowrap="nowrap"><span class="gensmall">{S_TIMEZONE}</span><br /><span class="nav">{PAGINATION}</span>
     </td>
  </tr>
  <tr>
   <td align="left" colspan="3"><span class="nav">{PAGE_NUMBER}</span></td>
  </tr>
</table>

<table align="center" width="92%" cellspacing="2" border="0" align="center">
  <tr>
   <td width="40%" valign="top" nowrap="nowrap" align="left"><span class="gensmall">{S_WATCH_TOPIC}</span><br />
     &nbsp;<br />
     {S_TOPIC_ADMIN}</td>
   <td align="right" valign="top" nowrap="nowrap">{JUMPBOX}<span class="gensmall">{S_AUTH_LIST}</span></td>
  </tr>
</table>

<script language="Javascript" type="text/javascript">
<!--
jQuery(document).ready(function(){
   jQuery('.auteurSjt').each(function (){
      jQuery('.gensmall', this).each(function(){
         var contenu = jQuery(this).text();
         if(contenu == "En ligne"){
            jQuery(this).html('<span class="online">Youhou! Je suis <strong>en ligne</strong> ! <img src="http://icons.iconarchive.com/icons/saviourmachine/chat/256/online-icon.png" alt="En ligne" /></span>');
         }
         if(contenu == "Hors ligne"){
            jQuery(this).html('<span class="offline">ZzzZzz. Je suis <strong>absent</strong>. <img src="http://png-4.findicons.com/files/icons/1733/msn_messenger_aqua/256/msn_offline.png" alt="Hors ligne" /></span>');
         }
      });
  });
});
//-->
</script>

<style type="text/css">

.online, .offline{font-weight:normal; font-style:italic;}
.online img, .offline img{height:12px;}

</style>




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 "Modifier les "en ligne"/"hors ligne" des messages" tel que je l'ai rédigé.
 

[Xooit] Modifier les "en ligne"/"hors ligne" des messages

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Code - PHPBB2 Xooit] Modifier la largeur de votre forum
» Modifier l'emplacement du nombre de sujets/messages d'un forum
» Utiliser sa ligne téléphonique Bbox à partir d'un mobile ! Possible?
» Comboost : un diaporama hébergé en ligne
» Webjam : créer un site en ligne

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants