Modifier l’apparence de votre site Prestashop 1.6 : changer la bannière.

Dans ce tutoriel, nous allons voir comment changer l’image et la couleur de fond de la bannière avec prestashop 1.6.

changement de bannière

 

Connexion au back office

Rendez vous dans le back office de votre site en tapant :
http://localhost/prestashop/admin0000 (admin0000 est le nom que nous avions donné au dossier admin dans le tuto installer prestashop en local).
Connectez-vous à l’aide de votre adresse e-mail et de votre mot de passe.

connexion prestashop 1.6
Modification de l’image de la bannière

Passez la souris sur l’onglet MODULES, puis cliquez sur Modules, descendez jusqu’à la liste des modules. Tapez dans le champ recherche « bloc bannière » et enfin cliquez sur configurer.

alt="recherche du module bloc bannière sur prestashop 1.6"

 

Votre image doit avoir une taille de 1170px de long pour 65px de large, c’est la taille prévue par prestashop. Si vous mettez une image de taille différente, elle sera automatiquement déformée.

Cliquez sur « choisissez un fichier », sélectionnez votre image sur votre disque dur, le nom de votre fichier s’inscrit dans le champ, validez. Votre fichier est installé à la place de l’ancien.

Vous pouvez mettre un lien à votre image qui pointe vers une page de votre site. N’oubliez pas de mettre une description à votre image.

Modification de la bannière sur prestashop 1.6

 

Pour voir le résultat cliquez sur : « ma boutique » (en haut à droite).

ma boutique

Voici ce que ça donne pour moi :

mise en place de la bannière

 

Comme vous pouvez le voir ma bannière est verte et le fond est noir, nous allons maintenant voir comment changer le fond.

Modification de la couleur de fond de la bannière

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.

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++

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

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

fichier global.css

 

Pour changer la couleur de fond du header, rendez-vous au bloc « header .banner » à la ligne 5274 (le numéro de la ligne peut varier).

css bannière

 

La ligne « background: black; » représente la couleur de fond. Pour changer cette couleur, remplacez black 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

Remplaçons black par un vert clair afin d’harmoniser la bannière

Changement de couleur de la bannière

 

Admirez le résultat en vous rendant sur votre site. Moi ça donne ça :

Nouvelle bannière