Centrer l'image des nouveaux messages et la cellule des derniers messages

[Lilith Anguis]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : non défini
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://hogwartsfamily.forumactif.org/

Description du problème

Bonsoir,

Je viens vers vous parce que j'aimerais pouvoir centrer l'image des nouveaux messages sur la colonne de gauche de mon forum, ainsi que la cellule des derniers messages colonne de droite. J'ai bien réussi à faire quelque chose mais ma modification est trop globale. Et je ne sais pas où je dois ajouter une div, ni dans quel template l'ajouter pour modifier spécifiquement ces deux colonnes. Je m'arrache les cheveux avec depuis des semaines, et je n'arrive pas à trouver un topic ou il en est question non plus XD

Ce que j'ai ajouté au css et qui ne conviens pas, car cela est trop global et impact le forum dans sa globalité (centrage de l'avatar et de l'affichage des sujets et des messages entre autre):

Code:

td.row3 {vertical-align: middle !important;}
td.row1 {vertical-align: middle !important;}

Merci d'avance pour votre aide ♥

[GoichonTurf]

Bonjour essaye ce code java sur index et forum et sous forum

Code:

/***** CODIGO IMPLEMENTADO POR SR.SMITH PARA EL FORO ESPAÑOL DE AYUDA DE FORO ACTIVO ****/
$(document).ready(function(){
 for (var i=0; i<$("ul.topiclist.forums li.row").length; i++) {
 var alturad= $("ul.topiclist.forums li.row:eq(" + i + ") dl").height();   
 var altural= $("ul.topiclist.forums li.row:eq(" + i + ") dl.icon dd.lastpost span").height();
 var alturat= $("ul.topiclist.forums li.row:eq(" + i + ") dl.icon dd.topics").height();
 if (((alturad)-(altural))/2 >= 0){
 $("ul.topiclist.forums li.row:eq(" + i + ") dl.icon dd.lastpost").css ({"margin-top": (((alturad)-(altural))/2),"margin-bottom": (((alturad)-(altural))/2)});
 $("ul.topiclist.forums li.row:eq(" + i + ") dl.icon dd.topics").css ({"margin-top": ((alturad-(alturat))/2),"margin-bottom": ((alturad-(alturat))/2)});
 $("ul.topiclist.forums li.row:eq(" + i + ") dl.icon dd.posts").css ({"margin-top": ((alturad-(alturat))/2),"margin-bottom": ((alturad-(alturat))/2)});
 }
 }
});

amicalement serge

[Lilith Anguis]

Tout d'abord merci beaucoup de te pencher sur son mon cas. Ça ne semble pas fonctionner sur mon forum

Ensuite pour plus de précision, je vais réaménager certains sous forum en fait et ça donne ceci :

Spoiler:

Et il faut avouer qu’esthétiquement c'est plutôt moche d'avoir l'image/les infos en haut comme ça^^

[MlleAlys]

Bonjour,
Pour un code plus précis, il faudrait effectivement passer par le template, soit index_box (affichage des catégories). Pourriez-vous fournir le votre pour que l'on puisse vous aider ?

[Lilith Anguis]

Bonsoir
Ah alors j'étais pas complètement à côté de la plaque, c'est bon à savoir

Voilà le code de mon index_box . Merci d'avance pour votre aide !

Code:

<table width="100%" border="0" cellspacing="1" 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="TitreCategorie">{catrow.tablehead.L_FORUM}</div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;&nbsp;</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif" align="center" /></div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
    <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
              <center>  <span class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
   
                </span></center>
            </h{catrow.forumrow.LEVEL}></td></tr></tbody></table>
                  <span class="genmed"><center><div class="description">{catrow.forumrow.FORUM_DESC}</div></center></span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
   
      <td class="row3 over" align="center" valign="middle" height="50">
         
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
<div class="lastpost">{catrow.forumrow.TOPICS} rapports avec {catrow.forumrow.POSTS} parchemins
  <br /><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

[Invité]

Hello Lilith Anguis et MlleAlys ,

en passant tu peux supprimer le script donné par GoichonTurf qui fonctionne que pour la version phpbb3:

https://forum.forumactif.com/t388851-centrer-l-image-des-nouveaux-messages-et-la-cellule-des-derniers-messages#3265120

a++

[MlleAlys]

Hello,
Tu peux essayer avec ce template :

Code:

<table width="100%" border="0" cellspacing="1" 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="TitreCategorie">{catrow.tablehead.L_FORUM}</div>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">&nbsp;&nbsp;</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif" align="center" /></div></th>
  </tr>
  <!-- END tablehead -->

  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->

  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->

      <td class="{catrow.forumrow.INC_CLASS}" align="center" style="vertical-align:middle;">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>

      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <table width="100%">
            <tr>
              <td>
                  <h{catrow.forumrow.LEVEL} class="hierarchy">
                    <center>
                        <span class="forumlink">
                          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                        </span>
                    </center>
                  </h{catrow.forumrow.LEVEL}>
              </td>
            </tr>
        </table>
        <span class="genmed">
            <center>
              <div class="description">{catrow.forumrow.FORUM_DESC}</div>
            </center>
        </span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
 
      <td class="row3 over" align="center" height="50" style="vertical-align:middle;">
       
        <!-- BEGIN avatar -->
        <div style="width: 200px;"></div>
        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
        <!-- END avatar -->

        <div class="lastpost">
            {catrow.forumrow.TOPICS} rapports avec {catrow.forumrow.POSTS} parchemins
            <br/><span class="gensmall">{catrow.forumrow.LAST_POST}</span>
        </div>
      </td>

  </tr>
  <!-- END forumrow -->

  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->

  <!-- BEGIN tablefoot -->
</table>
<img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->

<!-- END catrow -->

J'ai juste modifier valign="center" en style="vertical-align:center;" dans les balises des cellules concernées, ça devrait fonctionner.

[Lilith Anguis]

Hello

J'ai retiré le js, merci milouze je l'avais en effet laissé ^^
Merci beaucoup MlleAlys ! Ça fonctionne et c'est exactement ce que je cherchais, merci beaucoup ♥