Changer le fond d’un site prestashop 1.7

 

Modifier l’apparence de votre site Prestashop 1.7 : changer les fonds, mettre une image ou un fond coloré

Modifier fond d'un site 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.7

Les 3 zones du siteIII Changer les fonds

 

Le fond de votre site se compose de trois parties :

  • Le haut de page (header) 1
  • Le centre 2
  • La bas  de page (footer) 3

 

Nous allons voir, zone par zone comment modifier le fond, puis nous verrons comment modifier la page en entier.

1 Modifier le fond du header

Dans le dossier du thème classic (theme livré avec prestshop 1.7, ouvrez le dossier assets, puis le dossier css, puis ouvrez le fichier theme.css avec votre éditeur de texte.

ouvrir le fichier theme.css

 

 

 

Depuis la version 1.7.0.4 le fichier css est compressé, donc tous les éléments apparaissent sur une ligne. Il faut décompresser le fichier pour pouvoir travailler dessus, en utilisant un  un site de décompression comme :

http://mrcoles.com/blog/css-unminify/

Cela fonctionne à partir de la version 1.7.0.5.
Si vous n’y arrivez pas vu pouvez téléchargez le mien ici faites un copier collé sur le votre et vérifiez que cela fonctionne.

Modifier le fichier theme.css est la méthode la plus simple, mais n’est pas la meilleure pratique en savoir plus

Copier le contenu de votre fichier, puis coller le contenu décompressé

A la ligne  7930, repérer le paragraphe :

#header {
 background: white;
 color: #acaaa6; }

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 (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.

#header {
 background: #F4A460;
 color: #acaaa6; }

Enregistrez votre fichier, voila ce que vous devez obtenir.

Mondifier la couleur du fond du header pour un site prestashop 1.7

 

Si cela ne fonctionne pas videz votre cache navigateur et le cache prestashop.

Vous souhaitez peut être mettre une image plutôt, dans ce cas placez votre image dans le dossier img du dossier asset et remplacez la couleur par l’url de votre image.

#header {
 background-image: url('../img/nomdevotreimage.jpg');
 color: #acaaa6; }

 

Moi j’ai choisit des cercles, voila ce que j’obtiens :

Modifier le fond avec une image prestashop 1.7

 

 

2 Modifier le fond du contenu

Toujours dans le fichier theme.css, ligne 8041 repèrez le bloc :

#wrapper {
 background: #ebebeb;
 box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.11);
 padding-top: 1.5625rem; }

Nous allons changer la première ligne, je vais choisir un vert :

#wrapper {
 background: #98FB98;
 box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.11);
 padding-top: 1.5625rem; }

Voila ce que vous devez obtenir :

modifier le fond du centre prestashop 1.7

La aussi vous pouvez mettre une image, si je reprend l’image de mes cercles :

#wrapper {
Background-image: url('../img/nomdevotreimage.jpg');
 box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.11);
 padding-top: 1.5625rem; }

Voila ce que j’obtiens  :
mettre une image dans le fond du centre prestashop 1.7

 

3 Modifier le fond du footer

Toujours dans le fichier theme.css, ligne 8092 repèrez le bloc :

#footer {
 padding-top: 2.5rem; }

Nous allons rajouter une ligne, pour indiquer notre couleur, je coisit du rose :

#footer {
background : #FFC0CB; 
 padding-top: 2.5rem; }

Voila ce que j’obtiens :

modifier le fond du footer prestashop 1.7

 

La aussi vous pouvez mettre une image, si je reprend l’image de mes cercles :

#footer {
Background-image: url('../img/nomdevotreimage.jpg'); 
 padding-top: 2.5rem; }

Voici ce que j’obtiens :

mettre une image dans le footer prestashop 1.7

 

 

4 Modifier le fond de toute la page

Pour cela nous allons reprendre tous les éléments de ce tuto :

A la ligne  7930, repérer le paragraphe :

#header {
 background: white;
 color: #acaaa6; }

Et supprimer la ligne

 background: white;

A la ligne 8041 repèrez le bloc :

#wrapper {
 background: #ebebeb;
 box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.11);
 padding-top: 1.5625rem; }

et supprimer la ligne

 background: #ebebeb;

Puis à la ligne 4789 repèrer le bloc :

body {
 font-family: 'Open Sans', sans-serif;
 font-size: 1rem;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color: #414141;
 line-height: 1.25em; }

Et rajouter votre couleur, moi je vais choisir un marron:

body {
 background : #800000;
 font-family: 'Open Sans', sans-serif;
 font-size: 1rem;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color: #414141;
 line-height: 1.25em; }

Voila ce que j’obtiens :

 

fond-page

Et la aussi bien entendu on peut mettre une image :

 

body {
Background-image: url('../img/nomdevotreimage.jpg'); 
 font-family: 'Open Sans', sans-serif;
 font-size: 1rem;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color: #414141;
 line-height: 1.25em; }

Voila ce que l’on obtiens :

fond-page-img

Mais vous avez peux etre envie que le fond du centre soit blanc, histoire que les éléments soient un peu plus lisible, dans ce cas, rendez-vous à la ligne 608 repèrer le bloc :

.container {
 margin-left: auto;
 margin-right: auto;
 padding-left: 15px;
 padding-right: 15px; }

 

Et rajouter une ligne ;

.container {
 margin-left: auto;
 margin-right: auto;
 padding-left: 15px;
 padding-right: 15px;
 background : white;
}

Tout les conteneur vont devenir blanc :

Voici ce que vous allez obtenir :

fond-page-centreblanc

N'hésitez pas à laisser un commentaire

Vous pouvez vous abonner à notre newsletter mensuelle pour être informé de nos nouveaux tutoriels.

Vous pouvez aussi aimer notre page facebook.

45 thoughts on “Changer le fond d’un site prestashop 1.7

  1. bonjour je n’arrive pas a changer le fond du header j’ai vidé le cache sur presta et sur le navigateur rien ne change ….je fais exactement comme dans le tuto mais je n’y arrive pas pouvez vous m’aidé svp merci

    1. Bonjour,

      Vous faites bien les modifications dans le bon fichiers ?
      Vous avez vidé le cache prestashop et le cache navigateur ?
      Donnez-moi l’adresse du site pour que je regarde.

      Bonne journée

  2. Bonjour, je cherche à modifier le texte du footer « Ecommerce software by prestashop » sous Prestashop 1.7, j’ai changé le texte dans plusieurs fichiers footer.tpl, mais ça ne le change pas.
    S’il-vous-plaît auriez-vous la solution ?
    Merci beaucoup.

    Moore

  3. bonjour
    je viens d’installer prestashop 1.7

    dans themes>classic>assets>css>theme.css
    je récupère ma feuille de style « theme.css » qui est minifiée. Je l’ai déminifiée (afin de la modifier) et remplacée sur mon serveur mais il ne charge aucune feuille de style.
    lorsque je remets la minifée, cela refonctionne.
    Y a-il qq chose à ajouter lorsqu’on dé-minifie ?

  4. Bonsoir,
    je souhaite modifier le thème « classic » en suivant le tutoriel j’arrive à editer fichier theme.css.
    Il n’a pas du tout le contenu que vous iondiqué. A la place
    j’ai une liste de paramétrage de . Bootstrap-touchspin
    merci de votre aide
    Ph

    1. Bonjour, le fichier est trés long et commence effectivement par :
      /*
      * Bootstrap TouchSpin – v3.1.1
      Il faut aller aux lignes indiquées dans le tutoriel.

      Bonne journée

  5. Merci de cette réponse, malheureusement le fichier ne se présente pas comme indiqué.
    il s’agit de la version 4.0.0 du bootstrap. avec deux lignes de commande très longues mais horizontales. Je ne trouve donc pas de ref de ligne de programme.
    merci de votre aide

  6. j’ai un problème dans le footer quand on clique sur un lien de Nos Produits

    Promotions
    Nouveaux produits
    Meilleures ventes

    Il’y a une colonne qui aparait à la fin, au dessous de © 2017 – Ecommerce software by PrestaShop™ .

    1. Bonjour,

      Je ne vois pas de quelle colonne vous parlez sur votre site, lorsque je clique sur les trois lien, rien ne change en bas de page.

      Cordialement

  7. Bonjour, je tente depuis quelques heures d’ ‘unminifier’ le css de mon theme en vain, je m’explique :
    J’arrive bien a unminifier le fichier css mais cela casse le style !

    J’ai fini par telecharger votre fichier et l utiliser comme fichier de style, la ca marche MAIS (certainement a cause d’un probleme de version- j’ai la 1.7.1.1) certaines demandes de fontes recoivent un beau 404.

    Bref, s’il y a un ‘secret’ de la deminification (pas beaucoup plus joli que la version anglaise 🙂 ) pouvez vous me le donner ?

  8. QUELLES SONT LES DIMENSIONS DE l’image de fond pour le header/contenu/FOOTER..
    ET IDÉALEMENT AUSSI au cas ou POUR TOUTE LA PAGE..
    car sans les dims exacts l’image n’est pas entière ou répétéE… pas très beau esthétiquement..
    ET Y’A T IL UNE AUTRE LIGNE a visiter pour que tout soit en harmonie dims et image..merci pour votre reponse.

  9. Bonjour,

    J’ai eu moi même un soucis, ça ne marchait pas, j’ai recompressé avec ce site :
    http://www.supportduweb.com/compresseur-code-css-vitesse-chargement-size-fichier-compacter-minifier-css-code-design-source-compiler-style.html
    et maintenant ça marche.

    Et sur ma version de prestashop 1.7.1.1 les lignes ne sont pas les memes, moi c’est
    8082 pour le header, 8217 pour le fond, 8274 pour le footer.

    Encore un grand merci pour ce tuto et ce partage ! ça m’a beaucoup aidé !

  10. Bonjour,

    Super tuto, vraiment bien fait.
    Cependant, j’ai un bon problème qui ne souhaite pas se résoudre :p

    Lorsque je modifie le fond de mon site, dans le wrapper, avec une image, je met donc l’image sur mon stockage ovh où est présent les fichiers de configuration de mon site.

    Cela à l’air de fonctionner, cependant, lorsque je recharge la page d’accueil de mon site, celui ci me demande le mot de passe d’accès à mon stockage FTP.

    Aurais tu une solution ?

    Merci à toi.

  11. Bonjour, merci beaucoup pour toutes ces infos 🙂

    Du coup j’ai tenté de faire votre méthode dans le fichier thème.css pour mettre le fond de mon site (en ligne) en blanc mais aucune modification ne se fait sur mon site. Le fond reste inchangé bien que j’ai enregistré la nouvelle règle dans le thème.css et vidée tout les caches ( navigateurs et prestashop). J’ai aussi regardé sur un autre ordinateur

    J’espère que vous pourrez m’aiguiller sur ce problème, j’ai la version 1.7.2.4 de prestashop

    Merci d’avance et encore merci pour tout vos tutos ils sont top !!
    Audrey

    1. Bonjour,

      Merci pour vos commentaires sur mes tutos.
      Quand une modification CSS ne fonctionne pas, c’est soit qu’elle n’a pas été faite au bon endroit ou correctement, soit que les caches ne sont pas vidé soit que c’est pas le bon fichier que vous avez modifié. Avez vous une url pour que je regarde (je n’afficherai pas)?
      Bonne journée

  12. Bonjour,
    D’abord merci pour le tuto.
    Ma question: Je fonctionne en ftp et dans mon dossier asset il n’y a pas de dossier « img »…
    Dois-je le créé ?

    Merci,

      1. Le ftp va reconnaître un dossier « img » et va savoir que c’est ici qu’il faut aller chercher les images pour le background ?

        Merci pour votre réactivité

  13. bonjour je fait toute les manip comme indiquer pour ajouter une image de fond mais cela de marche pas 🙁
    pouvais vous m’aider ?
    sachan que je suis deja sur un de vos theme ( pinkweb )

    merci pas avance

  14. Bonjour,
    Votre tuto est super merci.
    Je débute complètement dans prestashop et la programmation en générale et je m’arrache les cheveux. Tout parait su simple quand vous le faites HIHIHI
    A lors voilà mon problème : J’ai bien décompressé mon fichier CSS (que j’ai eu du mal à trouver lol); j’ai remis le tout sur plusieurs lignes comme vous grâce à votre lien, j’ai ensuite copié sur notepad++, j’ai trouvé la ligne où apporter les modifications pour changer le fond du header mais ensuite vous dites : enregistrez, videz le cache et regardez la modif ok mais où enregistré ce nouveau code ? Sur mon FTP, le fichier est zippé, je ne comprends pas 🙁 Désolée je suis vraiment novice. Merci par avance pour votre réponse, Alexandra

      1. Pouvez vous m’expliquer comment faire pour renvoyer le fichier modifier sur le FTP ? J’ai installé Filezilla.
        Quand je me mets dessus je retrouve le fichier modifié mais comment dois je le nommer ? Je suis vraiment désolée, mes questions doivent vous paraître stupides 🙁

        1. L’idée c’est de prendre le fichier en ligne, vous le téléchargez sur votre ordinateur. Vous le modifiez et vous le renvoyez en ligne. Du coup il remplace le fichier d’origine. N’oubliez pas de faire une copie avant au cas ou.

  15. Bonjour,
    j’ai enfin réussi à modifier la couleur de fond de mon header et de mon footer grâce à vous, d’ailleurs je vous dois boien plus que ça car c’est vous qui m’avez permis de comprendre Filezilla et beaucoup d’autres choses donc je vous en remercie 😉
    J’ao encore un petit souci, c’est que le haut du header où est noté « contactez nous », « connexion » et « panier » reste dans une autre couleur même si je change la ligne 7930 de theme.css. Avez vous une idée pour que je puisse le modifier ?

  16. Bonjour,
    j’ai enfin réussi à modifier la couleur de fond de mon header et de mon footer grâce à vous, d’ailleurs je vous dois bien plus que ça car c’est vous qui m’avez permis de comprendre Filezilla et beaucoup d’autres choses donc je vous en remercie 😉
    J’ai encore un petit souci, c’est que le haut du header où est noté « contactez nous », « connexion » et « panier » reste d’une autre couleur même si je change la ligne 7930 de theme.css. Avez vous une idée pour que je puisse le modifier ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *