[RESOLU] Personnalisation d'un LS Catégorie [posté par Elysia]

Bonjour à vous tous Utopia !

Voilà, je viens vers vous pour la personnalisation d'un LS que j'ai déjà commencé à faire. Mais il y a une balise qui me bloque et je n'arrive simplement pas à trouver une solution pour régler mon problème alors je me dis que peut être certains ici pourrait m'aider !

Le tuto c'est celui là >> www

Le lien de mon forum >> www

Et bien sur ma demande : Vous voyez la petite case dans la description des forums ? A gauche il y l'emplacement d'une image qu'on peut mettre. J'aimerais conserver ceci mais au lieu de placer une image, j'aimerai qu'on y voit l'avatar du dernier posteur. J'ai cherché la balise et je suppose que c'est celle ci ?

Code:

<!-- BEGIN avatar -->
                      {catrow.forumrow.avatar.LAST_POST_AVATAR}
                  <!-- END avatar -->


Mais du coup je n'ai aucune idée de comment faire... J'ai essayé d'intégrer naïvement la balise directement dans la description en pensant que cela allait faire comme la balise USERNAME mais en fait... pas du tout xD

Donc j'aimerais savoir si cela est faisable et si oui, comment faire...

Merci d'avance pour toute l'aide que vous pourrez m'apporter et en éclairant ma lanterne qui reste désespérément éteinte sur ce sujet. xD

Tout les poutoux du monde !

Bonjour/bonsoir,

J'ai tenté de modifier de sorte à faire ce que vous souhaitez, voici la partie CSS modifié :

Code:

/********************* DEBUT CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/

/* _____ Reglages de base _____ */

a { text-decoration: none; }
a:hover { text-decoration: none !important; }


/* _____ Onglets _____ */

#conteneur_onglets_cate
{
  width: 840px;;
  height: 50px;
  line-height: 50px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 30px;
  overflow: visible;
  background-color: #edeff7;
  box-shadow: 0 5px 5px #9a9faf;
  display: none;
  text-align: center;
  color: #9a9faf;
}
#conteneur_onglets_cate div
{
  display: inline-block;
  color: #8a85ac;
  text-shadow: 0px 0px 3px #fff;
  font-size: 18px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: 'Times New Roman', serif;
  transition: all ease 1s;
}
#conteneur_onglets_cate div:hover
{
  color: rgba(213,215,242, 0.5);
  text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
  transition: all ease 1s;
}


/* _____ Fonds categories en images _____ */

.cat_haut
{
  background: url('https://nsm08.casimages.com/img/2015/04/15//15041510472119468513174440.png') top center no-repeat;
  width: 852px;
  height: 20px;
  margin: auto; /*Permet de centrer la partie du corps*/
}
.cat_milieu
{
  background: url('https://nsm08.casimages.com/img/2015/04/15//15041510494419468513174442.png') center repeat-y;
  width: 800px;
  margin: auto;
  padding: 0 26px 0 26px;
}

.cat_milieu .forumline {
  border: 0 solid;
}

.cat_bas
{
  background: url('https://nsm08.casimages.com/img/2015/04/15//15041510472019468513174439.png') bottom center no-repeat;
  width: 852px;
  height: 29px;
  margin: auto;
}


/* _____ Mise en forme titre de la catégorie _____ */

.secondarytitle
{
  width: 800px;
  height 80px;
  line-height: 80px;
  background : url('https://nsm08.casimages.com/img/2015/04/18//15041802332319468513180672.png') repeat; /* image fond titre categorie */
  border-bottom: 9px solid #fff;
}
.secondarytitle h2
{
  color: rgba(213,215,242, 0.5);
  font-size: 40px;
  text-transform: uppercase;
  font-weight: normal;
  font-family: 'Times New Roman', serif;
  text-shadow: 1px 4px 5px #d2d5e1, 0 0 0 #000, 1px 4px 6px #d2d5e1, 0 0 1px #7d849c;
}
/* reglages pour selection */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }


/* _____ Mise en forme titre du forum _____ */

.forums
{
  width: 800px;
  padding: 0 10px 0 10px;
  background: #fff;
}
.forumlink_block
{
  height: 25px;
  line-height: 25px;
  background: #edeff8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.forumlink a
{
  font-size: 20px;
  color: rgba(213,215,242, 0.5);
  font-weight: normal;
  font-family: 'Times New Roman', serif;
  text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
  display: inline-block;
  position: relative;
  left: 90px;
  top: 10px;
}

.forum_stats {
  font-size: 11px;
  float: right;
  margin: 5px 28px -5px 0;
  color: #b8bdd3;
  font-style: italic;
}


/* _____ Mise en forme forum _____ */

.forum_ligne2
{
  background: #f7f7f9;
  max-height: 100px;
}

/* Description (image + textes + liens) */

.forum_description /* conteneur */
{
  margin: 0;
  padding: 0;
  width: 80%;
  padding: 5px;
  height: 90px;
  overflow: hidden;
}

.descr_img img /* image perso */
{
  width: 75px;
  height: 90px;
}

.descr_texte /* colonne texte */, .descr_liens /* colonne liens */
{
  padding-left: 5px;
  display: inline-block;
}
.descr_texte .descr_texte_contenu /* conteneur texte */
{
  padding: 2px;
  width: 410px;
  background: #fff;
  margin: 0;
}
.descr_texte .descr_texte_contenu div /* texte */
{
  padding: 5px;
  border: solid 1px #ced2de;
  height: 74px;
  overflow: auto;
  font-size: 16px;
  color: #b3b3b3;
  text-align: justify;
}
.d_texte_special /* texte special du debut */
{
  font-size: 18px;
  font-weight: bold;
}
.d_texte_special::after /* mettre point apres texte special */
{
  content: " . ";
  font-size: 20px;
  font-weight: 900;
}

.descr_liens div /* conteneur liens persos */
{
  background: #fff;
  width: 98px;
  height: 90px;
  text-align: center;
  line-height: 23px;
}
.descr_liens div a /* liens persos */
{
  display: inline-block;
  height: 25%;
  font-size: 16px;
  color: #b3b3b3;
}
.descr_liens div a::before /* mettre point avant lien perso */
{
  content: ". ";
  font-weight: 700;
}


/* Dernier message du forum */

.forum_dernmess {
  margin: 0;
  padding: 5px 5px 0 0;
  width: 20%;
  height: 90px;
}

.forum_dernmess img {
  width: 168px;
  height: 45px;
}


.dernmess_contenu
{
  width: 100%;
  height: 40px;
  background: #fff;
  padding-top: 5px;
}
.dernmess_contenu img
{
  display: none;
}
.dernmess_contenu .gensmall, .dernmess_contenu .gensmall a
{
  line-height: 0.9em;
  font-size: 13px;
  color: #b3b3b3;
}
.dernmess_contenu .gensmall a
{
  color: #838cb2;
}


/* _____ Marge interieure bas categories _____ */

.cat_marge_bas
{
  width: 800px;
  height: 10px;
  margin: auto;
  background: #fff;
}

/** Block qui gère l'avatar de l'utilisateur **/
.avatar_poster{
  display: inline-block;
  width: 75px;
  height: 90px;
}

.avatar_poster img{
  width: 75px;
  height: 90px;
  object-fit: cover;
}

/** Block qui comporte tous les éléments de la description **/
.information{
  display: inline-block;
  max-height: 100px;
  margin-bottom: -12px;
  vertical-align: top;
}
/********************* FIN CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/

La partie à mettre en description des forums :

Code:

<div class="information">
        
   <div class="descr_texte">
         
      <div class="descr_texte_contenu">
            
         <div>
                <span class="d_texte_special">Lorem Ipsum</span>Aliquam quis nibh sed augue malesuada hendrerit. Maecenas ultrices scelerisque lectus nec molestie. Nulla suscipit, nibh sit amet viverra adipiscing, lacus eros dapibus magna, id mattis sapien tortor ac odio. Sed id libero porttitor, laoreet nisl eu, mattis nisi. Quisque lorem odio, accumsan et ipsum ac, vehicula commodo neque. Integer tempus nulla eget quam molestie, quis sodales diam rutrum. Vivamus dapibus lacus a magna tempor, id fringilla ligula ornare. Nunc consequat nibh orci, in pulvinar augue ascelerisque at. Duis volutpat pulvinar auctor. Vivamus nec augue mattis, feugiat turpis vitae, ultrices dui. Maecenas blandit vestibulum lorem, eget congue mi iaculis vel. Aliquam non molestie lacus. Curabitur sed enim diam. Morbi sed iaculis orci. Nunc et orci non arcu iaculis pellentesque.   
         </div>
            
      </div>
         
   </div>
        
   <div class="descr_liens">
       
      <div>
             <a href="URL DU LIEN">Lien 1</a><br /> <a href="URL DU LIEN">Lien 2</a><br /> <a href="URL DU LIEN">Lien 3</a><br /> <a href="URL DU LIEN">Lien 4</a><br /> 
      </div>
         
   </div>
</div>

Surement la partie que j'ai le + modifié, n'étant pas trop fan du table.


La partie du template index.box :

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>

<div id="conteneur_onglets_cate">
  <div class="onglet_cate">Catégorie 1</div> •
  <div class="onglet_cate">Catégorie 2</div> •
  <div class="onglet_cate">Catégorie 3</div> •
  <div class="onglet_cate">Catégorie 4</div> •
  <div class="onglet_cate">Catégorie 5</div>
</div>
 
<div id="conteneur_cate">
 
<!-- BEGIN catrow -->

<!-- BEGIN tablehead -->
<div class="categorie">
 
<table border="0" cellpadding="0" cellspacing="0" cellmargin="0" style="width:auto; margin: auto;"><tr><td>
 
  <div class="cat_haut"></div><div class="cat_milieu">
  <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" cellmargin="0">
   
  <tr>
    <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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"> </td>
  </tr>
<!-- END cathead -->
 
<!-- BEGIN forumrow -->
<div class="cat_milieu"><table class="forums" border-spacing="0" border="0" cellpadding="0" cellspacing="0" cellmargin="0" valign="middle"><tr><td>

  <tr class="forum_ligne1">
      <td border="0" cellpadding="0" cellspacing="0" cellmargin="0" colspan="2" nowrap="nowrap" width="100%" class="forumlink_block">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span>
            <span class="forum_stats">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets</span>
      </td>
  </tr>
   
  <tr class="forum_ligne2">
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="forum_description" valign="top">
        <div class="avatar_poster">
          <!-- BEGIN avatar -->
          {catrow.forumrow.avatar.LAST_POST_AVATAR}
          <!-- END avatar -->
        </div>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      </td>
      <td class="forum_dernmess" align="center" valign="top">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
        <div class="dernmess_contenu"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td>
  </tr>
   
  </td></tr></table></div>
<!-- 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 -->
    <div class="cat_milieu"><div class="cat_marge_bas"></div>
   
    </div>
    </table>
 
    <div class="cat_bas"></div>
 
  <img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->
</div>
 
<!-- END catrow -->
</div>

Si ton template était modifié (comme j'ai repris celui du LS), voici les lignes à modifier :

Code:

<td class="forum_description" valign="top">
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      </td>

par :

Code:

<td class="forum_description" valign="top">
        <div class="avatar_poster">
          <!-- BEGIN avatar -->
          {catrow.forumrow.avatar.LAST_POST_AVATAR}
          <!-- END avatar -->
        </div>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      </td>

Il ne faut pas oublier de cocher "Oui" pour " Afficher les avatars dans la colonne "Derniers messages"" dans Affichage > Page d'accueil > Structure et hiérarchie.


Pour les forums où il n'y a donc pas encore de messages et donc pas encore de derniers auteurs, avec ce que j'ai fais, tu auras juste un espace de même taille qu'un avatar qui serait normalement présent. Si tu veux mettre une image par défaut, soit tu ajoutes une image en background à la classe "avatar_poster" mais ça risque de ne pas rendre super avec les avatars ayant une transparence, soit tu passes par Javascript où tu détectes si la div.avatar_poster possède une image ou non, et si ce n'est pas le cas alors tu en ajoutes une avec. Je te laisse faire pour ça sauf si tu souhaites qu'on voit ça ensemble.

J'ai pas trop donné d'explications car c'est assez basique comme modification mais en cas de problème / questions n'hésite pas !

D'accord !

Alors du coup, j'ai tous mis en place en prenant dans le CSS que ce que vous avez rajouté (les deux derniers points c'est ça ?)

Du coup, j'ai fait comme vous avez dit, remplacer dans le template ce qu'il fallait, et la description dans les forums aussi. Et Miracle ! \o/ Cela marche !

Mais j'ai un souci avec les liens du coup. Il ne me les affiche plus !

Spoiler:

Pour le reste, cela ne me dérange pas qu'il y ai un vide si il n'y as pas encore de message, c'est déjà super de m'avoir aidé sur ce point !

Merci de votre aide ! Et si du coup on peut regarder juste le problème des liens.

J'ignore si c'est à cause de ça mais enlevez les commentaires au cas où situés entre les sélecteurs pour celui-ci :

Code:

.descr_texte /* colonne texte */, .descr_liens /* colonne liens */
{
  padding-left: 5px;
  display: inline-block;
}

Il interprète surement mal et n'effectue pas le display:inline-block qui provoque le "non-affichage" des liens.
Si ce n'est pas ça, je regarderais en détail demain mais c'est belle et bien un soucis de display, j'ai pu tester directement depuis votre forum avec la console de mon navigateur.

Alors, je sais pas pourquoi xD Mais j'ai enlevé et remis les commentaires et maintenant, avec les commentaires cela fonctionne. Donc je ne vais plus toucher à rien ! XD Merci à vous pour votre aide inestimable !