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.
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.
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.
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.
Pour voir le résultat cliquez sur : « ma boutique » (en haut à droite).
Voici ce que ça donne pour moi :
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++.
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).
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:
Remplaçons black par un vert clair afin d’harmoniser la bannière
Admirez le résultat en vous rendant sur votre site. Moi ça donne ça :
Bonjour
Merci pour votre tuto, j’ai cependant une question je souhaite utiliser le module banner pour télécharger une image qui s’integrerait dans le fond du header, j’ai essayer de modifier le header.tpl afin de changer la position mais l’image se superpose dans le header auriez vous une astuce pour que l’image soit en fond du header
Merci d’avance pour votre aide
Bonjour,
La bannière c’est la zone tout en haut alors que le fichier header.tpl gère une zone beaucoup plus grande.
Je ne comprend pas où vous souhaitez modifier le fond. Dans tous les cas normalement la modification du fichier css suffit.
Bonjour
Je souhaiterais un renseignement concernant une modification de ma boutique en ligne faite par un ami.
Aujourd’hui lorsqu’on arrive sur ma page d’accueil cette dernière propose différentes catégories de produits. Ma questions est-il possible d’ajouter une nouvelle catégorie et si oui comment ?
Dans la négative comment faire pour modifier le nom d’une de ces catégories.
Dans l’attente de vous lire
Bien cordialement
Bonjour, oui il est tout à fait possible d’enlever, de rajouter et de modifier vos catégories, vous devez chercher le module JBX_MENU qui semble être votre module gestionnaire de menu.
Si vous avez besoin d’aide, n’hésitez pas à utiliser nos tickets d’intervention.
Bonne journée
Bonjour et comment va faire si le logo se trouve sur la partie superieur droite de la banniere merci
Bonjour,
Que voulez-vous faire ?
Pouvez-vous me donner l’adresse de votre site pour que je regarde ?
Bonjour
Comment peut on modifier la hauteur de la bannière?
J’ai modifié le blockbanner.tpl mais rien y fait.
Merci
Pascal
Bonjour,
Dans le blockbanner.css, il faut enlever les limitations de hauteur. En enlevant les lignes max-height: 65px;
Ligne 1 :
#header .banner a {
display: block;
max-width: 1170px;
max-height: 65px;et ligne 7
#header .banner a img {
display: block;
width: 100%;
height: 100%;
max-height: 65px;max-width: 1170px;
}
Bonjour,
Merci pour votre Tuto ! Je viens de faire exactement ce qui est expliqué mais rien ne ce passe !! Pouvez-vous m’aider ?
Bonjour,
je cherche à mettre une image dans la partie header à gauche des blocs « recherche » et « panier ».
J’ai le code ci-dessous lorsque j’utilise l’outil de développement :
je n’arrive pas à identifier le fichier qui contient ce code et modifier HXL de 28px à 177px.
Je vous remercie cordialement d’avance si vous pouvez me dépanner.
ps : mon site est encore en local
Bonjour
A gauche du panier et de la recherche c’est le logo, est ce ca que vous voulez modifier ?
Bonjour,
Je recherche à placer une image sous le logo la barre de recherche et le panier , comment puis-je faire? est-ce possible?
Bonjour,
Oui c’est possible, à la place du background-color, il faut mettre un background-image
Bonjour,
Question qui pourra sembler idiote : j’ai fait créer le site par un professionnel. Est il possible pour moi de modifier le fond sans être le créateur du site ?
Bonne soirée
Bonjour,
Le professionnel a t’il juste crée le site ou gère t’il l’infogérance ?
Si sa prestation s’arrête à la création du site, il doit vous remettre tous les accès à l’hébergement et donc au FTP qui va vous permettre d’accéder aux fichiers. Avec cet accès vous pouvez parfaitement modifier le design même si vous n’avez pas crée le site. Nous modifions de nombreux sites que nous n’avons pas crée.
Après si le site est en infogérance chez le professionnel tout dépend du type de contrat que vous avez avec lui.
Si vous êtes amené à faire régulièrement des modifications, je vous conseil de faire une copie de votre site en local.
Sinon ayez toujours une copie de vos fichiers avant vos modifications.
Bonne journée
Bonjour,
Le professionnel a créé le site et m’a communiqué les login et mdp pour modifier le site, en ligne.
Mais je ne comprends pas où accéder aux fichiers type CSS.
Par contre, pour faire une copie du site, j’ai lu dans votre tuto qu’il faut faire comme si on créait un thème. Cela créera t il les fichiers dont j’ai besoin ?
Merci beaucoup.
Bonjour,
Il vous a donnée les accès au backoffice mais il peut aussi vous donner les accès au ftp et donc aux fichiers. Est ce vous qui payez l’hébergement ? Est ce un forfais avec lui ?
Nous payons l’hébergement chez OVH.
Bonjour,
Avec vos accès à ovh, vous avez accès au ftp du site donc aux fichiers.
Vous n’avez plus qu’a installer un logiciel de gestion de fichiers à distance comme FileZilla et vous pourrez accéder à vos fichiers.
Cela fonctionne nickel !
Merci pour le temps que vous passez !
Bonjour
Et savez vous s’il est possible de supprimer complètement le bloc bannière pour ne laisser aucune image ? Si oui, comment faire ?
Merci à vous !
Il suffit de désactiver le module bannière
Bonjour,
Merci beaucoup pour votre tuto qui m’est fort utile.
Mais toute fois, j’aurais bien voulu savoir s’il était possible de mettre l’inscription du newsletter dans cette bannière.
Je vous en remercie d’avance.
Bonjour, il faut voir si le bock newsletter est greffage sur votre hook de bannière. Sinon il faudra aller dans le code du module et rajouter le hook.
Bonne journée
Merci beaucoup pour votre aide
Cordialement
Bonjour,
Le message: « Une erreur s’est produite lors de l’envoi du fichier » lorsque je clic sur « enregistrer »
J’ai testé avec différents formats (png jpeg gif) j’ai respecté le dimension 1170 x 65 Pixels
J’ai les droits necessaires normalement… je ne comprends pas !
D’avance merci de votre retour
Nous vendons des tickets d’intervention, n’hésitez pas à nous contacter et nous réglerons votre problème avec plaisir.