-24%
Le deal à ne pas rater :
Purificateur d’air & Ventilateur Dyson TP02 (Programmable – ...
399 € 527 €
Voir le deal

Aller en bas
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mer 30 Oct 2019 - 13:11
Hello !
Encore moi !!
Je me suis décidé a enlever la toolbar et a mettre les notifications dans la barre de navigation en suivant le tuto
https://tambouille-raleuses.forumactif.com/t335-afficher-les-notifications-dans-la-barre-de-navigation-retirer-la-toolbar

Seulement j'ai encore du loupé un truc car le nombre de notif'  ne s'afffiche pas , ça ne me met que le lien ... Surement un probleme au niveau du javascript ?

Alors Smile
lien du forum : https://forumfeminin.forumactif.org/

CSS :
Code:
.headerbar, #headerbar-top.is-sticky,
.forabg, .forumbg,
.module .h3,
.button, .button1, .button2, input[type="submit"], .button-round {
  background-color: #EFD485;
    color:Black;
  font: Amatic SC;
  font-size: 20px;
}

.headerbar{background-image : url("https://i.servimg.com/u/f57/11/72/51/74/e2809410.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 100%; /* Resize the background image to cover the entire container */
  background-position-y: 30%;
background-color:transparent;
height : 430px;
}


/**fixe le header**/
#headerbar-top.is-sticky {
    background: transparent;
    position: relative;
    box-shadow: none;  
}

.headerbar-top > .wrap:first-child{
    padding-top: 27px;
}

.is-sticky #logo {
    display: block;
    height: auto;
    width: auto;
    opacity: 1;
    transform: inherit;
}

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

.newNotif{
 color:red !important;
 font-size:18px !important;
}

/**/



/**Fixe la barre de nav'**/

    ul.navbar.navlinks {
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        background-color: #EDD293;
        font-variant: small-caps;
        visibility: visible;
  
    }

ul.navbar.navlinks li {
    margin-top: 0;
  margin-left:10px;

}

.navbar  {
    color: #2A120A;
    font-size: 12px;
  font-family:Roboto; sans serif;
  
}

.navbar a {  
    color: #2A120A;
    display: inline-block;
    font-size: 14px;
    line-height: 1.3846;
    padding: 6px;
}



#tabs::after, .navbar::after, dl.polls::after, fieldset dl::after, ul.linklist::after, ul.topiclist dl::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: visible;
}

#logo{
  margin-top:0px;
}

/*lien Chat dans la toolbarre*/
#fa_chat_button{
  color :black;
  font-family: Roboto, sans-serif;}


#fa_right{width:40%}

/** Liste des sujets**/
.forumbg .header{
  background-image: url("https://i.servimg.com/u/f44/19/68/75/46/choco11.png")
  background-color:#FFEFDB;
  background-size:100% 57px;
  background-repeat:no-repeat;}

li.row {
    border-color: ;
    border-style: none;
  border-width: 0px 0 0;}


/**/

.content h2, .panel h2 {
    border-color: #e3e2e2;
    color: #e3e2e2;
}

.statistics {
  background-color: #EDD293;
}

#page-footer {
  background-color: #694516;
}

#page-footer .copyright-body {
  border-color: #255227;
}

.module .h3{background:#EDD293; }

/*************CATEGORIES***************/
*{
  box-sizing:border-box;
}
.titre_cate{
  margin:15px auto 0px;
  text-align:center;
  border:none;
  border-radius :5px 5px 0px 0px;
  background:#EDD293;  
}

.titre_cate h2{
  font-size:30px;
  font-variant:small-caps;
  padding:10px;margin:0;
  font: Amatic SC;
  color:#694516;
}
.forums{
  display:flex;
  box-sizing: border-box;
  padding:8px;
  margin: 0px;
  border: none;
  min-height: 100px;
  vertical-align: middle;
  background:#F0E9D7;

}
.image {
  width:10%;
  border-right: none;
}
.corps {
  width: 60%;
  border-right: 4px double #6B390D;
  padding:0 10px;
}
.corps .forumlink{
  text-align:center;
  width:100%;
  font-variant:small-caps;
  font-size:16px;
  padding: 0;
  margin: 0;
}
.description{
  height: 95px;
  box-sizing: border-box;
  padding:5px;
  background:#F7F2E0;
  overflow:auto;
padding:10px 10px 10px 10px;
  -moz-box-shadow: 4px 4px 10px #888;  
  -webkit-box-shadow: 4px 4px 10px #888;  
  box-shadow:4px 4px 6px #888;
color:#3E464C;
font-size: 1.3rem;
font-family: Roboto, sans-serif;}



.sous_forums {
    border-right: 4px double #6B390D;
    font-variant: small-caps;
    text-align: left;
    width: 20%;

}

.sous_forums > span {
    display: block;
    font-size: 11px;
}

.sous_forums a{
  display:inline-block;
  font-size:14px;
  vertical-align: middle;
}

.sous_forums span:before{
  content:' ※ ';
  font-size:11px;
}

.sous_forums > a + a::before {
    display: none;
}

.derniers_messages {
  width: 20%;
  text-align: center;
  padding-left:6px;
}

.lastpost-avatarindex {
  float: none;
  width: 100%;
  height: 40px;
  overflow: hidden;
  margin-top: 3px;
  border: 1px solid black;
  border-radius:5px;
  padding:0;
}

.lastpost-avatarindex img {
  width: 100%;
  margin-top: -40%;
  height:auto;
}




/*** [TUTO] Badges sur fiche perso ***/
/* Le cadre qui contient les badges */
#listing-badges{
    background: #ddd;
    border: 2px solid #666;
    border-radius: 20px;
    box-sizing: border-box;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
    width: 96%;
}
    
/* Titre "Mes badges" */
#listing-badges h3{
    border-bottom: 2px solid #666;
    color: #666;
    font-size: 18px;
    font-weight: bold;
    line-height: 25px;
    margin-bottom: 5px;
}

#listing-badges label,
#listing-badges input[type="checkbox"]{
  display: inline-block;
}

/* On cache les cases à cocher */
.liste-badges #listing-badges input{
  display: none;
}

/* Image en noir & blanc */
.liste-badges #listing-badges input + label{
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label{
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

/**QEEL par Cheshire Cat**/
.qeel h1{
  margin-top:60px;
  margin-bottom:0px;
  background-color:#EDD293;
  border-radius:5px 5px 0px 0px;
  text-align:center;
  font-family: 'AMATIC SC', sans-serif;
  font-size:35px;
  color:#694516;
  text-transform:uppercase;
  letter-spacing:5px;
}
.qeel h2{
  text-align:center;
  font-family: 'AMATIC SC', cursive;
  font-size:20px;
  color:#694516;
}
.qeel .bloc{
  font-size:12px;
  color:black;
  font-family:Arial;
  display:block;
  overflow:auto;
  width:210px;
  height:250px;
  margin:auto;
  text-align:justify;
  border-left:2px solid #634344;
  border-right:2px solid #634344;
  background-color:#F0E9D7;
  padding-left:8px;
  padding-right:8px;
}
.qeel .membresco24{
  margin-left:-5px;
  color:#7B4725;
  font-size:12px;
  font-family:Arial
}
.qeel .legend{
  top:5px;
  margin-bottom:20px;
  margin-left:13px;
  margin-right:13px;
  padding-top:10px;
  padding-left:8px;
  padding-right:8px;
  border-top:2px solid #634344;
  background-color:#F0E9D7;
  text-align:center;
}
.qeel .creditqeel{
  font-size:11px;
  text-align:right;
  background-color:#F0E9D7;
  width:100%;
}

.qeel .forumline{
background-color:#F0E9D7;}

.qeel .forumline :hover{
background-color:#F0E9D7;}



.qeel table.forumline tr:hover td {
    background-color: #F0E9D7;
}

/**Modules**/

.mod-top-row .mod-top-pct{
    background: #FEB294;
}

/** Badges**/
    /*** [TUTO] Badges sur fiche perso ***/
    /* Le cadre qui contient les badges */
    #listing-badges{
        background: #F0E9D6;
        border: 1px solid #666;
        border-radius: 5px;
        box-sizing: border-box;
        margin: 10px auto;
        padding: 10px;
        text-align: center;
        width: 96%;
    }
      
    /* Titre "Mes badges" */
    #listing-badges h3{
        border-bottom: 2px solid #666;
        color: #666;
        font-size: 18px;
        font-weight: bold;
        line-height: 25px;
        margin-bottom: 5px;
        background-color:#EFD485;
        font-family:amatic SC;
        font-size:25px;
    }

    #listing-badges label,
    #listing-badges input[type="checkbox"]{
      display: inline-block;
    }

    /* On cache les cases à cocher */
    .liste-badges #listing-badges input,
    .postbody #listing-badges input{
      display: none;
    }

    /* Image en noir & blanc */
    .liste-badges #listing-badges input + label,
    .postbody #listing-badges input + label{
      filter: grayscale(1);
      -webkit-filter: grayscale(1);
    }

    /* Image en couleur qui la case est cochée */
    .liste-badges #listing-badges input[checked="checked"] + label,
    .postbody #listing-badges input[checked="checked"] + label{
      filter: grayscale(0);
      -webkit-filter: grayscale(0);
    }


.mod-recent-info{  border-bottom: 1px solid;}


ul.linklist li.ssrep{
  font-size:15px;
border: 1px solid;
  background-color:#EDD293;
  border-radius:7px;
position: relative;
left:280px;
padding:10px}

Javascript ( je n'ai rien modifié puisque comme sur le tuto je suis en version modernBB et pas d'image ) je l'ai fait s'afficher sur toutes les pages ...

Code:
/*Au chargement de la page*/
$(function(){
  // on indique la version du forum : attention de bien respecter les écritures ci-dessous
  // invision, phpbb2, phpbb3, punbb, modernbb
  var versionForum = 'modernbb';
  var nouvelleImage = '';
 
 var  lastNbNotif, //on crée la variable qui récupérera le nombre de notifications actuelles
    cheminNav; // On crée la variable pour les différents chemins selon la version

 // En fonction de la version du forum, on récupére les bons élements à cibler pour la barre de navigation
    switch(versionForum){
        // Si on est sur invision
        case 'invision':
        cheminNav = '#ipbwrapper #submenu ';
          break;

        // Si on est sur phpbb2
        case 'phpbb2':
        cheminNav = '.bodyline > table td[align="center"] ' ;
          break;

      // Si on est sur phpbb3
        case 'phpbb3':
          cheminNav = '.navbar .navlinks ';
          break;

        // Si on est sur punbb
        case 'punbb':
        cheminNav = '#pun-head #pun-navlinks ';
          break;

        // Si on est sur modernbb
        default:
          cheminNav = '.headerbar .navbar.navlinks ';
          break;
    }
 
  // On récupère le chemin de la barre de navigation et plus particulièrement le "bouton" notification
  //On récupère le texte "normal" du bouton de Notification
var cheminNavbar=cheminNav +'a[href="/profile?mode=editprofile&page_profil=notifications"]';
var textNavBar = $(cheminNavbar).text();

  // On récupère le nombre de notification dans la toolbar
  // S'il y a une notification ET que le nombre de notification de la toolbar est différent de celui enregistré dans la variable
    // on ajoute une class au lien de la barre de navigation concerné
    // On modifie l'image
    // On ajoute le nombre de notification dans la barre de navigation
    // On enregistre le nombre de notification dans la variable
function majNotification() {
  var nbNotif=$('#fa_notifications').find('#notif_unread').text();
 if(nbNotif != "" && nbNotif!=lastNbNotif){
          $(cheminNavbar).addClass("newNotif");
          $(cheminNav +'a[href="/profile?mode=editprofile&page_profil=notifications"] img').attr("src",nouvelleImage);
          $(cheminNavbar).text(textNavBar + ' ' + nbNotif);
 lastNbNotif=nbNotif;
        }
}
 
  // Au chargement de la page, on attend 1 seconde (1000 ms), on appelle notre fonction
  setTimeout(function(){
 majNotification();
  }, 1000);
  // Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
 setInterval(function(){
 majNotification();
  }, 30000);
 
});


[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  1771426679  Qu'est ce que j'ai oublié ...?
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mer 30 Oct 2019 - 14:09
Coucou Smile

Tu as un compte que je peux utiliser pour voir le lien "en action" ? Smile

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mer 30 Oct 2019 - 15:17
Oui Smile

Par contre attend, avant de chercher, je viens tout juste de tilter un truc : Quand on a les notif' sur la toolbar, quand on clique dessus ça n'ouvre pas une nouvelle page, ça s'ouvre sur la même page et il y a la liste des notifications, qui permet d'aller directement sur les sujets... la quand on clique sur Notifications, ça nous ouvre carrément la page des notifications ... il n'y a pas moyens avec du javascript ( ou une baguette magique hihi ) de garder le même système que dans la toolbar mais en la mettant sur la barre de navigation ?
(Car pour le coup, si c'est impossible, cela me gène un peu et dans ce cas je préfère remettre la toolbar, auquel cas ça ne serai pas la peine de se creuser la tête ^^' )

Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mer 30 Oct 2019 - 15:21
En gros, tu aimerais avoir le lien "notification" dans ta barre de nav' mais garder le système des notifs de la toolbar ? (affichage d'un bloc "en plus" au clic dessus qui contiendrait les notifs)

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mer 30 Oct 2019 - 15:27
@Miettes a écrit:En gros, tu aimerais avoir le lien "notification" dans ta barre de nav' mais garder le système des notifs de la toolbar ? (affichage d'un bloc "en plus" au clic dessus qui contiendrait les notifs)

Exactement Laughing ( En bonne chi*use que je suis hihi )
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mer 30 Oct 2019 - 16:11
La bonne nouvelle, c'est que c'est possible Very Happy

La mauvaise, c'est qu'il va y avoir un peu de CSS à revoir Smile

On essaie ?

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mer 30 Oct 2019 - 17:48
Super Very Happy Comme toujours, trop forte Miettes Very Happy !!

Pas de soucis pour la CSS, je suis prête !!
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mer 30 Oct 2019 - 17:54
Alors c'est parti Smile

Le javascript

On va zapper tout le js du tuto et on va le remplacer par celui-ci :
Code:
$(function(){

  function majNotification(){
    // On récupére le contenu des notifications de la toolbar
    var contentNotif = $('#fa_notifications')[0].outerHTML;
    contentNotif += $('#fa_notifications + #notif_list')[0].outerHTML;

    if(firstTime){
      // Si on arrive sur la page la première fois,
      // on ajoute une classe sur le li qui contient le lien des notifs
      // Et on remplace le contenu par celui récupéré plus haut
      $('.navbar.navlinks').find('a.mainmenu[href="/profile?mode=editprofile&page_profil=notifications"]').parent('li').addClass('link-notifs').html(contentNotif);

      // On indique qu'on a déjà vérifié la toolbar une fois
      firstTime = false;
    }else{
      // Si on a déjà vérifié la toolbar une fois
      // dans ce cas, on se contente de mettre les notifs à jour
      $('.navbar.navlinks').find('.link-notifs').html(contentNotif);
    }
 
  }

  // Au chargement de la page, on indique qu'on n'a pas encore vérifié la toolbar
  var firstTime = true;

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

  $('body')
    // Au clic sur le lien des notifications dans la barre de navigation
    // On lui ajoute une classe pour déplier la liste des notifs
    .on('click', '.navbar .link-notifs #fa_notifications', function(evt){
      evt.preventDefault();
      $(this).parent().toggleClass('notification');
    });

});

Il est commenté pour que tu puisses le comprendre Smile

La CSS

Idem, on remplace toute celle du tuto par celle-ci.
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;
}

.navbar > li{
  position: relative;
}

.navbar #fa_notifications {
    color: #fff;
    cursor: pointer;
    line-height: 30px;
    padding: 0 5px
}

.navbar #fa_notifications.unread{
  color: red;
}

.navbar #fa_notifications:hover{
  color: #000;
}

.navbar #notif_list{
  background-color: #fdfdfd;
    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: 1.3rem;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    position: absolute;
    text-align: left;
    top: 42px;
    width: 200px;
    z-index: 10000;
}

.navbar #notif_list li{
  margin: 4px 0;
}

.navbar .notification #notif_list {
    display: block;
}

.navbar #notif_list .content a{
  color: #000;
  font-weight: bold;
  padding: 0;
}

.navbar #notif_list .see_all a{
  background: #333;
  border: 1px solid #333;
  color: #fdfdfd;
}

.navbar #notif_list .see_all a:hover{
  background: #fdfdfd;
  color: #333;
}

Ici, je l'ai reprise pour avoir quelque chose de présentable, mais je te laisse faire tes propres modifications.

La CSS n'est pas commentée, donc si besoin, n'hésite pas Smile

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Jeu 31 Oct 2019 - 11:52
Coucou !
J'ai tout mis en place mais ça ne fonctionne pas , dois y avoir un truc qui coince quelques part ^^'
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Jeu 31 Oct 2019 - 12:05
Il y a un espace dans ton lien "notification" on dirait. Du coup, le js ne le trouve pas Smile

J'ai installé la même chose sur la Tambouille et ça fonctionne parfaitement.

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"

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Jeu 31 Oct 2019 - 12:22
Ha oui ^^effectivement !!
ça fonctionne maintenant par contre il y a quand meme un truc surprenant ^^
Quand j'ouvre les notif' ça fonctionne et au bout de quelques instant, l'intérieur du cadre diparait :O
[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Captur45


Pareil ici sur la Tambouille quand je cique sur Notifications, le 1er coup ça a bien marché mais depuis :

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Captur46
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Jeu 31 Oct 2019 - 14:10
Oh effectivement Surprised

je ne sais pas pourquoi, mais il y a de l'opacité qui s'ajoute :/ heureusement, ça va se régler en CSS :p

Dans la CSS, on va donc remplacer ça
Code:
.navbar #notif_list li{
  margin: 4px 0;
}
par ça
Code:
.navbar #notif_list li{
  margin: 4px 0;
  opacity: 1!important;
}

et ça devrait régler le problème Smile

(253 notifs Surprised)

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Ven 1 Nov 2019 - 17:50
Super ça fonctionne Very Happy

Et , une idée, mais si c'est compliqué je peux m'en passer No problem Smile : Est ce qu'on pourrait faire que les notifications lues apparaissent en clair (avec l'opacité justement peut etre ?) , comme ça même si on ne peut pas les supprimer, on sait que ces messages ont étaient vus Smile

(ouais, j'ai un peu de retards sur mes Notifs, c'est le problème d’être irrégulières xD )
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Ven 1 Nov 2019 - 20:25
Coucou Smile

Alors,on peut sans souci faire ça Smile et bonne nouvelle, ce n'est que de la CSS ^^

Voilà ce qu'on va faire :
- par défaut, on va baisser l'opacité de tous les points de la liste. Du coup, ici, on va mettre l'opacité à la moitié par exemple :
Code:
.navbar #notif_list li{
  margin: 4px 0;
  opacity: .5!important;
}

- Par contre, la liste "voir toutes les notifs", on le mets à 1
Code:
.navbar #notif_list li.see_all{
    opacity: 1!important;
}

- Et celles non lues, on les mets à 1 aussi :
Code:
.navbar #notif_list li.see_all,
.navbar #notif_list li.unread {
    opacity: 1!important;
}

Je te laisse tester ? Smile

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Lun 4 Nov 2019 - 12:30
ça marche nickel ! c'est parfait Very Happy !! Merci beaucoup !!
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Lun 4 Nov 2019 - 13:57
Hello Smile

Ah génial !

Tout est bon du coup ?

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mar 5 Nov 2019 - 11:39
Coucou ! J'allais te dire oui on peut archiver mais en fait j'ai une idée/question de plus ^^

Actuellement il y a 10 notifs qui apparaissent, y a t il un moyen d'en mettre plus ?

Et si oui, ajouter une scrollbar dans le cadre des notifs ( mais ça je pense que je trouverai, ce sera surement un truc dans la CSS du genre overflow: scroll ? ^^)

(et j'en profite même si c'est pas le sujet adéquate mais, sais tu s'il existe des tutos assez simple d’accès qui permettrait de comprendre les toute 1ere base du javascript ? Car malgré les annotations sur les scripts j'ai du mal à saisir comment sont fait les liens entre les templates FA et les codes javascripts Smile ça peut etre une idée de tuto de plus sur la tambouille Razz )
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mar 5 Nov 2019 - 11:41
Hello Smile

Actuellement il y a 10 notifs qui apparaissent, y a t il un moyen d'en mettre plus ?
ça je pense que c'est lié au script de base de FA :/ On ne pourrait pas changer ça sans tout réécrire :/

Pour le js, c'est dans ma liste de choses à faire Smile J'ai déjà fait un premier tuto : [JavaScript] Les bases du jQuery. Il faut que je prenne le temps de continuer Smile

_________________
MmeFeuillage
MmeFeuillage
Informations : - Absente le week end du vendredi midi au Dimanche soir Wink
Messages : 147
https://forumfeminin.forumactif.org

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mar 5 Nov 2019 - 12:34
Ha je n'avais pas vu ce tuto c'est déja pas mal, je vais aller voir ça de plus prés Very Happy

Tant pis pour le nombre de notifs, c'est bien comme ça aussi Smile

Encore Merci !!
Cette fois c'est bon, tu peux archiver Smile
Pêpêche
Pêpêche
Mascotte
Messages : 4528

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Mar 5 Nov 2019 - 14:17
Topissime Smile

J'archive du coup ^^

_________________
Contenu sponsorisé

[Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)  Empty Re: [Aide Codage] Notification dans la barre de nav' , besoin d'un coup de pouce ;)

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses