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