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.
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:
Je voudrais que mon menu soit rose, je vais donc remplacer #f6f6f6 par #FF00FF.
Voici le résultat :
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 :
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;
Là aussi je remplace #e9e9e9 par #4B0082. La bordure apparait aussi sous les onglets.
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;
Je remplace #d6d4d4 par #0000CD qui correspond à une couleur bleue foncée. La bordure bleue entre les onglets apparait.
Voici le résultat :
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.
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 :
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 :
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
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.
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 😉
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 ?
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
je viens de réaliser que je me suis trompée dans l’url: (modifier par admin)
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
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!
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
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
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
Bonjour,
Je vois que vos couleurs ont été modifiées, avez vous réglé votre problème ?
Bonjour,
Oui j’ai réglé mon problème grâce à firebug, il y avait encore une référence qui n’était pas modifié.
Merci encore pour votre aide.
Patrice
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.
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.
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
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
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
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
Merci,
mais comment mettre une couleur que sur les onglets?
Salut, j’ai changé le code de couleur du menu mais ça ne donne rien, rien ne change j’ai besoin de votre aide svp 🙁
Bonjour,
Avez vous vidé les caches ?
Pouvez vous me donner l’adresse du site pour que je regarde ?
Bonne journée
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
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
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.
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
Bonjour
Merci pour l’aide que vous nous donnez.
Je voudrais savoir comment modifier la couleur des bandes noires separatrices des blocs.
Merci
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
bonjour merci pour votre tutoriel tout dabord je voudrai savoir comment faire pour que mes sous menus deroulants soient verticals et non horizontals
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.
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
Bonjour,
C’est un peu compliqué alors j’ai préparé un tuto spécifique pour ca :
Modifier un onglet spécifique
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
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
Bonjour,
Je vous remercie à mon tour 🙂
Je viens de paramétrer FileZilla et ai modifié mes premiers fichiers. ça marche !
Merci encore
Bonjour,
J’aimerai mettre une image à la place du texte dans un sous-menu. Est ce que c’est possible ?
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
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.
Bonjour,
Pouvez vous me donner l’adresse de votre site pour que je regarde.
Bonne journée
Bonjour, comment mettre en GRAS les titres du menu ?
Bonjour rajouter :
font-weight : bold;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 !
Votre commentaire me fait trés plaisir, c’est important pour moi de simplifier au maximum.
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 ****
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
Merci pour votre série de tutos, elle m’a été très utile !
Les commentaires également apportent des réponses intéressantes.
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
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
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
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
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.
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.
bonjour je profite de ce tuto merci beaucoup j’ai un site http://www.cosmafree.com et j’aime modifier le police comment faire merci
la police de menu horizontale verdenna ou autre …
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
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.
Bonjour,
C’est difficile à dire mais je pense que le menu doit être contenu dans une div qui n’est pas à 100% de la page et donc qui limite l’expension de votre menu. Quel est le nom du thème ?
Merci à vous.
Le theme est « PRS01 »
Je peux activer le site un moment si besoin.
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
Merci. En fait il ne se passe rien dutout…
Vous avez remplacer le fichier ? Avez vous videz vos caches (navigateur et prestashop). Si ca ne fonctionne pas c’est peut être qu’il y a un module spécifique dans ce cas je ne peux pas vous répondre sans voir le module.
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
Bonjour,
Je vois que vous maitrisez la barre de menu !!!!!!
J’ai d’ailleurs utilisé vos conseils pour modifier la mienne, merci…
Mais comment modifier la hauteur de cette barre de menu haut horizontale ?
Impossible de trouver sur le web ou les forums. Personne n’a encore trouvé que la hauteur de cette barre est trop importante ? Pour ma part l’effet graphique n’est pas terrible…
Merci pour votre réponse
Cordialement
Bonjour, il faudrait que je puisse voir votre site pour vous dire.