JS: changer la couleur de la navbar (+ couleur au survol)

[Beylin]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sosodecadentbae.forumotion.com/

Description du problème

Bonjour !

Je cherche à mettre en place le script pour avoir une couleur au survol de la navbar ( https://forum.forumactif.com/t343371-phpbb2-une-couleur-pour-les-nouveaux-messages-prives ) sur mon forum mais ça ne fonctionne pas.

J'ai utilisé ce code  :

Code:

$(function(){
// l index
$('a.mainmenu[href="/"]').html('Index');
//Calendrier
$('a.mainmenu[href="/calendar"]').html('Calendrier');
//La faq
$('a.mainmenu[href="/faq"]').html('FAQ');
//Rechercher
$('a.mainmenu[href="/search"]').html('Rechercher');
//Les membres
$('a.mainmenu[href="/memberlist"]').html('Membres');
//Les groupes
$('a.mainmenu[href="/groups"]').html('Groupes');
//Profil
$('a.mainmenu[href="/profile?mode=editprofile"]').html('Profil');
//Messagerie
$('a.mainmenu[href="/privmsg?folder=inbox"]').html('Messages');
//Deconnexion
$('a#logout.mainmenu').html('Déconnexion');
//Connexion
$('a.mainmenu[href="/login"]').html('Connexion');
//S enregistrer
  $('a.mainmenu[href="/register"]').html("S'inscrire").css({"background-color":"#CF0000","color":"#FFFFFF"});
   $('img#i_icon_mini_new_message').parent().css('color', '#CF0000');
 
});

Aussi, comment on peut faire pour changer la couleur d'un item spécifique en hover ?
Pouvez-vous m'aider S'il vous plaît ?
Merci d'avance pour vos réponses et votre aide !

[w00tw00t]

Bonjour Beylin,

Le tutoriel en question n'adresse pas la problématique du survol.
Il change simplement la couleur du lien menant à vos MPs, lorsqu'un ou plusieurs nouveaux messages existent.

Pour avoir intégralement la main sur votre barre de navigation, l'idéal est très souvent d'en recréer une nouvelle à partir de l'ancienne avec l'aide de JavaScript, de manière à spécifier la nouvelle structure souhaitée et les classes CSS facilitatrices pour tel ou tel besoin.

Néanmoins, si il ne s'agit que de couleurs, je vous propose le code suivant, à ajouter en tant que nouveau script sur toutes les pages. Il vous permet d'assigner les couleurs des propriétés "color" et "background-color" de manière spécifiques à chaque menu de la barre de navigation, et ce dans le cas du survol (hover) ou non (normal).

Code:

$(function() {
  const changeMenuColorEvents = (link, background_color_normal, background_color_hover, color_normal, color_hover, start ) => {
      $('a.mainmenu[href'+((true === start)?'^':'')+'="'+link+'"]').each(function(){
        const $this = $(this);
        const onMouseOut = () => {
            $this.css('background-color',background_color_normal);
            $this.css('color',color_normal);
        };
        const onMouseOver = () => {
            $this.css('background-color',background_color_hover);
            $this.css('color',color_hover);
        };
        onMouseOut();
        $this.hover(onMouseOver,onMouseOut);
      });
  };
 
  /* Sans portail */
  changeMenuColorEvents('/','#e8aa6d','#860010','#0d41f1','#A3A3A3');
 
  /* Avec portail */
  /*
  changeMenuColorEvents('/','#e8aa6d','#860010','#0d41f1','#A3A3A3');
  changeMenuColorEvents('/forum','#e8aa6d','#860010','#0d41f1','#A3A3A3');
  */
 
  changeMenuColorEvents('/search','#b8aa6d','#220010','#5d00f2','#C3C3C3');
 
  changeMenuColorEvents('/memberlist','#e86d6d','#861010','#7d41f1','#E3E3E3');
 
  changeMenuColorEvents('/groups','#d77d7e','#154010','#ac41f1','#d8e9f8');
 
  changeMenuColorEvents('/register','#d77d7e','#154010','#ac41f1','#d8e9f8');
 
  changeMenuColorEvents('/login','#d77d7e','#154010','#ac41f1','#d8e9f8');
 
  changeMenuColorEvents('/faq','#d77d7e','#154010','#ac41f1','#d8e9f8');
 
  changeMenuColorEvents('/login?logout','#d77d7e','#154010','#ac41f1','#d8e9f8', true);
 
  changeMenuColorEvents('/privmsg','#d77d7e','#154010','#ac41f1','#d8e9f8', true);
 
  changeMenuColorEvents('/profile','#d77d7e','#154010','#ac41f1','#d8e9f8', true);
 
  changeMenuColorEvents('/calendar','#d77d7e','#154010','#ac41f1','#d8e9f8', true);
 
});

Pensez également à supprimer un éventuel code CSS qui fait déjà usage de la pseudo classe ":hover" pour redéfinir les couleurs des liens de votre barre.

Une autre solution de contournement pourrait consister à ajouter une classe spécifique pour chacun de vos liens en JavaScript :

Code:

$(function() {

      /* ... */

    $('a.mainmenu[href="/memberlist"]').addClass('menu_memberlist');

    $('a.mainmenu[href^="/login?logout"]').addClass('menu_logout');
 
      /* ... */

});

Puis à utiliser la pseudo classe ":hover" en CSS pour personnaliser le comportement dudit survol.

Vous souhaitant une bonne journée,

Cordialement,
w00tw00t

[Beylin]

Hello !

Merci beaucoup pour ton aide, ça marche !

Mais du coup j'avais une question. Comment faire pour changer la couleur du texte quand on reçoit un nouveau message ? Car le script que j'utilise et qui est basé sur le tuto que j'ai lié ne fonctionne pas en l'état

[w00tw00t]

Bonjour Beylin,

Pour avoir la main également sur l'état du menu lorsque vous avez reçu au moins un MP, vous pouvez ajouter une petite conditionnelle :

Code:

if( 0 === $('img#i_icon_mini_new_message').length ){
  changeMenuColorEvents('/privmsg','#d77d7e','#154010','#ac41f1','#d8e9f8', true);
} else {
  changeMenuColorEvents('/privmsg','#000000','#ffffff','#ffffff','#000000', true);
}

La première référence à la fonction s'applique lorsqu'aucun nouveau MP existe. Et la seconde référence dans le cas contraire. Ce qui vous permet donc de personnaliser les couleurs d'arrière plan et du texte, dans le cas ou un (ou plusieurs) nouveau(x) MP existe(nt), tout en conservant la latitude de modifier ces valeurs selon l'état hover ou non.

Je vous poste le code intégral au besoin :

Code:

$(function() {
  const changeMenuColorEvents = (link, background_color_normal, background_color_hover, color_normal, color_hover, start ) => {
      $('a.mainmenu[href'+((true === start)?'^':'')+'="'+link+'"]').each(function(){
        const $this = $(this);
        const onMouseOut = () => {
            $this.css('background-color',background_color_normal);
            $this.css('color',color_normal);
        };
        const onMouseOver = () => {
            $this.css('background-color',background_color_hover);
            $this.css('color',color_hover);
        };
        onMouseOut();
        $this.hover(onMouseOver,onMouseOut);
      });
  };
 
  /* Sans portail */
  changeMenuColorEvents('/','#e8aa6d','#860010','#0d41f1','#A3A3A3');
 
  /* Avec portail */
  /*
  changeMenuColorEvents('/','#e8aa6d','#860010','#0d41f1','#A3A3A3');
  changeMenuColorEvents('/forum','#e8aa6d','#860010','#0d41f1','#A3A3A3');
  */
 
  changeMenuColorEvents('/search','#b8aa6d','#220010','#5d00f2','#C3C3C3');
 
  changeMenuColorEvents('/memberlist','#e86d6d','#861010','#7d41f1','#E3E3E3');
 
  changeMenuColorEvents('/groups','#d77d7e','#154010','#ac41f1','#d8e9f8');
 
  changeMenuColorEvents('/register','#d77d7e','#154010','#ac41f1','#d8e9f8');
 
  changeMenuColorEvents('/login','#d77d7e','#154010','#ac41f1','#d8e9f8');
 
  changeMenuColorEvents('/faq','#d77d7e','#154010','#ac41f1','#d8e9f8');
 
  changeMenuColorEvents('/login?logout','#d77d7e','#154010','#ac41f1','#d8e9f8', true);
 
  if( 0 === $('img#i_icon_mini_new_message').length ){
    changeMenuColorEvents('/privmsg','#d77d7e','#154010','#ac41f1','#d8e9f8', true);
  } else {
    changeMenuColorEvents('/privmsg','#000000','#ffffff','#ffffff','#000000', true);
  }
 
  changeMenuColorEvents('/profile','#d77d7e','#154010','#ac41f1','#d8e9f8', true);
 
  changeMenuColorEvents('/calendar','#d77d7e','#154010','#ac41f1','#d8e9f8', true);
 
});

A noter aussi pour d'autres qui s'intéresseraient au sujet qu'il est possible d'opter pour une solution majoritairement CSS :

Code:

a.mainmenu[href="/memberlist"]  {
      color:#fff;
      background-color:#0f0;
}

a.mainmenu[href="/memberlist"]:hover {
      color:#0f0;
      background-color:#fff;
}

Néanmoins il y a des limitations. D'une part, puisque SASS n'est pas supporté par FA, cela résulterait en une grande quantité de code difficilement maintenable depuis le panneau d'administration pour la plupart d'entre vous. Et d'autre part en JavaScript vous avez plus de latitude pour aller plus loin. En vérifiant l'état du nombre de nouveau message, en vérifiant si la page courante correspond à tel lien pour en modifier la couleur, etc.. C'est pourquoi la solution JavaScript à ma préférence.

Cordialement,
w00tw00t

[Beylin]

Merci énormément pour ton aide et tes explications, c'est vraiment sympa d'y avoir passé autant de temps et en plus ça fonctionne *___*

Merci encore !