JS: changer la couleur de la navbar (+ couleur au survol)
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
JS: changer la couleur de la navbar (+ couleur au survol)
Détails techniques
Version du forum : ModernBBPoste 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 !
Dernière édition par Beylin le Lun 21 Mai 2018 - 12:26, édité 1 fois
Re: JS: changer la couleur de la navbar (+ couleur au survol)
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).
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 :
Puis à utiliser la pseudo classe ":hover" en CSS pour personnaliser le comportement dudit survol.
Vous souhaitant une bonne journée,
Cordialement,
w00tw00t
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
Re: JS: changer la couleur de la navbar (+ couleur au survol)
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
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
Re: JS: changer la couleur de la navbar (+ couleur au survol)
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 :
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 :
A noter aussi pour d'autres qui s'intéresseraient au sujet qu'il est possible d'opter pour une solution majoritairement CSS :
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
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
Re: JS: changer la couleur de la navbar (+ couleur au survol)
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 !
Merci encore !
Sujets similaires
» Changer groupes dans navbar
» Changer la couleur lors du survol
» Changer la couleur de la colonne des sujets au survol?
» Changer la couleur de survol dans le profil
» Changer couleur bouton "creer nouveau sujet" réponse topic + changer couleur fond recherche sous-forum
» Changer la couleur lors du survol
» Changer la couleur de la colonne des sujets au survol?
» Changer la couleur de survol dans le profil
» Changer couleur bouton "creer nouveau sujet" réponse topic + changer couleur fond recherche sous-forum
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum