Notifications dans barre de navigation, i need help please !

Yes

Je pense qu'on aura un peu d'ajustement CSS à faire ensuite, mais ça devrait nous faire avancer

Mon Dieu ça fonctionne !
Effectivement, va y avoir des ajustements mais punaise ça fonctionne !

Ah parfait !

Je laisse le topic ici le temps de tes petits réglages Tiens nous au courant quand tout est ok pour toi. Et n'hésite pas si tu as des questions/soucis

Oui merci ! vous êtes vraiment trop fortes !

C'est encore moi
Est-ce que vous savez si on peut supprimer les notifications directement depuis l'encart qui s'ouvre plutôt que d'aller dans la page dédiée.
Comme ça

Je te mets la réponse que j'avais donnée à MmeFeuillage :

Par contre, on ne peut pas supprimer les notifs. J'ai essayé de trouver une solution, impossible :/ Pour ça, il faudra passer par la page "voir toutes les notifs"

On avait fait ça à la place : clic

Yes, je vais tenter cette solution, c'est juste du CSS je devrais m'en sortir (j'espère). xD

Dernière question et après j'arrête de vous embêter.
Sur la nav bar du coup, je ne sais pas si tu as remarqué mais il y a un espace plus grand entre certains mots (notamment entre mon dossier et messagerie)
Pourtant dans le CCS il me semble qu'on a mis un padding donc logiquement on devrait avoir la même chose partout.
Une idée de où ça peut venir ?
Je pensais au position mais pas sûre.

Tu as une image au niveau de la messagerie

Code:

<a class="mainmenu" href="/privmsg?folder=inbox" rel="nofollow"><img id="i_icon_mini_message" src="https://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Messagerie" title="Messagerie">Messagerie</a>

Tu peux la supprimer en allant dans Panneau d'administration > Affichage > Page d'accueil > En-tête & navigation > Messagerie

Ok pour les images en trop (je ne comprends pas d'où elles sortaient d'ailleurs c'est ok).
Pour le tuto Mme Feuillage la solution est cool, mais elle ne marche pas.
Pourtant j'ai modifié les .navig par #navigation #navig mais je n'ai pas l'impression que ça fonctionne.
Je te remets le CSS ( ça fait 3 heures que je fais des essais...)

Code:

/*  Notifications  */
/*******************/

body{
 margin-top:0 !important;
}

.headerbar{
  overflow: inherit;
}

.is-sticky#headerbar-top.w-toolbar {
    top: 0px !important;
}
#fa_toolbar,
#fa_toolbar_hidden{
  display:none;
}

#navigation #navig .link-notifs{
  position: relative;
}

#navigation #navig #fa_notifications {
    color: #12261a;
    cursor: pointer;
    line-height: 30px;
    padding: 0 5px
}

#navigation #navig #fa_notifications.unread{
  color: #191919;
}

#navigation #navig #fa_notifications:hover{
  color: #274f36;
}

#navigation #navig #notif_list{
  background-color: grey;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 9px rgba(0,0,0,0.3), 0 0 1px 1px rgba(0,0,0,0.2);
    color: #333;
    display: none;
    font-size: 11px;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    position: absolute;
    text-align: left;
    top: 42px;
    width: 200px;
    z-index: 999;
}

#navigation #navig #notif_list li{
  margin: 4px 0;
  opacity: 0.5!important;
}

#navigation #navig .notification #notif_list {
    display: block;
}

#navigation #navig #notif_list .content a{
  color: #191919;
  font-weight: bold;
  padding: 0;
}

#navigation  #navig #notif_list li.see_all a,
#navigation  #navig #notif_list li.unread {
    opacity: 1!important;
}

#navigation #navig #notif_list .see_all a:hover{
  background: #2E2E2E;
  color: #cacaca;
}
-------------------------------------------------NAVIGATION ------------------------------------------------
#navig
{
  width: 10000px;
  margin: auto;
  text-align: center;
}
#navigation
{
  position: fixed;
  z-index: 999;
  width: 100%;
  background-color: grey;
  border-bottom: 2px solid #2E2E2E;
  margin-top: 0px;
  margin-left: 0px;
  word-spacing: 10 px;
  text-align: center;
}

a.mainmenu {
          color:#12261a;
          word-spacing: 10 px;
     text-transform: uppercase; /*pour l'avoir en majuscules*/
          font-family: 'Akshar'
          font-size:18px; /*la taille*/
          line-height: 15px,
}

Et en plus est-ce qu'il y aurait possibilité que la messagerie prenne une autre couleur lorsqu'elle contient un nouveau message ?
Merci

Bonsoir

moi je vois bien une différence entre les lues et les non lues :


Ca n'est pas ça que tu voulais faire ??


Pour les MP, il y a peut-être quelque chose de plus simple mais je ne vois pas avec mon esprit embrumé Du coup @Miettes nous dira si je me complique la vie Mais tu peux ajouter un nouveau code javascript comme celui de la toolbar mais pour les MP.
Et il faut ensuite que tu crées ta classe dans ta CSS qui va s'appeler 'newMP'.

Code:

$(function(){

  function majMP(){
    var lienMP = $('#navigation #navig').find('a.mainmenu[href="/privmsg?folder=inbox"]');
    if(lienMP.text()!='Messagerie'){
        lienMP.toggleClass("newMP");
    }
  }

  // Au chargement de la page, on attend 1 seconde (1500 ms), on appelle notre fonction
  setTimeout(function(){
    majMP();
  }, 1000);
  // Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
  setInterval(function(){
    majMP();
  }, 30000);
});

Normalement ça fonctionne

Ah ben si, ça fait 3 heures que je bataille et je ne le voyais pas...=_=

Tout fonctionne, merci les filles.
Je vais essayer de me plonger dans tous vos supers tutos dès que possible !

Coucou @Newaly

Est-ce que tout est ok pour toi ? On peut classer ce topic ?

Hello @Newaly

N'ayant pas de nouvelles depuis une semaine et comme tout semble OK pour toi, je classe ce topic ^^