Insérer l'avatar dans un template modifié

[Undra]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://undra.forumactif.com/

Description du problème

Bonjour,

J'ai utilisé, pour les catégories du forum, un code en libre-service trouvé sur le net. J'ai donc modifié tout le Template Index-Box. Ce qui me dérange, c'est que l'affichage des avatars n'est pas prévu dans ce code…

Voici le screen de l'affichage actuel des catégories :

Spoiler:

Se trouverait-il quelqu'un pour m'aider à insérer l'avatar dans ce template ?

Code:

<table width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <span class="gensmall">{LAST_VISIT_DATE}<br />
    {CURRENT_TIME}<br />
    </span>
    <!-- END switch_user_logged_in -->
    <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
    </td>
    <td class="gensmall" align="right" valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
    <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
    <!-- END switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
    </td>
    </tr>
    </table>
 
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
    <!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
    
    <!-- BEGIN forumrow -->
<div class="FRM"><div class="tleFRM"><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div id="descFRM"><div class="nbFRM">{catrow.forumrow.TOPICS} sujets . {catrow.forumrow.POSTS} messages</div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br />"));});</script>{catrow.forumrow.FORUM_DESC}</div><div class="triFRM"></div><div class="lmsgFRM"><span style="display:inline-block; vertical-align:middle; height:125px;"></span><span style="display:inline-block; vertical-align:middle;">{catrow.forumrow.LAST_POST}</span></div></div>
    <!-- END forumrow -->
 
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
 
    <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->

Et mon CSS :

Code:

/* BLOC TITRE CATEGORIE */
.tleCAT {margin:10px auto; width:680px; padding:0px 0; text-align:center; background-image:url(https://i.servimg.com/u/f68/19/91/54/10/en-tzo11.png);}
/* TITRE CATEGORIE */
.tleCAT h2 {margin:0 auto; font-size:45px; letter-spacing:2px; font-weight:lighter; font-family:Romanesco; color:white; text-shadow:1px 1px 0px rgba(0,0,0,0.3);}
/* BLOC FORUM */
.FRM {margin:0 auto 10px; width:800px; height:165px; overflow:hidden; text-align:center; font-family:Arial; box-shadow:0 0 10px #403932;
  background-image:url(https://i.servimg.com/u/f68/19/91/54/10/fond_d14.png);}
/* BLOC ICÔNES / TITRE FORUM */
.tleFRM {margin:auto; width:800px; height:30px; overflow:hidden; font-size:30px; text-align:right;}
/* ICÔNES FORUMS */
.imgFRM {float:left; width:75px; height:20px; padding-top:5px; padding-left:10px;}
/* TITRE FORUM */
.tleFRM {padding-top:-5px;}
.tleFRM a {font-family:Italianno; color:white !important; text-shadow:1px 1px 0px rgba(0,0,0,0.2); padding-right:20px; transition:all 1s linear;
  -webkit-transition:all 1s linear;}
.tleFRM a:hover {letter-spacing:5px;}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {position:absolute; z-index:4; margin-left:15px; margin-top:40px; width:145px; height:30px; padding:6px 5px 7px 5px; overflow:hidden;
  text-align:center; font-size:25px; font-family:Italianno; background:rgba(0,0,0,0.4); color:rgba(250,250,250,0.5); box-shadow:0 0 15px #b8a89a;}
/* BLOC SOUS-FORUMS */
.sfFRM {position:absolute; z-index:5; margin-top:15px; margin-left:15px; width:145px; height:0; padding:0 5px; overflow:hidden; font-size:10px; text-align:justify;
  background:#222; box-shadow:0 0 15px #b8a89a; transition:all .75s ease; -webkit-transition:all .75s ease;}
.sfFRM:hover {overflow-y:auto;}
.FRM:hover .sfFRM {height:85px; padding:5px;}
/* LIENS SOUS-FORUMS */
.sfFRM a {color:#191919 !important;}
/* DESCRIPTION FORUM */
#descFRM {display:inline-block; vertical-align:top; width:615px; height:125px; overflow:hidden; background:rgba(50,50,50,0.6); font-size:11px; text-align:justify;}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {position:absolute; z-index:2; width:615px; height:125px;}
/* CONTENU DESCRIPTION FORUM */
.descFRM {position:absolute; z-index:3; margin-top:15px; margin-left:185px; width:325px; height:85px; padding:5px; overflow-y:auto; font-size:10px;
  background:rgba(0,0,0,0.6); color:#e8e8e8; border-radius:5px; box-shadow:0 0 5px #b8a89a; opacity:0; transition:opacity .85s ease; -webkit-transition:opacity .85s ease;}
.FRM:hover .descFRM {opacity:1;}
/* TRIANGLE DERNIER MESSAGE FORUM */
.triFRM {position:absolute; z-index:3; margin-top:-125px; margin-left:560px; width:0; height:0; border-style:solid; border-width:0 65px 125px 0;
  border-color:transparent;}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {display:inline-block; vertical-align:top; width:150px; height:125px; padding:0 10px; overflow:hidden; text-align:right; font-size:12px;
  text-transform:uppercase; font-family:calibri; line-height:26px; background:rgba(50,50,50,0.6); color:#ababab;}
.lmsgFRM img {padding-left:5px;}
/* COULEUR TITRE SUJET DERNIER MESSAGE FORUM */
.lmsgFRM a {color:# !important; font-family:Romanesco; text-transform:none; font-size:30px;}

Dans l'idéal, j'aimerais que l'avatar s'insère entre l'image et le dernier message…

Nota Bene : J'ai déjà coché "oui" à "afficher les avatars dans la colonne des derniers messages".

Merci d'avance !
Undra

[Invité]

Hello Undra,
il te manque la variable qui gère les Avatars:

Code:

 <!-- BEGIN avatar --><span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span><!-- END avatar -->

Pour ton template modifié, il serait préférable de la placer après ce code html:

Code:

<span style="display:inline-block; vertical-align:middle;">  
    {catrow.forumrow.LAST_POST}</span>  </div>

La totalité du template:

Code:

<table width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <span class="gensmall">{LAST_VISIT_DATE}<br />
    {CURRENT_TIME}<br />
    </span>
    <!-- END switch_user_logged_in -->
    <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
    </td>
    <td class="gensmall" align="right" valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
    <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
    <!-- END switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
    </td>
    </tr>
    </table>
 
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
    <!-- END tablehead -->
 
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    
    <!-- BEGIN forumrow -->
<div class="FRM"><div class="tleFRM"><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div id="descFRM"><div class="nbFRM">{catrow.forumrow.TOPICS} sujets . {catrow.forumrow.POSTS} messages</div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br />"));});</script>{catrow.forumrow.FORUM_DESC}</div><div class="triFRM"></div><div class="lmsgFRM"><span style="display:inline-block; vertical-align:middle; height:125px;"></span>

  <span style="display:inline-block; vertical-align:middle;">  
    {catrow.forumrow.LAST_POST}</span>  </div>
   <!-- BEGIN avatar --><span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span><!-- END avatar -->
</div>
    <!-- END forumrow -->
 
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
 
    <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->

Ensuite, tu peux ajouter ce style qui te permettra de bien placer l'avatar:

Code:

.FRM span.lastpost-avatar
{
float:none !important;
position: absolute;
margin-left: -200px;
  margin-top: 6px;
}

a++

[Undra]

Salut Milouze14 !

Merci infiniment pour ton aide, c'est adorable ! Ton code fonctionne parfaitement, j'ai juste rajouté un style ".lastpost-avatar img" pour modifier l'apparence de l'avatar et tout est nickel

Merci encore !!!