Prévisualisation qui ne reflète pas le sujet posté

[haruhito]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Opera, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis début mai environ, depuis la "création" de ce forum.
Lien du forum : https://bloomintome.forumactif.com/

Description du problème

Bonjour à tous !

Aujourd'hui je viens vers vous pour un problème qui me fait m'arracher les cheveux. En effet, lorsque l'on prévisualise un message avant de le poster, ce que l'on voit ne reflète pas ce qui va apparaître une fois que c'est posté. Je suppose que c'est un souci de code, logiquement, mais je n'arrive pas du tout à trouver la source du souci, et la plupart des codes sont d'anciens codes d'une amie, ce qui explique que je cherche à tâton.
Le CSS a été modifié, les templates qui ont été touchées concernent uniquement celles qui sont dans "Général", une seule dans "Profil" (profile_view_body), et celle de posting_preview mais uniquement pour changer le fond de la page de prévisualisation.

Un des multiples exemples, voici ce que la prévisualisation montre :
https://i.imgur.com/ZJDCNp3.png

et voici ce que le sujet montre :
https://i.imgur.com/hRPxCsr.png

Je vous remercie d'avance de votre aide !

[Oka.mi]

Bonjour,

Je vois que chez vous, le .postbody est remplacé par le .PPOST dans l'affichage d'un message une fois posté.
Or le postbody, qui est par défaut dans plein d'endroits dont la prévisualisation, est le suivant

Code:

.postbody {
    color: #737373;
    font-size: 14px;
    line-height: 18px;
}

Tandis que le .PPOST indique un font-size de 11px, ce qui explique la différence avant et après avoir posté.

Pour que tout s'affiche de manière uniforme, vous avez trois options :

1. soit remplacer tous les "PPOST" par "postbody" (nécessite de modifier plusieurs templates)
   
2. soit mettre le font-size du postbody sur 11px aussi (nécessite de modifier uniquement le css)
   
3. soit aller dans le template de la prévisualisation posting_preview (situé dans "Poster & Messages privés"), et remplacer
   

   Code:

   <div class="postbody">{MESSAGE}</div>

   par
   

   Code:

   <div class="PPOST">{MESSAGE}</div>

   
   

[haruhito]

Bonjour !

Tout d'abord, merci de votre réponse si rapide !

J'ai essayé la seconde option ainsi que la troisième (qui me semblait les plus simples). (Je n'ai pas tenté la première encore.)
Avec lla troisième le code de "preview" que j'ai pour que le fond soit de la même couleur du post, ne fonctionne qu'à moitié. J'ai donc opté pour la seconde, en changeant le font-size et le line-height, et cela semble marcher ! Jai regardé sur d'autres Prévisualisation autre que ce poste, et ça m'a l'air tout bon pour l'instant. Merci énormément pour vous aide, c'était tout bête en réalité et je n'y avais pas pensé ! Merci !

Juste afin que vous sachiez ce que cela donnait :
Avec la troisième option, tout est cadré mais problème de fond + ligne blanche sur les côtés du forum : https://i.imgur.com/C1bVeoV.png

Avec la deuxième option, le font size va mieux mais les deux cadres ne sont pas alignés correctement : https://i.imgur.com/vD6fFtb.png (avant changement du line-height)

J'ai une seconde question qui est également un problème de code et de prévisualisation, donc je pense que je peux demander ici ? Si c'est nécessaire, j'ouvrirais un nouveau post.
Comme vous pouvez le voir dans les screens, il y a des bandes blanches de chaque côté du forum à chaque fois que l'on prévisualise, et je n'arrive pas à mettre la main dessus. Je me suis dit qu'il devait s'agir d'une erreur dans les dimensions, un ou deux pixels de trop, mais rien n'y fait.

Merci d'avance de votre aide à nouveau !

[Oka.mi]

En fait, les trois options fonctionnent, vous avez juste à choisir selon ce qui est le plus simple pour vous et ce qui vous arrange pour l'organisation de votre css, mais en effet, la première est plus longue à faire.

Les problèmes d'affichage que vous signalez sont dues au css, qui peut être réadapté si quelque chose ne s'affiche pas comme vous le souhaitez.

Avec la troisième option, tout est cadré mais problème de fond + ligne blanche sur les côtés du forum : https://i.imgur.com/C1bVeoV.png

Ici, le fait que le post soit aligné à gauche, c'est dû au css de .PPOST, qui précise une largeur de 71%. Naturellement, il n'y aura que 71% de la largeur du forumline qui sera occupée.

Quant à la ligne blanche sur le côté c'est lié au forumline; c'est la même partout, elle est toujours là, c'est juste qu'on y fait moins attention quand il n'y a pas de gros espace comme ici.

Maintenant, vu que vous avez créé un code spécifiquement pour la prévisualisation, je vous propose de fusionner .postbody et .preview.
Dans votre template posting_preview, mettez :

Code:

<div class="preview">{MESSAGE}</div>

Dans le CSS :

Code:

.preview {
    background: #F3F3F3;
    font-size: 11px;
    color: #737373;
}

(Je me suis permise de retirer le line-height, qui ne change rien avec la valeur fixée (14px).
Vous pouvez alors enlever le code du postbody qui ne sert plus.
Cela ne change rien dans l'affichage final mais cela permet de simplifier votre code et donc les modifications à venir (pour ne pas vous retrouver avec des bouts de code à droite à gauche).

Avec la deuxième option, le font size va mieux mais les deux cadres ne sont pas alignés correctement : https://i.imgur.com/vD6fFtb.png (avant changement du line-height)

Ici vous avez bien trouvé, c'était effectivement le line-height qui décale l'affichage. J'aurais dû le préciser, mais je ne voulais pas modifier plus que ce que vous avez demandé.

Comme vous pouvez le voir dans les screens, il y a des bandes blanches de chaque côté du forum à chaque fois que l'on prévisualise, et je n'arrive pas à mettre la main dessus. Je me suis dit qu'il devait s'agir d'une erreur dans les dimensions, un ou deux pixels de trop, mais rien n'y fait.

Est-ce que vous parlez de ces lignes ?

Si oui, dans le template concerné (ici posting_preview), dans la ligne

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="4">

Mettez la valeur de cellspacing à 0.

[haruhito]

Merci énormément de votre aide, en effet c'est plus simple de tout regrouper, et ça marche !

Cependant pour le forumline, effectivement, elles ont disparu de part et d'autres de la prévisualition du post en mettant le cellspacing à 0, mais sont toujours présentes aux alentours de la bannière et de la page d'accueil lorsque l'on prévisualise (alors qu'elles ne sont pas là en temps normal).

Voici un screen :
https://i.imgur.com/npiwFHZ.png

Merci encore de votre aide !

[Oka.mi]

C'est dû au padding sur les row du forumline, ça donne quelques pixels de largeur en plus ce qui est à l'origine des lignes blanches (qui sont juste le bodyline qui apparaît).

Dans votre css, vous avez

Code:

.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right {
    padding: 2px 3px;
}

Remplacez cela par

Code:

.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right {
    padding: 2px 0;
}

[haruhito]

Merci à nouveau de votre réponse !

Hélas, cela ne fonctionne pas. J'ai toujours les lignes lors de la prévisualisation.

[Oka.mi]

Hmm, en fait, il y a l'éditeur de texte qui gagne quelques pixels de largeur après chargement.
Essayez de corriger cela en cherchant dans votre css :

Code:

.sceditor-container iframe,
.sceditor-container textarea {

et en y ajoutant la ligne suivante

Code:

max-width: 550px;

[haruhito]

Oh c'est parfait, ça marche sans souci ! Merci énormément de votre aide et de votre rapidité !

Je passe ce sujet en résolu !

[Oka.mi]

Avec plaisir