Modifier l’arrière-plan de votre boutique Prestashop 1.7

Dans ce tutorial, nous allons voir comment modifier les couleurs de fond de votre boutique en ligne Prestashop 1.7. Tout se passe à l’intérieur des codes.

1) Haut de page
2) Contenu
3) Bas de page

Modifier l'arrière-plan de votre boutique Prestashop 1.7

——————————————————————

A) Etape 1 :

Ouvrir le fichier themes.css dans /themes/classic/assets/css/theme.css

Modifier l'arrière-plan de votre boutique Prestashop 1.7

B) Etape 2 :

Dans certaines versions de Prestashop, le fichier est compressé c’est à dire que le code est sur une ligne. Vous pouvez utiliser ce site http://unminify.com/ afin de “décompresser’ le code c’est à dire de mettre le code sur plusieurs lignes afin que celui-ci soit plus lisible.

C) Etape 3 :

La couleur est désignée par un  code hexadécimal (un dièse suivi de 6 digits). Les deux premiers digits représentent la valeur de rouge, les deux suivants le vert et les deux derniers le bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs. Par exemple le noir aura pour code hexadécimal #000000 OU #000, le blanc aura pour code hexadécimal #ffffff ou #fff

Si vous désirez obtenir votre couleur hexadécimal, vous pouvez consulter le site suivant: http://www.color-hex.com/

Modifier le haut de page
Pour modifier la couleur du haut de page, il faut chercher le code suivant ( en ce qui me concerne, il se situe vers la ligne 11191)

Dans mon exemple, j’ai utilisé un fond gris clair ayant pour code hexadécimal #f7f7f7. Je vais donc changer la couleur de “background”, ce qui va donner


Contenu
Pour modifier la couleur du contenu, il faut chercher le code suivant ( en ce qui me concerne, il se situe vers la ligne 11360)

Dans mon exemple, j’ai utilisé un fond bleu ayant pour code hexadécimal #8798bf . Je vais donc changer la couleur de “background”, ce qui va donner


Bas de page
Pour modifier la couleur du bas de page, il faut chercher le code suivant ( en ce qui me concerne, il se situe vers la ligne 11435)

Dans mon exemple, j’ai utilisé un fond gris clair ayant pour code hexadécimal #f7f7f7 . Je vais donc ajouter à mon code un bakcground

 

C) Etape 3 :

Enregistrer votre fichier, si vous actualiser votre site, vous visualiserez les modifications. Si ce n’est pas le cas, c’est peut-être un souci de cache. Pour nettoyer votre cache, vous pouvez lire l’article suivant : Vider le cache dans Prestashop 1.6 et 1.7

 

Articles similaires

Comment créer une fiche Produit sur Prestashop 1.7
views 4960
Dans ce tutoriel, nous allons voir comment créer une fiche produit dans Prestashop 1.7. Comme vous pourrez le constater, cette page diffère totalem...
Mettre une page catégorie comme page d’accueil | Astuce Prestashop 1.6
views 1052
Ce petit tuto va vous permettre de transformer votre page catégorie en page d'accueil. Cette petite astuce Prestashop est valable pour la version  ...
Google Analytics et Prestashop : Installation et configuration
views 7683
Dans ce tutoriel,  nous allons voir comment installer Google Analytics sur son site Prestashop A) Qu'est-ce que Google Analytics ? Google Analytics ...
Configurer le mode multi-boutique dans PrestaShop 1.6 & 1.7
views 9894
A NOTER : malheureusement à ce jour, il existe encore pas mal de bugs avec la version 1.7 (la dernière 1.7.6 ne régle pas tous les problèmes) Qu’est ...
SPAM PRESTASHOP FORMULAIRE DE CONTACT
views 2319
Depuis qq temps, des robots de SPAM utilisent le formulaire de contact des boutiques PrestaShop pour envoyer des mails. Voici deux astuces  (les de...
Seo et Prestashop | Astuces
views 773
Vous avez une boutique en ligne ou le projet d'en ouvrir une ? Il y a une étape indispensable à ne surtout pas oublier ou négliger : le Référenceme...
Mettre à jour automatiquement le taux de change | Astuce Prestashop 1.6
views 993
Vous désirez ouvrir votre boutique à l'international et indiquez le taux de change. Voici un petit tuto qui va vous montrer comment mettre à jour a...
Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop
views 722
Créer son site e-commerce avec Prestashop n'est pas toujours facile. Je mettrais régulièrement des documents que vous pourrez télécharger afin de mieu...
Quels sont les modules utilisés sur la page d’accueil ? | Prestashop 1.7
views 11932
Par rapport à Prestashop 1.6, la page d'accueil a totalement été relooké et le nom et le hook des modules ont été modifiés. Voici une check-list de...
Faut-il installer et utiliser Prestashop 1.7 ?
views 3179
Prestashop a lancé officiellement la sortie de Prestashop 1.7, lundi 7 novembre. Vous pouvez télécharger le zip sur le lien suivant: https://www.prest...

Laisser un commentaire

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