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.