Modifier l’apparence de votre site Prestashop 1.6 : le menu du header avec les éléments connexion et contactez-nous

Dans ce tutoriel, nous allons voir comment changer la couleur du menu du header (en haut), ainsi que les bordures et les couleurs au survol de la souris.

changement des couleurs du menu du header

Editeur de texte
  1. Pour modifier les fond, 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.
  2. Rendez-vous sur le site de notepad et téléchargez la dernière version notepad ++
  3. Vous pouvez aussi suivre notre tutoriel sur comment installer notepad++
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

Le fichier global.css

Ouvrez le dossier de votre thème, trouvez le dossier CSS à l’intérieur, ouvrez le fichier global avec notepad++.

fichier global.css

 

Changez le fond du menu haut

Descendez jusqu’à la ligne 5280 (si vous n’avez jamais modifié le fichier) dans le bloc : header .nav

css du menu du header

 

La ligne « background: #333333; » représente la couleur de fond. Pour changer cette couleur, remplacez #333333 par une valeur hexadécimale composée de 6 chiffres (sans espace) 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

Prenons un orange clair #F4A460, remplaçons sa valeur.

Changement de couleur du menu du header

 

Admirez le résultat en vous rendant sur votre site. Voici le résultat :

Modification des couleurs du menu du header pour prestashop 1.6

 

Modifier les bordures des liens

A côté de chaque lien, il y a une bordure gris foncé, nous allons modifier cette couleur.

Les bordures des liens du menu du header

 

Pour cela, nous allons ouvrir deux fichiers css que nous n’avons encore jamais encore utilisé : blockuserinfo.css et blockcontact.css

 

blockcontact.css

Ouvrez le fichier blockcontact.css, voici le chemin :
votre dossier prestashop > themes > le nom de la copie de votre thème (test pour nous) > css > modules > blockcontact > blockcontact.css
Allez à la ligne 18 et modifiez la valeur de la couleur. Moi je remplace #515151 par #800000 pour avoir un marron foncé.

Modification des couleurs des bordures du menu du header

 

blockuserinfo.css

Ouvrez le fichier blockuserinfo.css, voici le chemin :
votre dossier prestashop > themes > le nom de la copie de votre thème (test pour nous) > css > modules > blockuserinfo > blockuserinfo.css
Allez à la ligne 3 et 4 et modifiez la valeur de la couleur. Moi je remplace #515151 par #800000 pour avoir un marron foncé.

Modification des couleurs des bordures du menu du header

Admirez le résultat en vous rendant sur votre site. Voici le résultat :

Modification des couleurs des bordures des liens du menu header

 

Modifier les couleurs des liens au survol de la souris

Lorsque vous passez votre souris sur les liens du menu du header, ceux-ci deviennent gris foncé. Nous allons les rendre orange foncé.

Dans le fichier blockuserinfo.css à la ligne 37, changez #2b2b2b en #FF4500 (orange foncé).

css Modification des couleurs des liens du menu header au passage de la souris

 

Dans le fichier blockcontact.css à la ligne 16, changez #2b2b2b en #FF4500

css Modification des couleurs des liens du menu header au passage de la souris

 

Admirez le résultat en vous rendant sur votre site. Voici le résultat :

Modification des couleurs des liens du menu header au passage de la souris