Nouveaux messages privés (nom et effets)

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Nouveaux messages privés (nom et effets)

Message par SweetGumiho le Dim 1 Mar 2015 - 22:44

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://thewitcher.jdrforum.com/

Description du problème

Bonjour/bonsoir,

Actuellement le nom de la boîte de messagerie est "Courrier". J'aimerais qu'à l'arrivée de nouveaux messages cela indique combien de messages non-lus se trouvent dans la boîte et que l'écriture change de couleur. Hors j'ai bien suivi ce tutoriel pour le changement de couleur à l'arrivée de nouveaux messages : http://forum.forumactif.com/t343371-phpbb2-une-couleur-pour-les-nouveaux-messages-prives qui selon certains marcherait aussi dans la version phpBB3, mais cela ne marche pas.

Voici le contenu de mon javascript :

Code:
$(function(){
          $('img#i_icon_mini_new_message').parent().css('color','#EAC117');
});

Voici un autre javascript pour ma barre de navigation :

Code:
$(function() {
    $('a.mainmenu[href="/"]').text('Forum');
    $('a.mainmenu[href="/faq"]').text('Foire Aux Questions');
    $('a.mainmenu[href="/memberlist"]').text('Les Aventuriers');
    $('a.mainmenu[href="/groups"]').text('Les Peuples');
    $('a.mainmenu[href="/profile?mode=editprofile"]').text('Votre Personnage');
    $('a.mainmenu[href="/privmsg?folder=inbox"]').text('Courrier');
    $('a.mainmenu[href="/register"]').text('Nous Rejoindre');
    $('a.mainmenu[href="/login"]').text('Entrer');
    $('a.mainmenu[href^="/login?logout"]').text('Sortir');
});

Et voici mon CSS, au cas où vous en avez besoin :

Code:
#wrap {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: 0 solid #FFFFFF;
}
body {
   background-position: top center;
   background-attachment: scroll;
        background-repeat: no-repeat;
  }
.inputbox {
   background-color: #3c3c3c;
   border: 1px solid #BCBCBC;
   color: #ffffff;
   padding: 2px;
   cursor: text;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
dl.codebox {
   padding: 3px;
   background-color: #FFFFFF;
   border: 1px solid #C9D2D8;
   font-size: 1em;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   border: 1px solid #101010;
}
.forabg {
   background-color: #262627;
   margin-bottom: 4px;
   clear: both;
   border: 2px solid #;
   padding: 0px 5px;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   border: 1px solid #101010;
   background-image: url(http://imageshack.com/a/img838/9827/fsga.png);
   -o-transition: background-color 0.2s linear; 
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.panel {
   margin-bottom: 4px;
   padding: 0px 10px;
   background-image: url(\'\');
   border: 1px solid #101010;   
   background-repeat: repeat-x;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   background-color: #262627;
   border: 1px solid #101010;
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.post {
   padding: 0 10px;
   margin-bottom: 4px;
   background-repeat: no-repeat;
   background-position: 100% 0;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   background-color: #262627;
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.postbody /*justification automatique des posts*/ {
display: block;
text-align: justify;
padding: 10px;
}
.postprofile {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important;
    border-radius: 5px 5px 5px 5px;
    color: #999;
    display: inline;
    margin: 5px 0 0;
    min-height: 80px;
    position: relative;
    text-align: center;
    width: 17%;
    word-wrap: break-word;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 5px;
}
dl.codebox {
    background-color: #1E1D1B;
    border: 1px solid #878787;
}
ul.profile-icons {
   margin-top: 10px;
   list-style: none;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.module {
   background-image: url(http://i60.servimg.com/u/f60/14/70/09/25/gradie22.png);
   border: 1px solid #101010;   
   background-repeat: repeat-x;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   background-color: #262627;
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.signature {
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   border-color: #111010;
}
.row2 {
    background-color: #0D0C0B;
    background-image: url("http://imageshack.com/a/img690/452/q962.png");
    background-position: center top;
    background-repeat: repeat-x;
}
.row1 {
    background-color: #0D0C0B;
    background-image: url("http://imageshack.com/a/img690/452/q962.png");
    background-position: center top;
    background-repeat: repeat-x;
}
blockquote {
    background: url("http://imageshack.com/a/img809/2250/voys.png") no-repeat scroll 0 0 #C1A780;
    border: 0 none #4C402D;
    border-radius: 10px;
    padding-right: 25px;
}
.panel {
    background-color: #000000;
    background-image: url("");
    background-repeat: repeat-x;
    border-radius: 10px;
    margin-bottom: 4px;
    padding: 0 10px;
}
a.button1, a.button2, button.button2, input.button1, input.button2 {
    background-color: #1E1D1B;
    background-image: url("http://imageshack.com/a/img849/7503/zow4.png");
    border: 0 none;
    color: #B89E7D;
}
#search-box input {
display: none;
}
#search-box input.button1 {
display: none;
}
input.search {
display: none;
}
#smiley-box{
  display:none;
}
 
.slidesmile{
  position:relative;
  top:39px; left:705px;
  z-index:4;
}
.forabg .lastpost { width:25% }
.forabg .dterm { width:70% !important }
.navig {
    position: fixed;
    top:0;
    width:100%
    background: black; /*couleur de fond de la barre de navigation*/
    box-shadow: 0 2px 10px black;  /*effet d'ombre sous la barre de navigation*/
}
.navig a {
    font-family: 'Alegreya SC'; /*police des liens*/
    font-size: 14px; /*taille police des liens*/
    color: #6F7D7D;  /*couleur des liens*/
}
.navig a:hover {
    color: #4D7999;  /*couleur des liens au survol*/
    letter-spacing: 1px;  /*espacement des lettres au survol (0=normal)*/
}
.navig li {
    display: inline-block;
    padding: 12px;  /*marge autour des liens*/
  .gauche {
    float:left;
}
.linklist {
    text-align: center; /*pour centrer les liens au dessus des catégories*/
}
.linklist a {
    color: #222325; /*couleur des liens au dessus des catégories*/
}

Merci d'avance ! ♥


Dernière édition par SweetGumiho le Lun 2 Mar 2015 - 17:09, édité 1 fois

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nouveaux messages privés (nom et effets)

Message par Alzufen le Dim 1 Mar 2015 - 22:53

Re-bonjour Razz

Et si tu essayes simple avec ça dans ton CSS pour changer la couleur :

Code:
.new-message{
color: #EAC117;
}

Et pour mettre une autre couleur au survol :

Code:
.new-message:hover{
color: #AUTRECOULEUR;
}

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nouveaux messages privés (nom et effets)

Message par SweetGumiho le Lun 2 Mar 2015 - 9:56

Non, ça ne marche toujours pas. Est-ce que ce ne serait pas du au nom de mes éléments modifiés via Javascript ? scratch

La partie concernée par la barre de navigation dans ma feuille de style CSS :
Code:
/****** NAVIGATION *******/
 
.navig {
  position:fixed;
  background:#000;
  width:100%; /*couleur de fond de la barre de navigation*/
  top:0;
  box-shadow:0 2px 10px #000; /*effet d'ombre sous la barre de navigation*/
}
.navig a {
  font-family:'Alegreya SC'; /*police des liens*/
  font-size:14px; /*taille police des liens*/
  color:#6F7D7D; /*couleur des liens*/
}
.navig a:hover {
  color:#4D7999; /*couleur des liens au survol*/
  letter-spacing:1px;/*espacement des lettres au survol (0=normal)*/
}
.navig li {
  display:inline-block;
  padding:12px; /*marge autour des liens*/
}
.new-message{
color: #EAC117;
}
.new-message:hover{
color: #A#FDD017;
}

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nouveaux messages privés (nom et effets)

Message par Alzufen le Lun 2 Mar 2015 - 10:22

Coucou ^^

Soucis de poids des déclarations oui, tu déclares plus haut que les liens contenu dans la class "navig" auront telle couleur, le poids de notre class est plus petit qu'une class + un sélecteur de balise. Du coup, il va falloir forcer ça, donc au lieu de mettre ".new-message" tu vas mettre "a.mainmenu span.new-message" avec ça on sera sur que son poids sera supérieur sans utiliser de "!important" Wink

Le poids des déclarations est rarement pris en compte par les jeunes codeurs ou ceux qui s'y connaissent pas trop, ils ont d'ailleurs tendance à mettre un "!important" qui lui aussi peut avoir un poids plus petit que d'autre truc. Ci-dessus, on pouvait augmenter le poids de plusieurs façon, j'ai fait la plus simple et compréhensible Razz

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nouveaux messages privés (nom et effets)

Message par SweetGumiho le Lun 2 Mar 2015 - 11:07

A croire que le codage commence à rentrer, je me doutais bien qu'il s'agit d'une chose de la sorte mais je ne connaissais pas les codes pour l'appliquer. Wink

Chose étrange, j'ai vu marqué "2 messages" apparaître très brièvement à la place de courrier, dans la couleur que j'avais choisi donc mais seulement une fraction de seconde avant de redevenir "Courrier" dans la couleur habituelle. Pourtant je n'ai pas ouvert ma boîte de réception, mais par contre j'ai eu cette popup intempestive et je ne sais pas si je devrais réessayer ou pas en désactivant celle-ci via mon profil...
scratch

EDIT : De temps en temps je clique quelque part pour naviguer sur mon forum et pendant une fraction de seconde je vois ce "2 Messages" en couleur.

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nouveaux messages privés (nom et effets)

Message par Alzufen le Lun 2 Mar 2015 - 12:27

C'est la faute à ton script JS qui permets de modifier le texte "Message Privé" en "Courrier", il faudrait faire ça autrement avec la fonction "replace" pour remplacer "Messagerie" par "Courrier" résultat quand un nouveau message arrivera le mot "1 Nouveau Message" ne sera pas remplacé par Courrier.

Dans ton code JS repère donc :

Code:
$('a.mainmenu[href="/privmsg?folder=inbox"]').text('Courrier');

Et remplace par :

Code:
    $('a.mainmenu[href="/privmsg?folder=inbox"] img').remove();
    $('a.mainmenu[href="/privmsg?folder=inbox"]').each(function(){$(this).html($(this).html().replace(/Messagerie/g,"Courrier"));});
    $('a.mainmenu[href="/privmsg?folder=inbox"]').each(function(){$(this).html($(this).html().replace(/message/g,"courrier"));});

La première ligne va retirer l'image du DOM enfin pour faire simple il va la faire disparaître comme si elle n'avait jamais existé, elle ne sera même pas visible dans le code source.

La seconde va nous permettre de remplacer le mot "Messagerie" par "Courrier" uniquement dans la barre de navigation.

La troisième a le même effet mais permet de changer le mot "message" par "courrier" quand on reçoit un nouveau message et va se conjuguer automatiquement au pluriel.

En passant, tu m'excuseras mais pour tester le truc sur ton forum, pour voir d'où venait le soucis et du coup clairement comprendre, j'ai dû me créer un compte sous mon vrai pseudo (Alzufen) tu peux supprimer le compte du coup, désolé du dérangement mais ça m'a permis de voir le problème et de le régler Razz

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nouveaux messages privés (nom et effets)

Message par SweetGumiho le Lun 2 Mar 2015 - 12:54

Le problème c'est que maintenant j'ai "2 Nouveaux Courriers" au lieu de "2 Nouvelles Missives" (ou "2 Nouveaux Messages") à la limite, et que la couleur ne s'applique pas. Je vous laisse le compte tant que le problème n'est pas résolu, pour que vous puissiez continuer à tester. Wink

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nouveaux messages privés (nom et effets)

Message par Alzufen le Lun 2 Mar 2015 - 13:52

Pour le premier, c'est parce que dans le jQuery ça remplace "message" par "courrier", donc si tu veux mettre missives il faut mettre "missive" au lieu de courrier dans la troisième ligne Wink

Pour la couleur, le code JS que tu utilises ne marchera pu car il n'y a pu d'images, de plus c'est un code qui ne marche pas sous PHPBB3, tu ne sembles pas avoir mis le CSS que je t'ai donné c'est normal ?

Sinon on peut faire ça en JS, il te suffit de remplacer ce que je t'ai donné au dessus par :

Code:
    $('a.mainmenu[href="/privmsg?folder=inbox"] img').remove();
    $('a.mainmenu[href="/privmsg?folder=inbox"]').each(function(){$(this).html($(this).html().replace(/Messagerie/g,"Courrier"));});
    $('a.mainmenu[href="/privmsg?folder=inbox"]').each(function(){$(this).html($(this).html().replace(/message/g,"missive"));}).css('color', '#EAC117').hover(function(){$(this).css('color', '#FDD017');},function(){$(this).css('color', '#EAC117')});

Du coup, maintenant la troisième ligne du code remplace "message" par "missive", il lui ajoute la propriété CSS "color" ayant pour attribut la couleur "#EAC117", ensuite, on lui applique l'effet hover, au survol on lui applique la première fonction donné donc dans notre cas, on lui applique la propriété CSS "color" ayant pour attribut "#FDD017", et quand la souris sors ne survole plus on lui applique la deuxième fonction donc dans notre cas la même propriété CSS qu'il a à l'origine.

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nouveaux messages privés (nom et effets)

Message par SweetGumiho le Lun 2 Mar 2015 - 15:45

Et juste pour avoir "message" (et non missive) il suffit juste de ne pas mettre :
Code:
.replace(/message/g,"missive")
C'est bien ça ?

EDIT : Je n'ai que le "Courrier" en couleur là, pas "2 Nouvelles Missives" ou "2 Nouveaux Messages".

Mon code javascript pour la barre de navigation
Code:
$(function() {
    $('a.mainmenu[href="/"]').text('Forum');
    $('a.mainmenu[href="/faq"]').text('Foire Aux Questions');
    $('a.mainmenu[href="/memberlist"]').text('Les Aventuriers');
    $('a.mainmenu[href="/groups"]').text('Les Peuples');
    $('a.mainmenu[href="/profile?mode=editprofile"]').text('Votre Personnage');
    $('a.mainmenu[href="/privmsg?folder=inbox"] img').remove();
    $('a.mainmenu[href="/privmsg?folder=inbox"]').each(function(){$(this).html($(this).html().replace(/Messagerie/g,"Courrier"));});
    $('a.mainmenu[href="/privmsg?folder=inbox"]').each(function(){$(this).html($(this).html().replace(/message/g,"missive"));}).css('color', '#EAC117').hover(function(){$(this).css('color', '#FDD017');},function(){$(this).css('color', '#EAC117')});
    $('a.mainmenu[href="/register"]').text('Nous Rejoindre');
    $('a.mainmenu[href="/login"]').text('Entrer');
    $('a.mainmenu[href^="/login?logout"]').text('Sortir');
});

EDIT : D'ailleurs "Courrier" reste toujours en couleur, même après avoir lu tous les messages maintenant. :/

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Nouveaux messages privés (nom et effets)

Message par Alzufen le Lun 2 Mar 2015 - 16:51

C'est ma faute, une petite erreur débile Razz l'ajout du CSS se fait sur le balise "a" et donc ça se fait aussi sur "Courrier"... Essaye avec ce code là :

Code:
$(function() {
    $('a.mainmenu[href="/"]').text('Forum');
    $('a.mainmenu[href="/faq"]').text('Foire Aux Questions');
    $('a.mainmenu[href="/memberlist"]').text('Les Aventuriers');
    $('a.mainmenu[href="/groups"]').text('Les Peuples');
    $('a.mainmenu[href="/profile?mode=editprofile"]').text('Votre Personnage');
    $('a.mainmenu[href="/privmsg?folder=inbox"] img').remove();
    $('a.mainmenu[href="/privmsg?folder=inbox"]').each(function(){$(this).html($(this).html().replace(/Messagerie/g,"Courrier"));});
    $('a.mainmenu[href="/privmsg?folder=inbox"]').each(function(){$(this).html($(this).html().replace(/>message/g,">missive"));})
    $('.new-missive').css('color', '#EAC117').hover(function(){$(this).css('color', '#FDD017');},function(){$(this).css('color', '#EAC117')});
    $('a.mainmenu[href="/register"]').text('Nous Rejoindre');
    $('a.mainmenu[href="/login"]').text('Entrer');
    $('a.mainmenu[href^="/login?logout"]').text('Sortir');
});

Ensuite, pour laisser "Message" au lieu de "Missive" il faut juste enlever ça :
Code:
$('a.mainmenu[href="/privmsg?folder=inbox"]').each(function(){$(this).html($(this).html().replace(/>message/g,">missive"));})

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nouveaux messages privés (nom et effets)

Message par SweetGumiho le Lun 2 Mar 2015 - 17:09

Maintenant ça marche, parfait ! Merci pour ton aide. Smile
Problème résolu. Wink

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum