Tutoriel mis à jour pour prestashop 1.7.8

Le tutoriel existe aussi en vidéos en bas de page

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

Le CSS de cette couleur de header est sur plusieurs fichiers, ce n’est pas l’idéal, il faut donc d’abord supprimer certains styles.

1.1 Modifier les style dans le module PS_Searchbar

Dans cette version 1.7.8 une partie du CSS du header est dans un module (c’est pas logique mais c’est comme ca :-). Dans le dossier module faite une copie du dossier PS_Searchbar et coller le dans le dossier module de votre thème. Cela permet de modifier le module mais sans toucher au coeur.

 

 

Dans le dossier copié, supprimer tous les fichiers sauf ps_searchbar.css, car on ne va modifer que le CSS de ce module.

Ouvrer ce fichier (ps_searchbar.css) avec l’éditeur de texte et supprimer les 3 premieres lignes :

#header, #header .header-top {
 background-color: white;
} 

 1.2 Modifier le style du header dans le fichier « général »

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 site de décompression comme :

https://unminify.com/

 

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

 savoir plus

Remplacer le fichier par celui téléchargé

 (dans le Ouvrez le fichier theme.css avec votre éditeur de texte.

A la ligne 11123 touvez le bloc :

#header {
 position: relative;
 z-index: 999;
 color: #7a7a7a;
 background: #fff;
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
}

La ligne « background : #fff; » 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.

background: #F4A460;

Enregistrez votre fichier, voila ce que vous devez obtenir.        

 

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.

background-image: url(‘../img/nomdevotreimage.jpg’);

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 11298 repèrez le bloc :

#wrapper {
 padding-top: 1.563rem;
 background: #f6f6f6;
}

Nous allons changer la deuxième ligne, je vais choisir un vert :

 background: #98FB98;

Voila ce que vous devez obtenir :

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

Background-image: url('../img/nomdevotreimage.jpg');

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 10610 repèrez le bloc :

#footer {
 padding-top: 2.5rem; }

Nous allons rajouter une ligne, pour indiquer notre couleur, je choisie 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  11124, repérer le paragraphe :

#header {
position: relative;
z-index: 999;
color: #7a7a7a;
background: #fff;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 11%);
}

Et supprimer la ligne

 background: #fff;

A la ligne 11299 repèrez le bloc :

#wrapper {
padding-top: 1.563rem;
background: #f6f6f6;
}

et supprimer la ligne

 background: #f6f6f6;

 

Si vous avez mis une couleur sur le footer, supprimer-la.

 

Puis à la ligne 6396 repèrer le bloc :

body {
font-family: Manrope, sans-serif;
font-size: 1rem;
line-height: 1.25em;
color: #232323;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

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

body {
 background : #800000;
 font-family: Manrope, sans-serif;
font-size: 1rem;
line-height: 1.25em;
color: #232323;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }

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: Manrope, sans-serif;
font-size: 1rem;
line-height: 1.25em;
color: #232323;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }

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