Catégorie, sous catégorie, forum... : Mettre le nombre de sujets et de messages dans le même encadrer que les derniers messages

[Rokeur318]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 12/11/2023
Lien du forum : https://dbrp.forumactif.com/

Description du problème

Bonjour !

Je me tourne vers vous pour avoir votre aide en ce qui concerne un détail qui me chiffonne. J'aimerai beaucoup pouvoir mettre le nombre de messages et de sujets dans le même encadrer que les derniers messages, dans les catégories, les sous catégories, et ainsi de suite ! (Pas pour les sujets simples) J'ai beau avoir regardé, les sujets traitent l'un ou l'autre, mais jamais dans ce sens. Impossible de tomber sur ce que je souhaite réellement.

En rouge, ce que je souhaite:

[MlleAlys]

Bonjour,

Pour supprimer les colonnes "sujets" et "messages" des catégories, et insérer leur contenu dans la colonne du dernier message :
- Rendez-vous dans affichage > templates > général ;
- éditez le template "page d'accueil - affichage des catégories" ;
- remplacez tout son contenu par celui-ci :

Code:

<ul class="linklist">
 <!-- BEGIN switch_user_logged_in -->
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>&nbsp;&bull;&nbsp;</li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>&nbsp;&bull;&nbsp;</li>
 <!-- END switch_user_logged_in -->
 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 <!-- BEGIN switch_user_logged_in -->
 <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
 <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="forabg">
 <div class="inner"><span class="corners-top"><span></span></span>
 <ul class="topiclist">
 <li class="header">
 <dl class="icon">
 <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
 <dd class="lastpost"><span>{L_LASTPOST}</span></dd>
 </dl>
 </li>
 </ul>
 <ul class="topiclist forums">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <li class="row">
 <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
 <dd class="dterm">
 <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
 <br />
 {catrow.forumrow.FORUM_DESC}

 <!-- 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}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </div>
 </dd>
 <dd class="lastpost">
                                                  <span class="stats">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</span>
 <!-- BEGIN ads -->
 <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" loading="lazy" /></span>
                                <span class="AD_LastInfos">
                                    <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
 </span>
                            <!-- END ads -->
 
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

 <span>
 <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->
 {catrow.forumrow.USER_LAST_POST}
 </span>
 </dd>
 </dl>
 </li>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </ul>

 <span class="corners-bottom"><span></span></span></div>
 </div>
 <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_forum_images -->
<div class="forabg">
 <div class="inner"><span class="corners-top"><span></span></span>
 <ul class="topiclist">
 <li class="header">
 <dl class="icon">
 <dd class="dterm"><div class="table-title"><h2>{switch_forum_images.TITLE}</h2></div></dd>
 </dl>
 </li>
 </ul>
 <div class="container-imgs-list" style="max-height: 500px" id="imageList">
 {switch_forum_images.SCRIPTS}
 </div>
 </div>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_images -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
 <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>&nbsp;&bull;&nbsp;</li>
 <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>&nbsp;&bull;&nbsp;</li>
 <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
 <!-- BEGIN switch_delete_cookies -->
 <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
 <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

(j'ai supprimé les lignes 20 et 21 pour supprimer les en-têtes des colonnes, et déplacé le contenu des lignes 47 et 48 sous la ligne 49, donc dans la colonne suivante)

- enregistrez le template
- publiez le template pour l'afficher sur le forum.
- actualisez votre forum pour voir le résultat.

[Rokeur318]

Le rendu est impeccable ! Merci MlleAlys ! Y'a-t-il un moyen de fermer le cadre, et de le déplacer vers la droite ? Par exemple :

Ce que je souhaite:

[MlleAlys]

Dans affichage > couleurs > onglet feuilel de style css, copiez/collez le code suivant :

Code:

.forabg ul.topiclist dt, .forabg ul.topiclist dd.dterm {
  width: 75%;
}

[Rokeur318]

Merci beaucoup pour ce code ! J'essaye de jouer avec le 75%, je peux le déplacer maximum à 77% pour qu'il se rapproche du bord, mais passer 77, il se décale complètement à gauche... Pourtant le code fait bien ce que je veux...

[MlleAlys]

Le bloc du dernier message a une largeur fixe, lorsque l'espace restant n'est plus suffisant pour le contenir, ce bloc revient à la ligne.
Vous pouvez maîtriser la largeur du bloc du dernier message en ajoutant ce code :

Code:

.forabg dd.lastpost {
  width: 15%;
}

Et vous pourrez alors agrandir encore un peu le bloc de gauche avec le code précédent sans que le dernier message ne revienne à la ligne tout de suite.

[Rokeur318]

MlleAlys, vous êtes magicienne... Merci beaucoup ! Puis-je vous demandez une dernière faveur ? Avez-vous un petit code pour centrer autant verticalement que horizontalement les informations présentes dedans , et fermer la ligne noire séparant l'image de la catégorie et les informations ?

[MlleAlys]

Complétez le code précédent avec border: 0; ce qui donne :

Code:

.forabg dd.lastpost {
  width: 15%;
  border: 0;
}

Puis ajoutez les codes suivants :

Code:

.forabg dl.icon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.forabg dd.dterm {
  border-right: 1px solid black;
}

[Rokeur318]

... Le rendu est encore meilleur que ce que j'avais en tête ! MlleAlys, je ne sais pas comment vous remerciez... Ce sujet est résolu ! Merci infiniment !