Parfois on peut souhaiter avoir des onglets d’une couleur différente des autres, par exemple pour le mettre en relief.
Dans notre exemple je voudrai que la catégorie robe soit de couleur rouge sur fond orange.
Pour cela j’ai besoin de cibler spécifiquement cet onglet, mais malheureusement ca n’est pas prévu par prestashop, donc on va devoir utiliser une petite astuce en utilisant l’id de catégorie.
1 Cherche l’id de la catégorie que l’on souhaite cibler
Rendez-vous dans la back-office et choisissez l’onglet catégorie, sélectionnez votre catégorie et notez l’id de la catéogorie que vous souhaitez changer, pour moi c’est les robes donc c’est l’id 8.
2 Modifier le superfish-modified.css
Dans le dossier de votre thème :
css –> module –> blocktopmenu–> superfish-modified.css
Allez à la fin du fichier et écrivez :
.sf-menu a[href*="8"]{
background: orange;
color: red;
}
8 représente l’ID de ma catégorie, vous pouvez le remplacer par votre id catégorie ou par des mots contenus dans votre lien, par exemple contact.
Et voila vous savez maintenant comment cibler un lien du menu et lui donner une couleur de texte ou une couleur de fond particulière.
Bonjour,
Merci pour ce tuto qui est exactement ce que je cherchais !
Par contre, seul hic, comme le lien de mon menu est une catégorie de produit qui possède des sous catégories, j’ai également un de mes liens de sous menus qui change de couleurs….
Merci pour votre retour !
Bonjour,
Vous devez rajouter des éléments à coté de l’id pour que l’url corresponde uniquement à ce que vous souhaitez. Les sous-catégories dont vous parlez doivent avoir des éléments contenues dans les guillemets.
Bonjour,
Merci pour votre tutoriel,
Ca aurait fonctionné pour moi si mon lien de menu était une catégorie, mais c’est un lien que j’ai créé moi même…
Comment faire pour le sélectionner ?
Merci d’avance.
Gérald
Bonjour,
Il vous suffit de mettre un éléments contenu dans le lien.
Par exemple si votre lien c’est href= »http://nomdusite.com »
Mettez :
.sf-menu a[href*="nomdusite.com"]comme sélécteur.Bonne journée
Ca ne fonctionne pas rien n’apparait 🙁
Bonjour,
Vous devez vider les caches navigateur et prestashop.
Cordialement
Bonjour,
Je ne pige pas ça ne fonctionne pas non plus je suis en 1.6.1.11.
j’ai vidé las caches, testés sur plusieurs Pc….
Bonjour,
Soit vous ne modifiez pas le bon fichier, soit un cache n’est pas vidé, soit le sélecteur n’est pas le bon, c’est une de ces solutions car ce code fonctionne.
Vous pouver me donner l’url, je vais regarder.
Bonne journée
merci beaucoup! ça a fonctionné du premier coup, il suffit de retranscrire le href correspondant à l’onglet en inspectant le menu et c’est fait. il semblerait qu’en 2020 ça fonctionne encore 😉