Personnaliser la mention "déjà répondu" des mps

[lovebug]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.i-love-harvard.com/

Description du problème

Bonjour !

Je viens de mettre en place sur mon forum la mention "déjà répondu" dans la liste des mps de la boite à mps et j'aimerais savoir s'il est possible de personnalisé le petit icon ? Car j'aurais aimé mettre un autre élément que cette flèche mais je ne trouve pas l'élément graphique à remplacer en ZA.

Merci beaucoup

[Oka.mi]

Re-bonjour,

Dans le css de base du forum, il y a :

Code:

.sprite-arrow_subsilver_right {
    background: url(https://2img.net/i/fa/sprite_icons.png) no-repeat top left;
    background-position: -338px 0;
    height: 9px;
    width: 9px;
}

C'est la class attribuée à cette icône. Elle charge une seule grande image https://2img.net/i/fa/sprite_icons.png avec toutes les icônes et sélectionne ensuite l'icône concernée avec le background-position. De mémoire cette class est présente sur toutes les icônes de ce genre donc si vous modifiez quelque chose à ce niveau, il faudra s'attendre à ce que ça le fasse partout (ici, en modifiant cette class, vous modifiez toutes les flèches vers la droite ainsi définies). En sachant cela, vous pouvez changer le lien de l'image spécifiquement pour la class de la flèche vers la droite, ou créer votre propre grande image qui reprend toutes vos icônes. Ensuite, il vous suffira d'adapter la taille et le background-position via le css ensuite (si vous décidez de juste remplacer la flèche vers la droite, mettez background-position:0 pour que l'image puisse s'afficher).

[Invité]

Hello lovebug et Oka.mi,

Je viens de mettre en place sur mon forum la mention "déjà répondu"

Hum, je ne connais pas cette nouveauté!!!!!

Si je saisis bien ta demande, c'est l’icône présente dans l'historique des mps?

Si réellement c'est cela, tu peux modifier cette image via le template privmsg_topic_review:

Affichage/Templates/Poster et messages privés/privmsg_topic_review

Recherches cette variable:

Code:

{postrow.MINI_POST_IMG}

Sur cette ligne 20:

Code:

                        <td width="100%"><span class="postdetails"><img src="{ICON_TIME}" alt="" border="0" />{postrow.POST_DATE}<span class="gen">&nbsp;</span>&nbsp;&nbsp;&nbsp;<img title="{postrow.L_MINI_POST_ALT}" src="{postrow.MINI_POST_IMG}" alt="" border="0" />{L_POST_SUBJECT}: {postrow.POST_SUBJECT}</span></td>

Remplaces par le lien de l'image de ton choix:
Exemple avec cette image:
https://i.servimg.com/u/f37/11/78/15/91/zuyrgr10.png

La ligne deviendra alors:

Code:

<td width="100%"><span class="postdetails"><img src="{ICON_TIME}" alt="" border="0" />{postrow.POST_DATE}<span class="gen">&nbsp;</span>&nbsp;&nbsp;&nbsp;<img title="{postrow.L_MINI_POST_ALT}" src="https://i.servimg.com/u/f37/11/78/15/91/zuyrgr10.png" alt="" border="0" />{L_POST_SUBJECT}: {postrow.POST_SUBJECT}</span></td>

Tu peux aussi personnaliser cette image avec de la css en ajoutant une class comme ceci:

Code:

<td width="100%"><span class="postdetails"><img src="{ICON_TIME}" alt="" border="0" />{postrow.POST_DATE}<span class="gen">&nbsp;</span>&nbsp;&nbsp;&nbsp;<img title="{postrow.L_MINI_POST_ALT}" src="https://i.servimg.com/u/f37/11/78/15/91/zuyrgr10.png" alt="" border="0" class="Icone_MP"/>{L_POST_SUBJECT}: {postrow.POST_SUBJECT}</span></td>

La css:

Code:

img.Icone_MP
{

}

a++

[Oka.mi]

Hello Milouze14,

Je crois que tu as lu trop vite car nous parlons ici des flèches (noires sur fdf) qui s'affichent dans la liste des mp. Si un template doit être modifié, ce serait plutôt privmsgs_body (variable {listrow.MSG_UNANSWERED}).
Après il y a effectivement moyen de faire la modification souhaitée par lovebug via template, mais tant que je peux me contenter du css je le fais.

[chattigre]

Bonjour,

Si vous souhaitez modifier l'icône "répondu" en particulier sans risque de dommages collatéraux, ce code CSS devrait fonctionner :

Code:

form[name="privmsg_list"] img.sprite-arrow_subsilver_right {
  background: url(urldelimage) no-repeat top left;
  width: 50px;
  height: 50px;
}

En remplaçant urldelimage par l'adresse de votre image, et en modifiant les valeurs de height (hauteur) et width (largeur) pour correspondre à la taille de l'image choisie, ici 50px*50px

PS : D'un point de vue technique, je n'ai toujours pas compris l'utilisation de cette image à partir d'une palette d'icônes par défaut, au lieu de prendre comme image l'image "voir le sujet suivant"... mais bon, c'est un autre débat ^^

Bonne journée
Cordialement

[lovebug]

Merci à tou·s·tes pour vos réponses !
Alors j'aurais préféré aussi le mettre en CSS mais le problème c'est que visiblement, le CSS du forum est trop long et je ne peux pas ajouter le code donné par Chattigre
Est-ce que la solution donnée par Milouze14 fonctionnerait, du coup ?

[Oka.mi]

Est-ce que la solution donnée par Milouze14 fonctionnerait, du coup ?

Non puisqu'elle consiste à changer la mini-icône du sujet des mp dans la revue / l'historique des mp
et il me semble que ce n'est pas ce que vous voulez ^^
Quant à la place manquante dans votre css, je vois que vous mettez beaucoup de commentaires, si vous faîtes un peu le ménage de ce côté, ça devrait suffire (dommage de devoir faire un truc forcé dans le template pour ça quand-même).
Par exemple pour la dernière correction apportée, le max-width du .mp-message img, vous la mettez juste dans la catégorie /* ==================== MESSAGERIE PRIVÉE ==================== */ et voilà, un bon paquet de caractères économisés
Ah et aussi, si vous diminuez le nombre de "=" dans les commentaires, votre css devrait s'en remettre

[chattigre]

Bonsoir,
Petite correction ^^

En remplaçant url par l'adresse de votre image

"En remplaçant urldelimage" plutôt

par exemple pour cette ligne, background-image: url(https://2img.net/i/fa/prosilver/arrow_right.gif);

Bonne soirée

[lovebug]

Parfait ça a marché, merci à tou·s·tes pour votre aide

[Invité]

Hello et merci pour ton retour Oka.mi ( félicitations pour ta nomination ) ,
encore une fois, j'ai lu trop vite .

Il y avait aussi cette possibilité de mettre ce script en bas de page du dit template:

Code:


<script>

$('img.sprite-arrow_subsilver_right').each(function(){
  var image="https://i.servimg.com/u/f37/11/78/15/91/zuyrgr10.png";
$(this).replaceWith('<img src="'+image+'" class="Icone_MP"/>');});
</script>


<style>
img.Icone_MP
{
LA CSS ASSOCIEE
}
</style>


Concerne le lien de l image de remplacement

Code:

  var image="https://i.servimg.com/u/f37/11/78/15/91/zuyrgr10.png";

Et le style de l'image pourra être déposé dans ce même template.
a++