Problème d'affichage de l'icone "nouveau message" et de l'icone de message personalisée (awesome BB - Template personnalisé)

[louha]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Problème d'affichage de l'icone "nouveau message" et de l'icone de message personalisée
Lien du forum : https://www.thecauldron-rpg.net/

Description du problème

Bonjour à tous,

Je suis en train d'essayer de modifier mon template search_results_topics et mon template topics_list_box afin de modifier l'affichage par défaut des listes de sujets. Jusqu'à présent, j'ai réussi à atteindre ce qu'on a sur l'image, et il ne me manque plus qu'à afficher deux choses :
- Le bouton nouveau message
- L'icone d'image personnalisée (qui sert pour les TW sur mon forum et est donc super importante).

Pour ce faire, voici le template search_result_topic qui est celui sur lequel je travaille en ce moment (et de ce que j'ai compris, le fonctionnement du topic_list est quasiment identique, donc si ça fonctionne ici, ça devrait fonctionner sur l'autre)

Code:

<br />
<div class="container">
    <h1 class="page-title">{L_SEARCH_MATCHES}</h1>

    <form action="{S_ACTION}" method="post" name="post" onsubmit="return verify_select();">
   
   <!-- BEGIN searchresults -->
<div class="topicslist_row">
<!-- Label type de sujet : annonce, note, ... -->
<dl class="topic-type" style="image: url('{searchresults.TOPIC_FOLDER_IMG}');"><dd class="dterm" title="{searchresults.L_TOPIC_FOLDER_ALT}" {searchresults.TOPIC_ICON}>  </dd></dl>
<div class="topicslist_infos">
   <!-- Titre du sujet -->
   <a class="topictitle" href="{searchresults.U_VIEW_TOPIC}">{searchresults.TOPIC_TITLE}</a>&nbsp;
   <!-- Icon vous avez posté dans ce sujet -->
   {searchresults.PARTICIPATE_POST_IMG}
   
   <br />
   <span class="topic-author">
   {searchresults.L_BY} {searchresults.TOPIC_AUTHOR} {searchresults.L_IN} <a href="{searchresults.U_VIEW_FORUM}">{searchresults.FORUM_NAME}</a>
   </span>&nbsp;
   
   <!-- Pagination du sujet -->
   <span class="topicslist-pagination">
   {searchresults.GOTO_PAGE_NEW}
   <!-- BEGIN nav_tree -->
   {searchresults.TOPIC_NAV_TREE_NEW}
   <!-- END nav_tree -->
   </span>
   </div>
   
    <!-- Statistiques -->
            <div class="topicslist-stats">
                {searchresults.REPLIES} {L_REPLIES}
                <!-- Nombres // Indication "messages" -->
                <br />
                {searchresults.VIEWS} {L_VIEWS}
                <!-- Nombres // Indication "vues" -->
            </div>
         
          <!-- Dernier message -->
            <div class="topicslist-lastpost">
                {searchresults.LAST_POST_TIME}&nbsp;
                <br />
                {searchresults.LAST_POST_AUTHOR}&nbsp;
                {searchresults.LAST_POST_IMG}
            </div>
        </div>


         <!-- END searchresults -->
   <p class="pagination">{PAGINATION}</p>
</form></div>

{JUMPBOX}

La partie qui est supposée gérer les icones (et donc les mettre dans la partie en blanc sur la gauche du sujet dont je règlerais la taille une fois que ça sera apparu) est donc celle-ci si je ne me trompe pas :

Code:

<!-- Label type de sujet : annonce, note, ... -->
<dl class="topic-type" style="image: url('{searchresults.TOPIC_FOLDER_IMG}');"><dd class="dterm" title="{searchresults.L_TOPIC_FOLDER_ALT}" {searchresults.TOPIC_ICON}></dd></dl>

Le souci c'est que les icones n'apparaissent pas. Le code reconnait bien qu'il y a quelque chose qui devrait apparaitre, puisqu'il m'affiche l'espace mais les icones ne sont pas générées.

J'ai tenté en remplaçant DL et DD par de divs, mais ça n'a rien fait (l'espace n'apparaissait pas) et par des spans (même chose) et aucun affichage des icones non plus.

Est ce que quelqu'un a une idée de ce que je fais mal et pourrait m'aiguiller sur la solution s'il vous plait ?

Bonne journée à tous,

['Christa]

Hello !

Par défaut, sur ModernBB, l'image des sujets est une image de fond. C'est l'objectif de ce bout là :

Code:

style="image: url('{searchresults.TOPIC_FOLDER_IMG}');"

Sauf que dans ton cas, tu as mis "image" (qui n'est pas une propriété CSS valide) à la place de background-image comme c'est le cas par défaut.

Si tu souhaites insérer directement une image, il faudra utiliser la méthode traditionnelle !

Code:

<img src="{searchresults.TOPIC_FOLDER_IMG}" alt="{searchresults.L_TOPIC_FOLDER_ALT}" />

[louha]

Hello Christa,
Merci pour ta super rapide réponse ! J'avais effectivement supprimé le background à un moment dans mes manip je n'ai aucune idée de pourquoi ou comment, mon dieu X.X

Ta ligne de code a effectivement permis d'afficher le bouton "nouveau messages"

https://zupimages.net/up/24/33/g06j.png

Cependant je n'ai pas l'icone de TW (ici sur ce vieux screen, c'est le petit smiley perdu sous le texte : https://zupimages.net/up/24/33/4tfc.png )
Est ce qu'il doit être récupéré depuis mon template phpbb2 et fonctionnera ou est ce qu'il y a une autre manière de l'afficher avec modernBB?

Merci beaucoup,

['Christa]

Ravie d'avoir aidé !

Pour l'icone, c'est plus compliqué parce que tu ne peux pas juste rétrograder en image, c'est la variable {searchresults.TOPIC_ICON} mais elle contient directement le code style="background-image: url(URL_ICON);". Du coup il te faut un élément conteneur, et lui mettre ça en guise d'attribut.

[louha]

OK. Alors.

Du coup j'ai tenté de reprendre ça tel quel :

Code:

<dd class="dterm" title="{searchresults.L_TOPIC_FOLDER_ALT}" {searchresults.TOPIC_ICON}>  </dd>

mais ça n'a rien donné.
j'ai remplacé les dd par des div, ça n'a rien donné non plus.

Mon dernier essai m'a fait réalisé qu'il fallait des dl autour des dd et j'ai tenté ça :

Code:

<dl><dd {searchresults.TOPIC_ICON}> </dd></dl>

ce qui me laisse un "espace" vide entre les icones et le titre du sujet mais n'affiche toujours rien



J'ai peut être vu un peu gros en essayant de tout apprendre comprendre et changer en une semaine haha...

Du coup, qu'est ce que j'ai mal fait parce que vraiment je ne vois pas comment ça fonctionne

['Christa]

Heya,

En fait, remplacer les éléments HTML n'est pas une solution pour régler tes soucis, c'est plutôt côté CSS qu'il faut que tu regardes.

Comme l'icone de sujet est un fond, il faut qu'il ait la place de s'afficher. Une balise vide a beaucoup de chances d'être invisible visuellement, et par conséquent sont fond ne sera pas visible non plus !

Par exemple imaginons que tu essaies de mettre ton icône à part comme ceci:

Code:

<div class="iconesujet" {searchresults.TOPIC_ICON}></div>

Alors, côté CSS, il faudra lui donner une hauteur et largeur suffisants pour que l'icone soit visible ! :

Code:

.iconesujet { height:100px;width:100px;}

[louha]

haaaa purée ! mais oui logique.

Du coup ça s'affiche, mais ça se duplique.

J'ai tenté :

Code:

.iconesujet { height:48px;width:48px;background-image:no-repeat;}
.iconesujet img{ background-image:no-repeat;}


ce qui m'a permis d'obtenir : https://zupimages.net/up/24/33/2ki8.png

malheureusement, le code ne semble plus réagir si je demande une taille plus petite, et ce même en rajoutant des !important partout.

l'image en elle même fait 48px de large et de haut donc il ne devrait y en avoir qu'une qui apparait. J'ai aussi essayé de réduire un peu le reste de la case en général, mais je n'ai pas l'impression que ça fasse quoi que ce soit >.>

Vraiment, normalement je suis pas nulle comme ça mais purée, je dois avoir le nez dedans depuis trop longtemps pour être capable de voir mes bêtises

['Christa]

C'est les aléas d'avoir le nez dans le guidon, ça.

Petite erreur de choix de propriété, c'est background-repeat:no-repeat. Et pour la taille, un petit coup de background-size peut-être ?

https://developer.mozilla.org/fr/docs/Web/CSS/background-repeat
https://developer.mozilla.org/fr/docs/Web/CSS/background-size

[louha]

Je viens de facepalm irl, je sais même pas pourquoi j'ai écris image.

Merci mille fois Christa ce template là fonctionne. J'arrête de t'embêter.

Plus qu'à tout transposer sur le topic list box haha...