Modifier le menu de prestashop 1.6

Modifier l’apparence de votre site Prestashop 1.6 : changer le menu, couleur et font

Dans ce tuto nous allons modifier l’apparence du menu haut. Si vous souhaitez modifier le contenu, rendez-vous sur notre tuto : Les éléments du menu principal : catégories et liens

I Editeur de texte/modifier-le-contenu-du-menu-dans-prestashop-1-6/

Pour modifier le menu, il faudra modifier le code CSS. Pour cela nous avons besoin d’un éditeur de texte par exemple notepad ++, un éditeur de texte gratuit et très bien fait.

Rendez-vous sur le site de notepad et téléchargez la dernière version notepad ++

Vous pouvez aussi suivre notre tutoriel sur comment installer notepad++

II Votre thème
Copie du thème

On va travailler sur une copie du thème pour toujours garder une sauvegarde de l’original.Si vous ne l’avez pas déja fait, suivez notre tutoriel : Faire une copie de son thème prestashop 1.6

III Modifier la couleur de fond du menu

Ouvrez le fichier css qui correspond à la feuille de style de votre menu. Voici le chemin:
votre dossier prestashop > themes > le nom de la copie de votre thème (test pour nous) > css > modules > blocktopmenu > css > superfish-modified
Ouvrez le fichier appelé superfish-modified.

Dans le fichier superfish-modified, nous allons nous intéresser au paragraphe .sf-menu situé à la ligne 13 et plus particulièrement à la ligne : background: #f6f6f6. Background correspond à la couleur de fond et #f6f6f6 correspond à la couleur blanche.

 

Zone css correspondant au menu

Pour changer cette couleur, remplacez #f6f6f6 par une valeur hexadécimale composée de 6 chiffres précédés d’un dièse.
Vous pouvez trouver les valeurs hexadécimales à l’adresse suivante dans la colonne du milieu:

Couleurs du web

Je voudrais que mon menu soit rose, je vais donc remplacer #f6f6f6 par #FF00FF.
Voici le résultat :

 

Couleur de menu : rose
Modifier les bordures du menu

Il y a une bordure grise en dessous du menu, je souhaite mettre une bordure violette. Toujours dans le paragraphe .sf-menu nous nous intéressons à la ligne : border-bottom: 3px solid #e9e9e9;
border-bottom correspond à bordure du bas, 3px correspond à la taille de la bordure, solid correspond à la forme de la bordure, #e9e9e9 correspond à la couleur de la bordure.

Remplaçons la couleur grise par une couleur violette, je remplace #e9e9e9 par #4B0082.
Voici le résultat :

Bordure du menu violette

 

Comme vous le voyez, la bordure n’a pas été remplacée sur toute la longueur du menu, il faut aussi la remplacer sous les onglets. Dans le fichier superfish-modified, allez à la ligne 60, intéressons-nous au block .sf-menu > li > a et plus particulièrement à la ligne border-bottom: 3px solid #e9e9e9;

Zone css correspondant aux onglets

 

Là aussi je remplace #e9e9e9 par #4B0082. La bordure apparait aussi sous les onglets.

Bordure du menu violette complète

 

Modifier les bordures des onglets

Entre chaque onglet, il y a une fine bordure grise, je souhaite mettre une bordure bleue. Dans le fichier superfish-modified allez à la ligne 60, intéressons-nous au block .sf-menu > li et plus particulièrement à la ligne border-right: 1px solid #d6d4d4;

Zone css correspondant aux onglets

 

Je remplace #d6d4d4 par #0000CD qui correspond à une couleur bleue foncée. La bordure bleue entre les onglets apparait.
Voici le résultat :

Bordure bleue entre les onglets

 

Modifier la couleur des onglets au passage de la souris.

Lorsque nous passons la souris sur un onglet, celui-ci prend une couleur gris foncé, nous voulons mettre une couleur bleue.

Zone css correspondant aux onglets au passage de la souris

 

Dans le paragraphe ligne68 .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a, nous nous intéressons à la ligne :background: #333333;
Remplaçons la couleur grise par une couleur bleue, je remplace #333333 par #0000CD.
Voici le résultat :

Fond onglet au passage de la souris

 

Modifier la bordure des onglets au passage de la souris.

Je voudrais maintenant mettre une belle bordure orange sous mon onglet bleu au passage de la souris. Toujours dans le paragraphe ligne68 .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a nous nous intéressons à la ligne : border-bottom-color: #666666; Remplaçons la couleur grise par une couleur bleue, je remplace #666666 par #FFA500.
Voici le résultat :

Bordure onglet au passage de la souris

 

 

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.

62 thoughts on “Modifier le menu de prestashop 1.6

  1. Bonjour,
    Je viens de faire un maj de ma boutique prestashop 1.4.11 vers la version 1.6.1.4 jusque là pas de problème.
    J’essaie actuellement de modifier l’apparence du thème bootstrap en suivant vos conseils et là je rencontre beaucoup de difficulter, parfois les modifications apparaissent et parfois non.
    J’utilise dreamweaver qui fonctionnait parfaitement sur la version précédente de presta 1.6

    Pensez-vous que cela peut provenir de dreamweaver, je travaille sur Mac et j’utilise aussi textedit, mais le problème c’est q’avec text edit je n’ai pas le numero des ligne de code

    Pourriez-vous m’aider s’il vous plaît, je m’en remet à vos compétences
    Merci d’avance pour votre réponse.
    Bien cordialement
    Francois Pereira

  2. Si les modifications n’apparaissent pas c’est qu’un style passe par dessus celui que vous voulez appliquer.
    Avez vous garder votre thème lors de la maj ou utilisez vous le thème par défaut de prestashop ?
    Il existe des alternative à notepad++ pour mac qui affiche le numéro de la ligne.
    Votre site est il en ligne ? vous pouvez me donner l’adresse, je ne la publierai pas comme ca je regarde un peu les fichiers actifs.

  3. Bonjour,
    Tout d’abord je trouve vos tutos réellement top et sans vraiment d’équivalence concernant la modif de thème prestashop. Moi qui maitrisais bien WP j’ai eu un peu de mal au début à prendre mon site en main mais vos tutos sont d’une grande efficacité.
    En revanche je me rend un peu folle car comme la personne ci dessus certaines de mes modifs ne passent pas… J’utilise pour ma part filezilla et notepad pour effectuer les modifs. Je vide bien le cache sur le ftp ou sur l’admin de ma boutique ce qui aide parfois à en rendre visible mais pas toujours… Par exemple impossible de changer le fond de ma boutique ainsi que le pied de page. C’est un réel mystere. (j’ai la dernière version de presta car installée fin janvier…).
    Si vous avez des pistes je suis extrêmement preneuse 😉

  4. Merci pour vos compliments qui me font trés plaisir.
    Votre site est il en ligne ? Comme ça je regarde.
    Avec filezila vous pouvez voir les fichier css qui sont actifs, à partir de quel fichier css avez-vous le fond ?

    1. De rien ils sont sincères!!! Je ne savais pas que sous filezilla on pouvait voir les fichier css actifs, je vais faire des recherches sur le web pour en savoir plus… Pour le fond je vais dans le fichier de mon theme (une copie du theme par defaut que j’ai renommé) puis dans css et global…
      Voici mon site [modifié par admin] (pour l’instant il est très moche car je fais pas mal de test dessus et les photos sont pourries 😉 )
      Merci pour votre aide

        1. Bonjour,
          J’ai supprimé votre url pour que vous ne soyez pas embêté par les robots.
          Actuellement le configurateur de thème est activé c’est donc lui qui a la priorité, c’est ce qui donne la couleur bleu des onglets et le fond. Deux solutions, soit vous désactivez le configurateur et vous allez vous retrouver avec la version de base, vos modifications seront donc prise en compte. Sinon terminez vos éléments en css par !important cela permet de prendre la priorité. Par exemple : background-color : #ffffff!important;
          Mais je ne vus cache pas que l’utilisation du important peux générer des problèmes.
          Bonne journée

          1. Super, merci beaucoup pour votre réponse!!! J’ai opté pour le « !important » et cela fonctionne. J’espère que cela ne générera pas de pb, pour l’instant il semble que non… Merci beaucoup!

          2. Bonjour,

            J’ai utilisé !important mais les modifications (changement du fond du menu en noir) ne remontent toujours pas. Avez-vous une idée de ce qui pourrait bloquer ?

            Vous remerciant pour votre aide.

            cdt.

            Arnaud

          3. Bonjour,

            Avez vous correctement vidé les cache, car la je ne vois pas du tout de modifications sur votre site, donc les fichiers que vous avez modifié ne sont pas pris en compte.
            Videz les caches navigateur et prestashop
            Vérifié que vous avez modifié le bon fichier et pas celui de la copie par exemple.

            Bonne journée

  5. Bonjour,

    Tout d’abord je souhaitais vous remercier pour vos tutos très complets!
    J’ai essayer d’ajouter des couleurs sur mon site http://www.kustohm-kids.fr mais cela ne fonctionne pas.
    Pourriez y jeter un coup d’oeil svp?
    Je ne comprends pas d’où cela pourrait venir!
    Merci en avance
    Patrice

  6. Bonjour,

    Je souhaiterai que mon menu prenne toute la largeur de mon site (je suis sur Prestashop 1.6.1.2), est-ce que c’est possible?

    Merci pour votre retour.

    1. Bonjour,
      C’est possible mais assez compliqué. Je pense que vous voulez juste une couleur qui fasse le largeur de l’ecran avec le menu centré au milieu.
      Je pense que le plus simple est de créer une bande de la couleur en bas du header en CSS pour donner l’impression que le menu prend toute la largeur.
      Sinon le site prestashop est conçu pour avoir une largeur de 1170px mais vous pouvez supprimer cette valeur (global.css) et votre site prendra toute la largeur, mais cela demandera de bonnes connaissances en CSS.

  7. Bonsoir,
    et merci pour vos conseils plus que précieux…
    Une petite question:
    comment faire pour supprimer la partie en trop dans le menu et n’avoir que les onglets, avec la couleur de fond à la place de la partie rectangulaire vide?
    merci d’avance

    1. Bonjour,
      dans le fichier css du module : superfished-modified.css
      vers la ligne 13
      il faut supprimer deux lignes :

      .sf-menu {
      position: relative;
      padding: 0;
      width: 100%;
      border-bottom: 3px solid #e9e9e9;
      background: #f6f6f6;
      }
      Mais il faudra mettre des couleurs sur les onglets.

      Bonne journée

  8. Bonjour,
    merci pour ces tutos, ça rend un gros service aux personnes comme qui ne connaissent pas grand chose à la programmation.
    Pourriez vous svp expliquer comment faire pour diminuer les marges des onglets afin de gagner de l’espace.
    Car j’ai pas mal de catégories et j’aimerais pouvoir les mettre sur une seule ligne aux lieu de 2 lignes. J’ai déjà changé la grandeur de la police mais ça ne suffit pas.
    je vous remercie
    Bonne journée

    1. Bonjour,

      Sur le fichier superfish-modified.css (le fichier css du module blocktopmenu)
      Vers la ligne 67
      .sf-menu > li > a {
      font: 600 9px/14px "Open Sans", sans-serif;
      text-transform: uppercase;
      color: #484848;
      display: block;
      padding: 17px 20px;

      Vous pouvez modifier le 20px

      Bonne soirée

  9. bonjour tout dabord merci pour votre tutoriel je voudrai savoir comment faire pour que le menu soit sur toute la largeur de la page et aussi comment supprimer les bordure entre les onglet? comment reduire la hauteur du memu

    1. Vous voulez que le menu prenne la largeur de l’écran ?
      Pour les bordure c’est expliqué au paragraphe : Modifier les bordures des onglets de ce tutoriel

      Bonne journée

  10. Bonjour,
    Je cherche désespérément à modifier la hauteur de la bannière en faut de ma boutique Prestashop et je n’y arrive pas. j’ai le thème Leobootstrap
    Je vais dans configurateur de thème avancé, je peux baisser mais pas augmenter au delà de 65 et moi je veux 482 à la place de 65.
    est ce que je peux modifier dans un des fichiers et lequel ?

    Merci de votre aide.

    1. Bonjour,

      Dans votre thème :
      css–> module –> blockbanner –> blockbanner.css

      Au debut vous avez :
      #header .banner a {
      display: block;
      max-width: 1170px;
      max-height: 65px;
      }

      Augmentez le max-height à 482;

      Bonne journée

  11. Bonjour

    Merci pour l’aide que vous nous donnez.
    Je voudrais savoir comment modifier la couleur des bandes noires separatrices des blocs.

    Merci

    1. Bonjour,

      Le paragraphe : Modifier les bordures des onglets ne répond pas à votre question ?
      Je ne comprend pas trop ce que vous entendez par bandes noires.

      Bonne journée

    1. Bonjour,

      Le problème c’est que c’est assez compliqué pour positionner proprement le menu verticale sous le bon lien. Puisque de base le sous menu prend 100% de la largeur, il faut le réduire et le positionner, ca mériterai un tuto rien que pour ça. Sinon vous pouvez utiliser un module.

  12. Bonjour,
    Merci pour votre tuto. Je cherche à personnaliser une seule catégorie du Menu.
    Par exemple, j’ai un site où dans le menu il y a différentes pages CMS (« Ecole de Musique », « orchestre ») et un bouton « Vente en ligne » (une catégorie avec des sous catégories). J’aimerai savoir si il est possible de mettre uniquement en gras ou d’une autre couleur le bouton « Vente en ligne » .
    Merci d’avance

  13. Bonjour,

    Il semblerait que le lien « http://tutoriel.webetplus.fr/faire-une-copie-de-son-theme-prestashop-1-6/ » ne fonctionne pas « Error 404 Vhost unknown »

    Je suis sur 1&1 avec prestashop déjà installé, j’ai fait une sauvegarde de mon thème et obtenu un fichier compressé que j’ai enregistré sur mon PC.
    J’accède ainsi aux fichiers du template et notamment au CSS et peut ainsi les modifier.

    Ma question : une fois un fichier modifié (par exemple un fichier CSS), comment faire pour l’importer et le mettre en ligne (dans le thème qui est sur le serveur 1&1) ?

    Je vous remercie d’avance pour votre retour

    1. Bonjour,

      J’ai modifié le lien, merci de me l’avoir fait remarquer.
      Pour mettre vos modifications en ligne il faut utiliser le ftp et le logiciel fileZilla

      Bonne soirée

      1. Bonjour,

        Je vous remercie à mon tour 🙂
        Je viens de paramétrer FileZilla et ai modifié mes premiers fichiers. ça marche !

        Merci encore

    1. Bonjour

      Oui c’est tout à fait possible, dans le fichier css du block top menu il faut cibler les sous-menus et remplacer le blancn par une image.

      Bonne journée

  14. bonjour!
    je voudrais que dans les cases du menu horizontal, le texte soit sur 2 lignes a l’intérieur des cases

    avoir : spices &
    condiments

    Au lieu de spices & condiments.

    J’ai questionné le développeur qui m’a répondu de gérer ça avec les CSS. J’ai beau essayer…. je cale.

    Auriez vous des idées, j’ai besoin d’un coup de main.

    Merci d’avance.

    Cordialement.

  15. Bonjour,

    Je souhaitais surtout vous remercier pour tous les tutos que vous faîtes. Je n’ai rien trouvé d’égal sur le net, ils sont clairs, précis, et très simples à suivre même pour des novices comme moi ! Un grand grand merci pour tout ce travail !

  16. bonjour
    je suis back-office d’une boutique prestashop mais le probleme est que jai pas creer le site et la personne qui la creer est injoignable. dc comment faire pour trouver la racine CSS du site. Ps en plus si jessaie d’editer avec mozilla feuille de styler ca ne marche pas.
    vraiment besoin d’aide. mon email est ****

    1. Bonjour,

      Je vous ai envoyé un mail, mais votre site semble « classique », les fichiers sont donc à l’endroit indiqué par mes tutos.

      Bonne journée

  17. Bonjour,
    J’aimerais que mon menu soit centré et les sous-menus alignés à gauche.
    Dans le superfish-modified il n’y a qu’une commande text-align ligne 14 et elle commande les menu et sous menu
    Si il y a une solution, pouvez vous m’aider?
    Merci et bravo pour vos tutos très utiles qui m’ont bien aidés
    Dominique

    1. Bonjour,

      Les sous_menu sont déjà aligné à gauche, pour centrer le menu, dans le superfish-modified ligne 13 remplacez text-align: left; par text-align: center;

      Bonne journée

      1. Bonjour et merci pour votre réponse
        Mais non, si je change left par center, le menu(les catégories) est centré c’est bien mais les sous-menus(sous-catégories) sont également centrées.
        Comme je l’écrivais dans mon message initial la ligne 14 commande les menus et sous menus.
        Mon problème n’est pas résolu
        Je vais continuer à chercher
        Cdt
        Dominique

        1. Ok j’ai compris.
          Remplacez la ligne 14 par text-align : center; et à la ligne 91 rajoutez : text-align: left; en dessous de
          .sf-menu li ul {
          Ca devrait fonctionner
          Bonne journée

  18. Bonjour,
    Est il possible de modifier :
    – la police du menu ?
    – de mettre une image pour séparer les onglets du menu plutôt que d’avoir un trait ?

    Bonne journée.

    1. La police se change dans le fichier css du blocktopmenu qui s’apelle superfish-modified.css; ligne 60 environ
      .sf-menu > li > a {
      font: 600 18px/22px "Open Sans", sans-serif;

      Modifiez « Open Sans », sans-serif en ce que vous voulez.
      Mettre une image c’est possible, mais c’est un peu compliqué à expliquer il faudra mettre un :after avant les li et mettre une image dans le css.
      Vous pouvez regarder le site https://www.les-mamies-tricoteuses.fr/ et inspecter pour comprendre comment j’ai fait.

      1. Bonjour,

        Dans le fichier superfish-modified, vers la ligne 60, il y a un pragraphe :

        .sf-menu > li > a {
        font: 600 18px/22px "Open Sans",sans-serif;
        text-transform: uppercase;
        color: #fff;
        display: block;
        padding: 17px 20px;
        border-bottom: 3px solid #70057F;

        Remplacez open Sans par verdana, mais attention toutes les polices ne sont pas utilisables, je vous invite à lire cet excellent article sur les fonts :
        https://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html

        Bonne journée

  19. Bonjour,
    j’ai un soucis de menu, mon site comporte 9 catégorie, le menu en affiche 5, le sixième est « more » avec une fleche et le reste de mes catégories s’affiche dessous.
    Mais le problème est que « more » est seulement a la moitié du menu, du coup j’ai un grand espace de libre sur la droite qui pourrait contenir le reste de mes onglets…
    Mon site n’est pas encore en ligne…
    Pouvez vous m’indiquer une piste?
    Par avance merci.

    1. Le fichier du menu à été fait de telle façon que si le nombre d’élément du menu dépasse cela se met en sous-menu à partir du 5ème élément. C’est plutôt pas mal car cela empêche le menu sur deux lignes qui est affreux et provoque des bug de déploiement des sous menus. Si vous voulez modifier ce comportement, il faut modifier le fichier tpl du module blocktopmenu dans votre thème. Faites une copie de ce fichier vous pouvez essayer de le remplacer par celui qui est dans le thème par défaut de prestashop et voir si le comportement vous plait plus.

      Bonne journée

      1. oui, fichier remplacé et caches vidées. par contre je n’ai qu’un seul module. je vais continuer a chercher. si je trouve j’apporterais la solution. merci

Laisser un commentaire

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