[PHPBB2] Sous forums / modifier

Salut Phil , je me demandais si tu avais partager l'astuce et si ce n'est pas le cas est-ce possible
de le partager c'est à dire ceci : https://i.servimg.com/u/f84/16/67/19/10/milx410.png

J'aimerais bien installer ce genre de rendu sur mon forum pour les sous forums comme ici .

Merci !!!

Hello Franck,

ce n'est pas une astuce mon ami,mais c'est la version EDGE et un style ajouté qui donne
cette apparence.

Resalut mister , donc en gros il n'y à rien à faire dans ce style pour phpbb2 ?

Tu peux tester ce script stp en changeant les couleurs dans le script et
en te repérant sur les commentaires présents:


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur les sous forums


Déposes ceci:

Code:


$(function(){
$('.forumline').each(function(){
var M14_verrou=$(this).find('img[alt*="est verrouillé"]');
var notPost=$(this).find('img[alt="Pas de nouveaux messages"]');
var newPost=$(this).find('img[alt="Nouveaux messages"]');
//LES COULEURS
  //SUJETS VERROUILLES
var M14_verrouColor='red';
  //PAS DE NOUVEAU MESSAGES
var notPostColor='orange';
  //nouveaux messages
var newPostColor='green';
if(M14_verrou)
{
$('img[alt*="est verrouillé"]').closest('td').css('backgroundColor',M14_verrouColor);
}
if(notPost)
{
$('img[alt="Pas de nouveaux messages"]').closest('td').css('backgroundColor',notPostColor);
}
if(newPost)
{
$('img[alt="Nouveaux messages"]').closest('td').css('backgroundColor',newPostColor);
}
});});



Penses a cliquer sur le bouton Valider

Salut Phil , merci pour ta réponse rapide
par contre de mon coter sa ne semble pas fonctionner pour le moment
voici ce que sa donne : https://snag.gy/FzJEwl.jpg

Hello Franck,
cela fonctionne mon ami, tu as bien des couleurs différrentes selon le statut des icônes de messages!!
Que veux tu de plus ?

Salut Philippe , je crois que nous nous sommes mal compris
je ne veux pas nessairement un changement de couleurs mais plutot un changement
de structure pour les les sous forum comme ceci :
https://i.servimg.com/u/f84/16/67/19/10/milv110.png

Un gros , j'aimerais la même chose que tu as fait ici mais
je modifirais les couleurs pour mon forum mais ce serais super si je pouvais
avoir le même rendu finale que nous voyons ici sur tout le forum .

Alors pour cela, il me faudrait le template (si ce dernier a été modifié) et la css associée Franck:
topics_list_box:
Affichage/Templates/Général/topics_list_box

Ensuite toutes:
Icônes des sujets
Icônes de messages

Affichage/Images et couleurs/Gestion des images/Mode avançé

Icônes des sujets
Icônes de messages

A partir de là, on va pouvoir avancer mon ami.

Un gros merci pour ton temps encore une fois c'est vraiment très apprécié !!!

Affichage/Templates/Général/topics_list_box

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
      <th align="center" nowrap="nowrap" width="80"> {topics_list_box.row.L_REPLIES} </th>
      <th align="center" nowrap="nowrap" width="100"> {topics_list_box.row.L_AUTHOR} </th>
      <th align="center" nowrap="nowrap" width="50"> {topics_list_box.row.L_VIEWS} </th>
      <th align="center" nowrap="nowrap" width="150"> {topics_list_box.row.L_LASTPOST} </th>
      <!-- BEGIN multi_selection -->
      <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
   <!-- END multi_selection -->
   </tr>
   <!-- BEGIN pagination -->
   <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END pagination -->
   <!-- END header_table --><!-- BEGIN header_row -->
   <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
   </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
   <tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <div class="topictitle">
                          {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>

         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> 
         <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

      <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
      <td class="row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
      <td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

            <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
        </td>
<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
   <!-- END multi_selection -->
   </tr>
   <!-- END topic --><!-- BEGIN no_topics -->
   <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
   </tr>
   <!-- END no_topics --><!-- BEGIN bottom -->
   <tr>
      <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td> <span class="gensmall">{PAGINATION}</span></td>
               <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
         </table>
      </td>
   </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Affichage/Images et couleurs/Gestion des images/Mode avançé
Les icones sujets

Sujet : https://i.servimg.com/u/f80/15/62/56/22/0010111.png
Messages/Nouveau  : https://i.servimg.com/u/f80/15/62/56/22/0010210.png
Sujet Véruoillé/Nouveau : https://2img.net/i/fa/subsilver/folder_lock.gif
Annonces/Nouveau : https://i.servimg.com/u/f80/15/62/56/22/info10.png
Note/Nouveau : https://2img.net/i/fa/subsilver/folder_sticky.gif

À noter que lorsque que je mentionner /Nouveau sa veux dire que j'utilise le même
icone pour les deux c'est à dire un vieux sujet ou nouveau l'icone change pas .

Les icones messages
en cours : https://i.servimg.com/u/f11/16/67/19/10/encour11.png

Hello Franck,
alors , il faut par contre ne pas séparer les annonces etc etc:

Général/Messages et Emails/Configuration/Séparer les annonces et notes des autres sujets :
Coches
non


Ensuite,
il faut que tes forums ne comportent pas de sous forums.


Ton template modifié:

Code:

   <!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
    <script type="text/javascript">
    function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
       var all_checked = true;
       for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
             all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
          }
       }
       document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
    }
    function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
       for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
             document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
          }
       }
    }
    </script>
    <!-- END multi_selection -->

    <table id="M14_EDGE"class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
        
          <!-- BEGIN multi_selection -->
          <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
       <!-- END multi_selection -->
       </tr>
       <!-- BEGIN pagination -->
       <tr>
          <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
       </tr>
       <!-- END pagination -->
       <!-- END header_table --><!-- BEGIN header_row -->
       <tr>
          <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
       </tr>
    <!-- END header_row -->

    <!-- BEGIN topic -->
    {topics_list_box.row.END_TABLE_STICKY}
   <tr class="forum-block">
          <!-- BEGIN single_selection -->
          <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
          <!-- END single_selection -->
         <!-- BEGIN icon -->
          <td class="{topics_list_box.row.ROW_CLASS} M14_icone" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
          <!-- END icon -->
          <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
      
          <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="40%">
             <div class="topictitle">
                              {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
                <h2 class="topic-title">
                   <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                </h2><br />
<span class="genmed">{topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}</span>  
             </div>

             <!-- BEGIN switch_description -->
             <span class="genmed">
                <br />
                {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
             </span>
             <!-- END switch_description -->
             <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
             <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
          </td>

   <td class="row2 posts" align="center" valign="middle">
                  <span class="number">{topics_list_box.row.REPLIES}</span><br />
                   <small></small>
          </td>
  <td class="row2 views" align="center" valign="middle">
  <span class="number">{topics_list_box.row.VIEWS}</span> <br /><small></small></td>
          <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
                <!-- BEGIN avatar -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

                <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
            </td>
    <!-- BEGIN multi_selection -->
          <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
       <!-- END multi_selection -->
       </tr>
<tr><td style="height:10px;background-color:white;"colspan="7"></td></tr>
       <!-- END topic --><!-- BEGIN no_topics -->
       <tr>
          <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
       </tr>
       <!-- END no_topics --><!-- BEGIN bottom -->
       <tr>
          <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                   <td> <span class="gensmall">{PAGINATION}</span></td>
                   <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
                </tr>
             </table>
          </td>
       </tr>
    <!-- END bottom --><!-- BEGIN footer_table -->
    </table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row -->
<!-- END topics_list_box -->


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposes ceci:

Code:


/*ON IMPORTE LA LIBRAIRIE font-awesome*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
/*ON SUPPRIME LES BORDURES DE LA TABLE FORUMLINE*/
#M14_EDGE.forumline{border:none;}
/*ON SUPPRIMER LES BACKGROUND IMAGE DES BALISE TH*/
#M14_EDGE.forumline .forum-block th{background-image:none;}
/*ON DONNE UNE COULEUR DE FOND AU LIGNE DE SUJETS*/
#M14_EDGE.forumline .forum-block th,#M14_EDGE.forumline .forum-block td{background-color: #EEE;}
.M14_moreView,.M14_lessView,.M14_noneView{width: 20px;height: 20px;float:right;margin-top: 10px;cursor:pointer;}
/*LES SABLIERS*/
.M14_moreView:after{color:black;content:"\f254";font-size: 16px;font-family: FontAwesome;}
.M14_lessView:after{color:black;content:"\f251";font-size: 16px;font-family: FontAwesome;}
.M14_noneView:after{color:black;content:"\f250";font-size: 16px;font-family: FontAwesome;}
/*ON DONNE UNE COULEUR DE FOND A LA CELLULE DE L ICONE*/
.M14_icone{background-color:#999999 !important;}
/*ON DONNE UN STYLE AUX ICONES DE MESSAGES*/
.M14_icone img[class^="posticon"]
{
transform: rotate(-90deg);
margin-left:-1%;
border:1px solid #333;
}





Le script permettant de mettre les textes au singulier/pluriel avec les curseurs suivants les paramètres dans le script:



Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur les sous forums.


Déposes ceci:

Code:


$(function(){
$('.forum-block').each(function(){
var M14_contposts=$(this).find('.posts span.number').text();
if (M14_contposts==0)
{
$(this).find('.posts small').html('Réponse');
$(this).find('.posts span.number').before('<span class="M14_noneView"title="Ce sujet n\'a pas reçu de réponse"></span>');
}
else if (M14_contposts<2)
{
$(this).find('.posts small').html('Réponse');
$(this).find('.posts span.number').before('<span class="M14_noneView"title="Ce sujet a reçu '+M14_contposts+' réponse"></span>');
}
else if (M14_contposts>40)
{
  $(this).find('.posts small').html('Réponses');
$(this).find('.posts span.number').before('<span class="M14_moreView"title="Ce sujet a reçu '+M14_contposts+' réponses"></span>');
}
else if (M14_contposts<40)
{
$(this).find('.posts small').html('Réponses');
$(this).find('.posts span.number').before('<span class="M14_lessView"title="Ce sujet a reçu '+M14_contposts+' réponses"></span>');
}});});

$(function(){
$('.forum-block').each(function(){
var M14_contviews=$(this).find('.views span.number').text();
if (M14_contviews==0)
{
  $(this).find('.views small').html('Vue');
$(this).find('.views span.number').before('<span class="M14_noneView"title="Ce sujet a été vu '+M14_contviews+' fois"></span>');
}
else if (M14_contviews<=200)
{
  $(this).find('.views small').html('Vues');
$(this).find('.views span.number').before('<span class="M14_lessView"title="Ce sujet a été vu '+M14_contviews+' fois"></span>');
}
else if (M14_contviews<500)
{
$(this).find('.views small').html('Vues');
$(this).find('.views span.number').before('<span class="M14_moreView"title="Ce sujet a été vu '+M14_contviews+' fois"></span>');
}
else if (M14_contviews>500)
{
  $(this).find('.views small').html('Vues');
$(this).find('.views span.number').before('<span id="M14_moreView"class="M14_moreView "title="Ce sujet a été vu '+M14_contviews+' fois"></span>');
}});});



Penses a cliquer sur le bouton Valider


Tu peux modifier l'apparence des curseurs dans la css(commentaires) ..

Et voilà mon ami:


Le rendu:
L'avatar s'affichera si tu l'as activé dans ton PA.



Le script modifié pour les nouveaux messages est sujets verrouillés:

Code:

$(function(){
$('#M14_EDGE.forumline').each(function(){
var M14_verrou=$(this).find('img[alt*="est verrouillé"]');
var notPost=$(this).find('img[alt="Pas de nouveaux messages"]');
var newPost=$(this).find('img[alt="Nouveaux messages"]');
//LES COULEURS
  //SUJETS VERROUILLES
var M14_verrouColor='red';
  //PAS DE NOUVEAU MESSAGES
var notPostColor='orange';
  //nouveaux messages
var newPostColor='green';
if(M14_verrou)
{
$('img[alt*="est verrouillé"]').closest('tr').find('.M14_icone img[class^="posticon"]').css('borderColor',M14_verrouColor);
}
if(notPost)
{
$('img[alt="Pas de nouveaux messages"]').closest('tr').find('.M14_icone img[class^="posticon"]').css('borderColor',notPostColor);
}
if(newPost)
{
$('img[alt="Nouveaux messages"]').closest('tr').find('.M14_icone img[class^="posticon"]').css('borderColor',newPostColor);
}
 
});});


C'est la perfection mon ami
Je te remercie beaucoup le rendu est très beau .
Bonne journée Phil !!!

De rien Franck ,

-Staff du Forum Milouze14- Hello  Ton problème est-il toujours d'actualité? Si ce n'est plus le cas et qu'il est résolu, merci de cliquer sur le bouton en haut de page. Pour toute information,merci de contacter un Membre du Staff

Juste une petit chose avant de fermé le sujet Philippe @Milouze14 ,
Dans ton exemple nous pouvons voir l'auteur du/des message(s) alors que de mon coter sa ne s'affiche pas .
Image : https://snag.gy/hgQ2SA.jpg

Edit : Une autre petite chose aussi , je me demandais si il serais possible de remplcer
les images sablier par une image de mon choix ? j'ai tenter de le faire mais semblerais que
j'y m'y prend pas de la bonne façon :

Code:

    .M14_lessView:after{width:31; height:33px; background:no-repeat; background-image:url("https://i.servimg.com/u/f84/16/67/19/10/nhl-lo10.png"); text-align:center; }

Hello Franck,
hum pour le pseudo tu as ceci dans ta feuille de style:

Code:


div.topictitle strong
{
display: none;
}


Ensuite pour le sablier, on utilise la bibliothèque awesome afin de pourvoir changer de couleur lorsque tu atteins les 500 messages dans le script .

Pour une image c'est impossible mon ami.

Code:

else if (M14_contviews>500)

D'ailleurs j'ai oublié de te donner le style a déposer dans la css:

Code:


/*AU DELA DE 500 VUES,ON CHANGE LA COULEUR EN ROUGE*/
#M14_moreView.M14_moreView:after {color: red;}


Tu peux changer les icônes de cette bibliothèque ici:

http://seehowsupport.com/font-awesome/#top

Je te remercie Philippe , passe une belle journée !!!