Modifier le fond de votre site prestashop 1.6

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.

limite entre header et contenu

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

fichier global.css

N’ayez pas peur ce n’est que du CSS.emote rigole

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.

css body

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.

Changement de couleur du header

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 :

Modification des couleurs du fond pour prestashop 1.6

Oui mais enfin c’est très bariolé me direz-vous,emote peurqu’à 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.

Modification des couleurs du contenu pour prestashop 1.6

Voila ce que vous devez obtenir :Fond blanc central pour prestashop 1.6

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 :

reglage du bug decalage menu prestashop 1.6

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;

mettre une image en fond pour prestashop 1.6

J’ai mis une magnifique image de coucher de soleil, admirez le résultat….

fond coucher de soleil

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 :

fond coucher de soleil et couleur de fond marron

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.

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.

51 thoughts on “Modifier le fond de votre site prestashop 1.6

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

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

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

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

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

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

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

  6. 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?

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

      1. 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é.

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

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

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

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

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

  9. 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 ?

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

  10. Merci beaucoup adminar 🙂 🙂 🙂
    J’attendais de le mettre en pratique pour répondre, mais je n’ai toujours pas le temps.
    🙂 🙂

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

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

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

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

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

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

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

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

  16. 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 !

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

Répondre à lannoy Annuler la réponse.

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