Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /homepages/10/d246831978/htdocs/votre-ecommerce.com/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /homepages/10/d246831978/htdocs/votre-ecommerce.com/wp-includes/plugin.php on line 601

Modifier l’image de fond du thème Prestashop

HomeNewsModifier l’image de fond du thème Prestashop

Modification du fond de thème

Cet article est dédié à la modification de l’image de fond d’un thème Prestashop. Simple et rapide, cette modification vous permet d’habiller votre boutique au mode du moment. (ex:Noël, st Valentin, ect…)

Voici les étapes à suivre:

– Créez votre image via Photoshop ou autres (1500 x 780 px) et enregistrez la

– Transférez la via Ftp (ex: FileZilla) dans : Prestshop -> themes -> votre thème -> img

– Accédez à votre Global.CSS : Prestshop -> themes -> votre thème -> CSS -> Global.css

– Ouvrez le via le blocnotes, Notepad et autres éditeur

– Puis, vers le début du code, vous allez voir « body ». (ligne 17)

– Remplacez  les quelques lignes de Code par :

body {
background: #000000 url(../img/le nom de votre image.gif ou jpg) repeat-x fixed top center; <- fixe ou non
font-size: 11px;
font-family: « Trebuchet MS », Arial, Sans-Serif;
color: #333333;
text-align:center;
}

– Maintenant, il va falloir ajouter des background dans #page (ligne 183)

– Remplacez ça:

#page {
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
}

par:

#page {
width: 980px;

margin: 2px auto 2px auto;
text-align:left;
background-color: #ffffff; (code couleur de la page)
background-repeat: no-repeat;
background-position: top;
}

– Enregistrez tout ça, et Hop c’est joué !

J’espère que cette manipulation étoffera votre boutique et répondra à vos attentes 😉

[ad#ad-1]

Written by

The author didnt add any Information to his profile yet

24 thoughts on “Modifier l’image de fond du thème Prestashop

  1. Pour mettre un motif de fond, c’est presque pareil…

    Il faut d’abord un petit motif (130x130px) nommé ici fond.jpg et que l’on répètera comme un papier peint.

    On suit exactement ce qui est indiqué dans l’article, il y a juste la ligne de code qui change dans « body »:

    body {
    background: #000000 url(../img/fond.jpg) repeat scroll 0 0;
    font-size: 11px;
    font-family: « Trebuchet MS », Arial, Sans-Serif;
    color: #333333;
    text-align:center;
    }

    On modifie la page (pareil)):
    #page {
    width: 980px;

    margin: 2px auto 2px auto;
    text-align:left;
    background-color: #ffffff; (code couleur de la page)
    background-repeat: repeat;
    background-position: top;
    }

    Et normalement le tour est joué!

    Et merci pour votre aide…

    Élise
    PowerBlonde

  2. Bonjour,
    merci pour le fond c’est vraiment super… par contre tout les logos avec liens prestashop « devises, contact, plan du site, favoris sont passé en dessous de ma banière et surtout le panier et le compte, a l’origine en haut à droite sont aussi décallés en dessous.
    Il y a moyen de remettre au moins le panier et le compte sur le coté droit en haut ?
    Merci

  3. bonjour merci pour ce tuto
    j’aimerai bien savoir si possible de faire défilé plusieurs images
    Merci d’avance

  4. j’ai suivi toutes les étapes mais ça n’a pas marché pour moi , le thème est le même je vois pas mon image.

    j’utilise prestashop 1.4.0.17

    Merci

  5. Bonjour,

    Désolé de casser l’ambiance mais je pense qu’il y a des failles dans cette combine. Je suis conscient cependant qu’il n’existe pas de solution miracle ni parfaite, mais tout de même en cas ou le visiteur à une grande résolution sur son écran ça risque de faire bizarre. Le site lui, va s’adapter à la résolution normalement, tandis que l’image de fond elle ne va pas le faire puisqu’elle est fixe en ce qui est de ses proportions.

    De plus une grande image comme ça va alourdir considérablement le temps de chargement du site non ?

    Désolé de ne pas apporter de meilleure solution pour le moment mais promis si je trouve mieux je viendrais vous le dire.

    Cordialement,
    Besky

  6. Besky, tu as presque raison :

    Si tu prends une très grande image (1900 en largeur), le centrage va se faire pile au milieu, donc à toi de faire en sorte que le milieu de ton visuel soit celui que tu veux voir apparaître sur les écrans de tes clients.

    Concernant la lourdeur du fichier, tu peux baisser la qualité pour obtenir un petit 400ko tout à fait net visuellement.

    Je parle en connaissance de cause, je l’ai fait et on ne voit aucune différence entre le fichier en qualité 100% et le fichier en qualité 95% (400ko).

    Bon courage

  7. Bonjour,

    J’ai fini par adapter en partie ce tutoriel pour Noël sur mon presta.

    Dites moi ce que vous en pensez svp (cliquez sur mon pseudo pour voir le site)

    Merci !

  8. Bonjour tout le monde j’ai suivi le tuto point par point, mais

    rien n’à changer pare

    que mon fond et devenu blanc.

    PrestaShop version 1.4.4.1

    Merci d’avance

    Stéphane

  9. Bonjour à tous,

    Besky,j’aime beaucoup le thème que tu as choisi!! Je suis en plein lancement de mon site et j’essaye de créer un thème mais je ne suis vraiment pas douée en informatique… Avec du travail et qques explications ça viendra…

    A tous, pouvez-vous me dire comment faire pour trouver ce chemin svp:

    « Accédez à votre Global.CSS : Prestshop -> themes -> votre thème -> CSS -> Global.css »

    Merci beaucoup.

  10. Bonjour à tous.
    Juste pour information, je pense que cette manip diffère selon le thème.

    De mon coté, pour la ligne #page, je l’ai à la ligne 41.
    C’est affiché « #page{} ». Il suffit de remplacer ça.

    Quant à la ligne body, elle se trouve en ligne 53.

    En tout cas, merci beaucoup, ça marche parfaitement, avec un peu de bidouille. Comme d’hab quoi 😉

  11. pour la plupart des gens : faites attention à vos liens pour le background.
    mieux : utilisez background-image:url(METTEZ L’URL)

    Pour Mamouche même si c’est tard.
    dans dans dossier racine de prestashop tu vas dans theme\TON THEME A MODIFIER\css
    et la tu cherche le Global.css

  12. Bonsoir, j’ai suivi le tuto sans faute mais ça pas marché !!! je suis sous la version 1.4.8.2. et j’utilise wampserver Aidez moi s’il vous plait :s :s

  13. Bonjour,

    J’ai appliquer l’image de fond, mais j’ai l’image de fond qui s’applique à l’éditeur l’éditeur tinymce des pages produits en backoffice avez vous une idée ?

    Mes salutations

  14. Bonjour,

    Mon message à été supprimer je ne comprend pas ! je demandais simplement quand j’ai intégrer l’image de fond ça fonctionne mais l’image de fond vient s’intégrer dans l’éditeur tinymce !
    avez vous une idée ?

  15. Bonjour a tous,
    mon site est actuellement en local, j’utilise wamp.
    je voudrais egalement modifier le fond blanc de mon theme prestashop par defaut mais la version 1.5
    et les infos que tu nous donnes au niveau des lignes etc ne correspondent donc pas. j’aurais besoin d’un gros coup de main SVP
    Merci d’avance

  16. Bonjour à tous, voilà j’essaie de transformer le Template par défaut, et rien ne se passe, quand j’essaie de le télécharger prestashop le refuse tout bonnement! Je l’ai « retravaillé avec Dreamweaver, bon je ne m’y connais pas des masses en bidouillages de css et compagnie,, j’ai juste réussi à recréer par deux fois des petits sites sans prétentions aucune, mais la j’ai besoin de faire une boutique en ligne, et je patine…
    Merci d’avance de votre aide à tous, pour ce gros, gros coup de main, car je suis perdue de chez perdue !!!
    Amicalement

  17. Bonjour,
    je souhaite faire des modifs mais ne comprends pas comment acceder au global.css (est-ce de l’application Prestashop?)
    Merci de m’aider

  18. Bonjour,

    Auriez vous une solution pour avoir un slide de fond pour Prestashop 1.6

    J’en profite pour vous remercier pour vos astuces.

    Cordialement
    Sylvain

Laisser un commentaire

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