Modifier la couleur d’un seul onglet, personnaliser les liens du menu

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.

onglet

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.

catalogue

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.

N'hésitez pas à laisser un commentaire

Vous pouvez vous abonner à notre newsletter mensuelle pour être informé de nos nouveaux tutoriels.

Vous pouvez aussi aimer notre page facebook.

8 thoughts on “Modifier la couleur d’un seul onglet, personnaliser les liens du menu

  1. 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 !

    1. 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.

  2. 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

    1. 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

  3. 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….

    1. 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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *