Modifier l’apparence de votre site Prestashop 1.6 : changer les fonds, mettre une image on un fond coloré
Ce tutoriel existe pour prestashop 1.7
I Editeur de texte
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++
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 Changer les fonds
Actuellement le fond de votre site est blanc, nous allons le colorer un peu.
Sur votre site il y a deux parties qui sont blanches : une partie d’entête (header) et une partie contenu. Nous pouvons colorer l’une ou l’autre, ou les deux.
Ouvrez le dossier de votre thème, trouvez le dossier CSS à l’intérieur ouvrez le fichier global avec notepad++.
N’ayez pas peur ce n’est que du CSS.
Pour changer la couleur de fond du header
Descendez jusqu’à la ligne 5269 pour prestashop 1.6.0.9 et à la ligne 5490 pour prestashop 1.6.0.11. Dans tous les cas, en fonction de votre version de prestashop le numéro des lignes peux changer. Faites une recherche sur header.
La ligne « background: white; » représente la couleur de fond. Pour changer cette couleur, remplacez white 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
Vous pouvez aussi suivre notre tutoriel sur les couleurs : Choisir les couleurs de son site Internet.
Prenons un jaune foncé #DAA520, remplaçons sa valeur.
Admirez le résultat en vous rendant sur votre site.
Pour changer la couleur de fond du contenu
Descendez jusqu’à la ligne 5257 pour prestashop 1.6.0.9 ou à la ligne 5478 pour prestashop 1.6.0.11 dans le paragraphe .columns-container
Remplacez la couleur du backround white ou #fff par la couleur de votre choix. J’ai choisi un vert foncé #228B22.
Admirez le résultat en vous rendant sur votre site. Voici le résultat sur mon site :
Oui mais enfin c’est très bariolé me direz-vous,
qu’à cela ne tienne, on va modifier la couleur de la page centrale.
Changer la couleur du centre
Rendez-vous à la ligne 5264 pour prestashop 1.6.0.9 ou à la ligne 5481 pour prestashop 1.6.0.11 de votre page global CSS et rajoutez la ligne background:white; avant l’accolade. Vous pouvez bien-sûr mettre la couleur de votre choix, j’ai mis blanc.
Voila ce que vous devez obtenir :
Plusieurs personnes me disent ne pas réussir à obtenir le fond blanc. J’ai retesté le tuto avec une installation neuve de prestashop 1.6.0.9 et ca marche. Si vous n’y arrivez pas c’est qu’un module de modification de théme est activé ou que vous avez loupé une étape
Il y a un décalage sur le menu, qui sort légèrement du cadre. Rajoutez dans le bloc #columns la ligne : padding : 18px; cela va créer une marge interne.
Voila ce que vous devez obtenir :
N’hésitez pas à poser des questions ou a faire des commentaires sur notre page fb
Mettre une image à la place d’une couleur
A la place d’une couleur, vous pouvez aussi mettre une image.
Dans le dossier de votre thème, il y a un dossier img (prenez bien le dossier img de votre thème et pas le dossier img du dossier prestashop), c’est ici que sont stockées toutes les images de votre thème. Placez-y votre image de fond.
Si vous voulez mettre une image à la place du fond du header : retournez sur la partie .columns-container à la ligne 5257 (ou un peu plus si vous avez rajouté des lignes) et remplacez background: #228B22; par background-image:url(../img/imagetest.jpg);
../img indique l’emplacement de votre image
imagetest.jpg est le nom de l’image (attention à l’extension, ici c’est un fichier JPEG)
Par défaut l’image se répète, si vous ne voulez pas qu’elle se répète écrivez :
background-image:url(../img/imagetest.jpg) no-repeat;
Si vous souhaitez la centrer et la coller en haut écrivez :
background-position: top center;
J’ai mis une magnifique image de coucher de soleil, admirez le résultat….
Nous pouvons aussi compléter le bas du site avec un fond coloré. Nous allons mettre en fond la couleur marron foncé pour créer une continuité avec l’image.
Retournez sur la partie .columns-container, laissez votre background-image et rajoutez background color : #5c2f1c (qui correspond à la couleur du bas de la photo). Donc nous avons :
.columns-container {
background-image:url(../img/imagetest.jpg);
background-repeat:no-repeat;
background-position: top center;
background-color: #5c2f1c;
}
Voilà ce que ça doit donner :
Faites attention au poids de votre image. Préférez une image légère qui se répété plutôt qu’une image lourde qui ralentira le chargement de la page.
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
Merci beaucoup,
j’essaye
J’arrive pas à trouver :
superfished-modified.css
Help
Dans le dossier du theme –> css –> module –> blocktopmenu –> css –> superfished-modified.css
Bonne soirée
Merci beaucoup
plus qu’à changer les fonds des onglets
Bonne soirée
Bonjour,
je deviens dingue… je suis intervenue sur les CSS, c’est qqchose que je fais souvent sous WP donc je me suis cool, facile !! Et non sous PS mes modifs n’apparaissent pas….
Une idée du problème .
Precision je suis sur PS Cloud.
Merci
Le configurateur de thème est il activé ? C’est en générale le problème.
Bonne journée
Bonjour,
Merci c’est clair et concis mais ne change !
J’ai donc:
– Vidé le cache de mon navigateur,
– Essayé sur 3 navigateurs différents,
– Sur mon mac et mon téléphone portable.
– désactivé « cache » dans Paramètres avancées / Performances
Mais toujours rien. Les autres modifications ont bien été apportées pourtant.
Pour info, j’ai modifié les éléments suivants dans global.css :
– Changement de la couleur de fond : Ai remplacez la couleur du backround white par #333333 au niveau de la 5478 (prestashop 1.6.0.11) dans le paragraphe .columns-container
– Changement de la couleur du centre : Ai ajouté background:white dans le paragraphe #columns au niveau de la ligne 5481 (PS1.6.0.11)
– Changement de la couleur du Header Banner
Bonjour,
Le configurateur de thème est certainement activé, il faut le désactiver.
Bonjour,
je tombe sur votre site et cela m’intéresse. J’ai actuellement une boutique en ligne qui tourne sur la dernière version de Prestashop. En mettant à jour, le thème que j’avais choisi il y a 3 ans est obsolète et me crée du coup plein de bugs.
Je m’oriente donc sur la solution la plus simple, changer de thème et réadapter le tout !
J’hésite à prendre le thème de base et le modifié, ou … ?
Ce que je cherche c’est que mon thème soit durable dans le temps et que je puisse mettre à jour Prestashop sans que ça chamboule toute ma boutique.
Pourriez-vous me conseiller ? Me dire ce qui est le moins risqué comme option ?
Merci beaucoup et bonne soirée,
Valérie
Bonjour,
Les thèmes ne sont jamais pérenne. Là, prestashop prépare la 1.7 qui sera surement opérationnelle d’ici 1 an et aucun thème ni module ne seront compatibles.
Vous pouvez modifier le thème de base, mais il faudra le refaire dans 1 an.
Soit vous investissez 100€ dans un thème et vous achetez sa mise à jour par la suite (si elle existe), soit vous modifiez vous même votre thème et de nouveau il faudra refaire les modifications lors de la mise à jour de vers la 1.7
Bonne journée
Bonjour,
Merci pour ce tuto!
J’ai voulu faire la même chose pour mon footer, à savoir mettre une image (qui s’affiche très bien) et compléter le bas par une couleur se rapprochant du bas de l’image. Or j’ai remarqué que l’image ne s’affiche que si j’écris background et pas background-image et ma couleur de fond refuse de s’afficher.
Bonjour,
Il faudrait que je puisse voir le site pour voir ce qu’il se passe. Pouvez-vous me donner l’adresse.
bonjour
j’ai un souci avec prestashop j’ai acheter un template mais il y a plein de problème et je ne peux pas configurer le thème comme je souhaite, j’ai acheter en plus le configurateur de thème avancé mais cela ne fonctionne pas.
Le développeur du template me dit que le module ne présente aucun problème et que cela doit venir d’une instabilité de mon prestashop
prestashop ne me répond pas pour m’aider a résoudre le problème et cela fait plus d’un mois
qu’est ce que je peux faire, ma boutique est bloquée?
Bonjour,
Vous avez acheté un template avec un configurateur avancé c’est bien ca ?
Quand vous dite le template que vous avez acheté à plein de problème c’est quoi exactement ?
Vous l’avez installé sur un prestashop de base ?
Nous on est une agence web, alors évidement je vais vous dire que qu’il vaut mieux contacter un pro (nous par exemple).
Sinon avez les template ce qui est important c’est de ne pas trop multiplier les modules et modifications. Il vaux mieux installer un template sur un prestashop sans modification, sinon cela rend l’ensemble instable.
Votre site est il en ligne ? comme ca je regarde
en fait j’ai effectué une mise a jour de prestashop de 1.4 à 1.6
ensuite j’ai acheter un template sur addon(pour avoir un visuel plus approprié de ma boutique) et le module de configurateur de thème avancé pour la customiser.
mais rien ne fonctionne réellement correctement je ne peux faire aucune modification, il y a des bugs permanent et personne ne me répond je suis dépité.
Bonjour,
Le problème c’est qu’on ne peux pas vraiment savoir d’ou viennent les bugs, donc tout le monde se renvoie la balle car personne n’a envie de gérer ce genre de problème liés à une mise à jour. Ce sont toujours des problèmes compliqué à gérer.
Essayez de mettre le thème par defaut et regardez si les bugs sont toujours là cela permettra de savoir si cela vient du thème ou de la maj
De ce que je vois, cela semble être des bugs liés aux images, vous n’avez pas beaucoup de produits, vous pouvez les réinstaller.
Bonne journée
Bonjour,
Je lutte avec mon problème depuis des heures sans solution !!
Un coup de main sur la largeur du blocktop menu please !
J’aimerai que la largeur de ma barre de navigation soit continu d’un bout à l’autre de la page, sans marge. Full width en fait ! Tout en maintenant les titres du menu, la case de recherche, panier et logo alignés sur le container principal de la page.
Une idée ?
Je travaille sur la version 1.6 et le thème default-bootstrap.
Merci d’avance.
Bonjour,
En fait tout ces éléments sont dans une « boite » qui fait 1170 px de large c’est le container. Pour que le menu fasse toute la largeur c’est un peu compliqué, soit vous mettez le container full width et il faut repositionner tous les éléments, soit vous sortez le menu de la « boite ».
Je pense que l’idéal serait de créer un nouveau hook entre le haut de le header et le columns-container et d’y greffer le bolcktop menu.
Bonne journée
Ok, je vais essayer de suivre cette piste !
Merci beaucoup pour cette réponse ultra rapide !!
Bonjour,
Je voudrais savoir comment avoir la même image qui couvre tout le fond du site.
Je n’ai réussi qu’à mettre trois fois la même image (header, body et footer) ce qui me fait une image tronquée en deux endroits car trois images.
Merci beaucoup
Mon tuto donne la technique pour le mettre qu’un seule image. Il faut la mettre sur le body ou sur la page et supprimer tous les background blanc.
Merci beaucoup adminar ! C’est vraiment super votre tuto 🙂
D’après ce que j’ai compris, cela ne fonctionne qu’en désactivant le configurateur de thème. Or, j’ai déjà entièrement configuré mon site par le configurateur de thème.
Si je désactive le configurateur de thème, j’espère que je verrai les changements que j’ai effectués par votre tuto, mais est-ce que mes changements seront perdus à jamais ?
Y aurait-il un moyen de configurer son site par le configurateur de thème et par votre tuto de changement de fond à la fois ?
Oui mais c’est un peu laborieux, vous pouvez rajouter !important à la fin des lignes que vous souhaitez faire passer en priorité par rapport au configurateur de thème.
Par exemple écrivez :
background-color : white!important;
cela va prioriser cet élément.
Mais il faut utiliser cela avec parcimonie.
Merci beaucoup adminar 🙂 🙂 🙂
J’attendais de le mettre en pratique pour répondre, mais je n’ai toujours pas le temps.
🙂 🙂
Bonjour,
Merci pour ce tutoriel 🙂
nb: pour votre information votre lien sur http://tutoriel.webetplus.fr/faire-une-copie-de-son-theme-prestashop-1-6/ donne une 404 O:-)
Est-il possible de faire ces transformations de couleurs et photos de fond que vous décrivez ici si la PrestaShop est en mode gratuit et dans le cloud PrestaShop ?
Dans ce cas comment obtenir les données d’accès via FTP (avec Filezilla) ?
Et merci encore 🙂
Bonjour,
Oui il est tout a fait possible de faire ces modifications avec une prestashop cloud.
Je vous met le lien vers des explications pour obtenir le ftp.
http://doc.prestashop.com/pages/viewpage.action?pageId=26149102
Merci pour l’erreur.
Bonne journée
Bonjour , merci pour votre tuto , je débute avec prestashop et faut dire que je peine à avancer , quoi qu’il en soit , j’ai effectué les changements sur le fichier css mais ça ne marche pas , j’ai lu dans les commentaires qu’il fallait désactiver le configurateur de thèmes , mais je trouve pas où le faire .
Je précise que je travaille en local (pas d’hébergeur ) , est -il possible d’effectuer ces changements ?
Merci
Bonjour,
Il y a plusieurs raisons pour lesquelles ça peux ne pas marcher.
Premièrement avez vous vidé les caches ? cache navigateur et cache prestashop
Sinon le configurateur de thème est un module il suffit de le désactivé dans la liste des modules.
Oui il est tout a fait possible de faire les modifications en local, c’est même mieux.
Bonne journée
alors , j’ai réussi à mettre la main sur le configurateur de thème ( que j’ai d’ailleurs désactivé ) , cependant je ne sais pas où est ce qu’il faut viser les caches ( navigateur et prestashop )
Excusez mon ignorance
Merci
j’ai finalement réussi à vider le cache prestashop ( si je me trompe pas , il faut aller sur paramètres avancés /performances/ vider le cache ) ?? mais celui du navigateur , aucune idée où il se trouve
Bonjour,
Cela dépend de votre navigateur, mais si vous faites une recherche avec vider cache + le nom de votre navigateur, vous allez trouver facilement.
Bonne soirée
ça marche toujours pas 🙁 je commence à croire que ça marchera jamais
Nickel le fond est ok… puis-je faire pareil pour le texte ?(couleur) où est la ligne dans le global.css (encore merci).
Bonjour, pour le texte il n’y a pas vraiment de ligne, vous pouvez faire une demande générale sur le body, mais il y a souvent des personnalisations pour chaque zone de texte.
Bonjour, merci beaucoup pour ce Tuto ! J’ai appris pas mal de chose.
J’ai un question, comment supprimer la couleur Blanc à l’intérieur du carde ou il y a l’image de mon produit ? car partout la couleur change, mais ou il y a la photo juste autour rien ne change.
Actuellement c’est en Blanc.
Voila mon site : https://www.warmshine.com/
Merci de votre réponse
Bonjour, le cadre blanc apprait car les images ne sont pas de la bonne taille, donc le système rajoute des bandes blanches.
est il possible, sous PS 1.6, que l’image remplisse également les « blancs » entre les articles (comme vous le faites dans le tuto PS 1.7) ?
Bonjour dans le tuto il y a un paragraphe qui s’appelle Changer la couleur du centre.
ok merci, mais pour y mettre une image ?
Bonjour,
C’est le même principe, sauf qu’a la place de mettre background-color, vous mettez background image.
Bonjour,
savez vous si l’image mise dans les colonnes peut « défiler » en même temps que le fond du site, afin de ne pas avoir de césure ?
Bonne journée
Bonjour,
C’est un peu compliqué, je vous conseille plutôt de mettre un fond sur la colonne et de mettre la fin de votre image en transparence.
bonjour je suis bloqué au niveau de ouvrir dossier themes ou cela ce trouve svp
Le dossier thème se trouve dans le dossier de votre prestashop
Bonjour,
Dans le thème de base sous Prestashop 1.6.1.14, le fond ne fait qu’un. Comment dissocier le header et le contenu pour mettre de la couleur en fond en header et mettre une image dans le contenu ?
Merci d’avance pour votre aide !
Bonjour,
Comme expliqué dans mon tuto il y a un fond pour le header et un fond pour le contenu. C’est le cas dans mon tuto, le header est en jaune et le contenu est une image.
Bonne journée
Bonjour !
Oui j’ai repris les éléments de votre tuto cette nuit et je suis parvenue à faire ce que je souhaitais ! Merci beaucoup pour votre réponse et pour vos tutos qui me sont d’une grande aide !
Saurez-vous me dire où je peux modifier la fameuse couleur bleue qui se trouve un peu partout dans le thème default-bootstrap SVP ? J’ai identifié ce bleu comme étant la référence #43BEBD, mais elle n’apparaît nulle part dans le global css (ni dans les fichier css des modules d’ailleurs…).
Merci pour votre aide.
Bonjour,
Pouvez vous être plus précis sur la couleur dont vous parlez, car sur la 1.6 la couleur bleu vient d’une configuration de thème.
Bonne journée
Excellent tuto que j’ai appliqué sur mon site