Ajouter un écart avec les boutons citer etc, et ligne d'infirmation entre chaque message

[Rokeur318]

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

Bonjour à tous !

Je me lance actuellement avec quelques amis dans l'aventure de créer un forum. Cependant, aucun de nous ne sait coder  

J'ai réussi à "bidouiller" certaines choses en retirant et déplaçant certaines choses qui me gênaient, mais impossible de tout faire juste en "bidouillant". Merci à ceux qui prendront le temps de m'aider ! Petite précision : mon forum est en phpbb3

Comment ajouter des écarts et des lignes entre les réponses dans un sujet, avec les boutons "citer", "éditer", "supprimer" et, d'autres informations complémentaires, etc, dedans ?

J'ai beau avoir regardé sur le forum, pris des codes, modifié le template et la feuille css, mais rien ne change. Mon forum reste le même... Je vous joins ce que j'ai actuellement, et ce que j'aimerais avoir.

Ce que j'ai:

Ce que je souhaite:

Bien sûr, la barre ultra noire n'est qu'une idée, si je peux en modifier la couleur, ce serait super !

Merci à ceux qui pourront m'aider !

[Toryudo]

Bonjour !

Alors, je ne sais pas quelles sont vos modifications dans le Template viewtopic_body, mais je peux vous donner le principe.
Vous l'avez peut-être déjà compris, le code qui correspond à tous les boutons "citer", "éditer", "supprimer" est le suivant :

Code:

<ul class="profile-icons">
  <li>{postrow.displayed.THANK_IMG}</li>
  <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
  <li>{postrow.displayed.QUOTE_IMG}</li>
  <li>{postrow.displayed.EDIT_IMG}</li>
  <li>{postrow.displayed.DELETE_IMG}</li>
  <li>{postrow.displayed.IP_IMG}</li>
  <li>{postrow.displayed.REPORT_IMG_NEW}</li>
</ul>

Le principe va donc être de déplacer ce code avant la ligne :

Code:

<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">

En déplaçant le code, on va sortir les boutons du "cadre" du post.
Il reste à encapsuler le code des boutons dans un div :

Code:

<div class="postbefore">
  <ul class="profile-icons">
    <li>{postrow.displayed.THANK_IMG}</li>
    <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
    <li>{postrow.displayed.QUOTE_IMG}</li>
    <li>{postrow.displayed.EDIT_IMG}</li>
    <li>{postrow.displayed.DELETE_IMG}</li>
    <li>{postrow.displayed.IP_IMG}</li>
    <li>{postrow.displayed.REPORT_IMG_NEW}</li>
  </ul>
</div>

On nomme le div avec une class "postbefore", ce qui nous permet ensuite de rajouter du CSS pour la mise en forme.
On met le fond en noir et on positionne les boutons à droite, ça ressemblera déjà mieux à votre rendu désiré :

Code:

.postbefore {
  background: #000;
  overflow: hidden;
}
.postbefore .profile-icons {
  float: right;
}

Et normalement, l'affichage est bon !

[Rokeur318]

Incroyable ! J'ai ma ligne noire et mes boutons dedans ! merci beaucoupToryudo ! Vous êtes un génie ! Qu'en est-il du second petit encadré que j'ai montrer sur la seconde image ? Le "jour et heure de poste et le nombre de mots" séparer de la zone du texte par une ligne blanche ? Comment avoir le nombre de mots, d'ailleurs ?

Merci beaucoup déjà pour m'avoir aidé à résoudre ce premier cas !

[Toryudo]

Alors, pour avoir aussi le bon rendu pour la date, avec la petite ligne blanche en dessous, vous pouvez ajouter ce CSS :

Code:

p.author {
  text-align: center;
  margin: 0 80px 8px 80px;
  border-bottom: 1px solid #FFF;
}

Par contre, afficher le nombre de mot, c'est un problème trop "complexe". Il y a beaucoup de moyens simples pour calculer un nombre de mots (par exemple, dire qu'après un espace, on ajoute un mot), mais rien de totalement satisfaisant, en tout cas à mes yeux. Il y a toujours un côté "approximatif" à cause de beaucoup de paramètres... ce n'est pas pour rien que sur internet, tous les compteurs donnent des résultats différents pour un seul et même texte.
Je ne peux pas offrir de résultat qui me satisfasse moi-même, alors je ne pourrai rien faire à ce propos !

[Rokeur318]

Magnifique ligne, merci beaucoup ! Je comprends pour le compteur de mots, alors je n'insisterai pas la dessus ! Petite précision, la ligne à un écart un peu trop important avec la barre noire "editer, citer, etc" ! Comment la remontée ? Si elle pouvait être unpeu plus haute, ce serait parfait ! D'ailleurs, comment remettre le nom du sujet, au moins, à la place de là où je voulais mettre le nombre de mots ?

Merci Toryudo !

[Toryudo]

Dans votre Template, vous avez ceci juste au-dessus de <p class="author"> :

Code:

<br /><br /><br />

Ce sont 3 retours à la ligne que vous ajoutez, c'est pour ça que la date est si basse. Vous pouvez en enlever un ou deux pour remonter la date, à votre convenance ! Et pour le nom du sujet, il s'agit de la variable {postrow.displayed.POST_SUBJECT} que vous pouvez replacer où vous voulez pour le faire apparaitre à nouveau. Si c'est après la date, alors il suffit de le mettre juste après {postrow.displayed.POST_DATE_NEW} !

[Rokeur318]

C'est tout bon ! Ce sujet résolu ! Merci infiniment Toryudo, vous êtes un génie !