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