Colorer les nouveaux messages privés

[Phyliono]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : 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.universiteuniverselle.com

Description du problème

Bonjour,

J'aimerais que les nouveaux messages privés dans la messagerie soient colorés. En effet, que le fond soit d'une autre couleur (ou plutôt une autre image de fond ici : cf. screen). Actuellement, ça affiche un icône en bleu à la fin du cadre quand il s'agit d'un nouveau message, je souhaiterai donc remplacer ça par une coloration du fond.

Template privmsgs_body :

Code:

<form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">
  <div class="forumline">
    <div class="category_box">
      <a href="/privmsg?mode=post" class="category_write"></a>
      <div class="category_button">
        <a class="gensmall unselected" style="height:30px" href="javascript:select_switch_privmsg(true);"><img src="https://i84.servimg.com/u/f84/18/72/44/21/petit_24.png" onmouseout="this.src='https://i84.servimg.com/u/f84/18/72/44/21/petit_24.png'" onmouseover="this.src='https://i84.servimg.com/u/f84/18/72/44/21/petit_25.png'" /></a>
        <a class="gensmall selected" style="display: none; height:30px" href="javascript:select_switch_privmsg(false);"><img src="https://i84.servimg.com/u/f84/18/72/44/21/petit_26.png" onmouseout="this.src='https://i84.servimg.com/u/f84/18/72/44/21/petit_26.png'" onmouseover="this.src='https://i84.servimg.com/u/f84/18/72/44/21/petit_27.png'" /></a>
        <input type="submit" name="delete" class="button_delete" value="" />
      </div>
    </div>
  </div>
 
  <div class="forumline">
    <div id="messaging_main">
      <div class="gen messaging_main">{INBOX}</div>
      <div class="gen messaging_main">{SENTBOX}</div>
      <div class="gen messaging_main">{OUTBOX}</div>
    </div>
    <!-- BEGIN listrow -->
    <div id="messaging_list">
      <div class="messaging_background background_left" style="width: 83px"><span class="avatarImpose_tete"><img src="https://i37.servimg.com/u/f37/19/30/46/94/tete10.png" /></span></div>
      <div class="messaging_background" style="width: 110px"><span class="name avatarImpose_nomt" style="text-decoration: underline">{listrow.FROM}</span></div>
      <div class="messaging_background" style="width: 360px"><span class="topictitle" style="text-decoration: underline"><a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a></span></div>
      <div class="messaging_background" style="width: 149px"><span class="postdetails">{listrow.DATE}</span></div>
      <div class="messaging_background" style="width: 25px" ><img style="margin: auto" title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" /></div>
      <div class="messaging_background background_right" style="width: 59px"><span class="postdetails"><input type="checkbox" class="messaging_select" name="mark[]2" value="{listrow.S_MARK_ID}" /></span></div>
    </div>
    <!-- END listrow -->
    <!-- BEGIN switch_no_messages -->
    <div><span class="gen">{L_NO_MESSAGES}</span></div>
    <!-- END switch_no_messages -->
  </div>
</form>
<script>
  jQuery(function(){
      $('.category_box a.unselected').on('click', function(){
        $(this).hide();
        $(this).next().show();
      });
      $('.category_box a.selected').on('click', function(){
        $(this).hide();
        $(this).prev().show();
      });
  });
</script>
<div class="forumline">
  <div class="category_box">
    <div>
      <div class="page_number"><span class="nav">{PAGE_NUMBER}</span></div>
    </div>
    <div>
      <div class="pagination"><span class="nav">{PAGINATION}</span></div>
    </div>
  </div>
</div>

Quelqu'un saurait-il m'aider ?

Merci !

[ZYVHK]

Hello o/
Avant tout, sauvegardez votre template actuel dans le doute. Remplacez donc l'intégralité du contenu de privmsgs_body par ceci :

Code:

<form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">
  <div class="forumline">
    <div class="category_box">
      <a href="/privmsg?mode=post" class="category_write"></a>
      <div class="category_button">
        <a class="gensmall unselected" style="height:30px" href="javascript:select_switch_privmsg(true);"><img src="https://i84.servimg.com/u/f84/18/72/44/21/petit_24.png" onmouseout="this.src='https://i84.servimg.com/u/f84/18/72/44/21/petit_24.png'" onmouseover="this.src='https://i84.servimg.com/u/f84/18/72/44/21/petit_25.png'" /></a>
        <a class="gensmall selected" style="display: none; height:30px" href="javascript:select_switch_privmsg(false);"><img src="https://i84.servimg.com/u/f84/18/72/44/21/petit_26.png" onmouseout="this.src='https://i84.servimg.com/u/f84/18/72/44/21/petit_26.png'" onmouseover="this.src='https://i84.servimg.com/u/f84/18/72/44/21/petit_27.png'" /></a>
        <input type="submit" name="delete" class="button_delete" value="" />
      </div>
    </div>
  </div>
 
  <div class="forumline">
    <div id="messaging_main">
      <div class="gen messaging_main">{INBOX}</div>
      <div class="gen messaging_main">{SENTBOX}</div>
      <div class="gen messaging_main">{OUTBOX}</div>
    </div>
    <!-- BEGIN listrow -->
    <div id="messaging_list" data-row="{listrow.L_PRIVMSG_FOLDER_ALT}">
      <div class="messaging_background background_left" style="width: 83px"><span class="avatarImpose_tete"><img src="https://i37.servimg.com/u/f37/19/30/46/94/tete10.png" /></span></div>
      <div class="messaging_background" style="width: 110px"><span class="name avatarImpose_nomt" style="text-decoration: underline">{listrow.FROM}</span></div>
      <div class="messaging_background" style="width: 360px"><span class="topictitle" style="text-decoration: underline"><a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a></span></div>
      <div class="messaging_background" style="width: 149px"><span class="postdetails">{listrow.DATE}</span></div>
      <div class="messaging_background" style="width: 25px" ><img style="margin: auto" title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" /></div>
      <div class="messaging_background background_right" style="width: 59px"><span class="postdetails"><input type="checkbox" class="messaging_select" name="mark[]2" value="{listrow.S_MARK_ID}" /></span></div>
    </div>
    <!-- END listrow -->
    <!-- BEGIN switch_no_messages -->
    <div><span class="gen">{L_NO_MESSAGES}</span></div>
    <!-- END switch_no_messages -->
  </div>
</form>
<script>
  jQuery(function(){
      $('.category_box a.unselected').on('click', function(){
        $(this).hide();
        $(this).next().show();
      });
      $('.category_box a.selected').on('click', function(){
        $(this).hide();
        $(this).prev().show();
      });
  });
</script>
<div class="forumline">
  <div class="category_box">
    <div>
      <div class="page_number"><span class="nav">{PAGE_NUMBER}</span></div>
    </div>
    <div>
      <div class="pagination"><span class="nav">{PAGINATION}</span></div>
    </div>
  </div>
</div>

Dans votre CSS, ajoutez le code suivant en prenant soin de modifier l'adresse et le style par ce que vous souhaitez :

Code:

#messaging_list[data-row="adresse de l'image d'un nouveau message privé"] {
    background-color: blue;
}

[Phyliono]

Bonjour,

Merci beaucoup de votre aide.
J'ai appliqué votre code mais je n'y vois aucun changement...

Merci...

[ZYVHK]

Il y a quelque chose qui me titille un peu dans votre code. L'ID est un identifiant unique, c'est-à-dire qu'il ne devrait être utilisé et fonctionnel qu'une seule fois sur une même page, hors là, l'ID est répété pour chaque message privé. On va transformer ça en class.

Repérer

Code:

<div id="messaging_list" data-row="{listrow.L_PRIVMSG_FOLDER_ALT}">

Changer en

Code:

<div class="messaging_list" data-row="{listrow.L_PRIVMSG_FOLDER_ALT}">

Du coup, dans votre CSS, changer tous les #messaging_list éventuels par .messaging_list, en commençant par celui que je vous ai proposé plus haut;

Code:

.messaging_list[data-row="adresse de l'image d'un nouveau message privé"] {
        background-color: blue;
    }

Si cela ne fonctionne pas, il me faudrait le CSS de messaging_background pour vérifier quelque chose.

[Phyliono]

Re,

Toujours pas...

Tenez :

Code:

.messaging_list[data-row="https://i37.servimg.com/u/f37/19/30/46/94/nouvea10.png"] {
background: url('https://i84.servimg.com/u/f84/18/72/44/21/barre_25.png') repeat !important;
}

.background_right {
border-right: 1px solid rgba(196, 196, 196, 1);
-webkit-border-bottom-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-topright: 6px;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;}

.background_left {
border-left: 1px solid rgba(196, 196, 196, 1);
-webkit-border-bottom-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-topleft: 6px;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;}

.messaging_background {
background: url('https://i37.servimg.com/u/f37/18/72/44/21/messag10.png') repeat;
height: 66px;
text-align: center;
line-height: 66px;
margin-top: 6px;
border-top: 1px solid rgba(196, 196, 196, 1);
border-bottom: 1px solid rgba(196, 196, 196, 1);
box-shadow: 0 2px rgba(196, 196, 196, 0.6);
display: flex;
justify-content: center;
align-items: center;}

.messaging_list {
align-content: space-around;}

#messaging_main, .messaging_list {
width: 789px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-around;}

.messaging_list:hover {
opacity: .6;
box-shadow: 0 2px rgba(196, 196, 196, 0.6);}

Merci beaucoup !

[ZYVHK]

Je pense savoir pourquoi. Ajoutez le code suivant dans le CSS, ça devrait changer;

Code:

.messaging_list[data-row="https://i37.servimg.com/u/f37/19/30/46/94/nouvea10.png"] messaging_background {
background: none !important;
}

[Phyliono]

Toujours pas... c'est bizarre

Merci !

[Phyliono]

up

[Phyliono]

up

[Phyliono]

up

[Lixyr]

Bonjour Phyliono,

Avez-vous un compte poubelle ou test sur lequel je pourrais me connecter ? Je vais regarder ça.

[tupac]

Bonjour Phyliono,

- Message modéré -

Cordialement.

[Walt]

Bonjour @Tupac,

Bien que votre intention soit bonne, nous n'autorisons pas l'usage de liens externes pour proposer des solutions, et d'autant plus lorsqu'il faut s'inscrire pour voir les codes en question. L'intérêt de ce forum d'entraide réside aussi dans la possibilité pour de futurs utilisateurs de trouver directement la réponse dans ce sujet, sans avoir à s'inscrire sur un site tiers.

Cordialement,
Walt

[tupac]

Bonjour Walt et au temps pour moi.

Bonne journée.

[Phyliono]

Je n'ai pas de compte test... navré... Vous ne voyez pas la solution ? Souhaitez-vous que je renvoie le code actualisé avec les modifications ?

Merci !

[Lixyr]

Bonsoir Phyliono,

Mon forum test est accaparé par un autre code, je préfèrerais donc voir directement ça chez vous. Je vais m'inscrire, pourrez-vous m'envoyer un MP que je puisse voir ce que ça donne ?
Une fois que le problème sera résolu, vous pourrez supprimer mon compte.

[Phyliono]

Oui, j'ai envoyé un MP !

[Lixyr]

Essayez quelque chose comme ça :

Code:

.messaging_list[data-row*="Non-lu"] .messaging_background {
    background-image: url('https://i84.servimg.com/u/f84/18/72/44/21/barre_25.png');
}

Testé sur un nouveau message, mais pour que je puisse voir si l'identifiant est correcte il faudrait m'en envoyez un autre que je puisse tester les deux cas de figures : un lu et un non lu. Sauf si ça marche de votre côté.

[Phyliono]

Ca fonctionne merci ! Mais il n'y a pas moyen, plutôt que de changer le fond, de faire clignoter le cadre ?
Clignotement avec l'opacité comme quand on passe la souris actuellement sur un message privé déjà lu.
Il y aurait donc une alternance entre l'opacité (=1) et l'opacité :hover (=0.6), ce qui fait un clignotement...

Vous comprenez ?

Merci d'avance!

[Lixyr]

J'avais pris le CSS que vous aviez donné plus haut, mais pour faire un clignotement on peut faire comme ça :

Code:

@keyframes clignote {
0% {opacity:1;}
50% {opacity:0.6;}
100% {opacity:0.2;}
}

    .messaging_list[data-row*="Non-lu"] .messaging_background {
animation-name: clignote;
animation-duration: 1s;
animation-iteration-count:infinite;
    }

[Phyliono]

Bonsoir,

Ca marche c'est super comme ça mais, il y a-t-il moyen de le retirer sur la Boîte d'envoi (où tous les messages sont considérés comme nouveau...) ?

Merci !

[Lixyr]

Et bien, il faudrait voir s'il y a une classe spéciale dans la partie "messages reçus" et la rajouter dans le code CSS :

Code:

.ICI_LA_CLASSE .messaging_list[data-row*="Non-lu"] .messaging_background {
[...]
    }

Dans mon forum j'ai ça :

<form action="/privmsg?folder=inbox"

qui est différencié de

<form action="/privmsg?folder=outbox" method="post" name="privmsg_list">

Donc à priori on peut faire :

Code:

form[action*="folder=inbox"] .messaging_list[data-row*="Non-lu"] .messaging_background {
[...]
    }

[Phyliono]

Parfait ! Merci !

[Lixyr]

Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton