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

Ajouter des tabs dans une page cms | Astuce Prestashop 1.6
views 788
Ce tutorial va vous permettre d'insérer des tabs dans vos pages cms Astuce Prestashop 1.6 -------------------------------------- 1) Insérer une...
Supprimez le champs “objet” du formulaire de contact | Prestashop 1.6
views 940
Il est très important d'avoir un formulaire de contact simple, efficace et ergonomique. Pour un premier contact, le formulaire que propose Prestash...
Greffer le menu haut horizontal dans displayNav | Astuce Prestashop 1.6
views 2803
Ce tutoriel va vous permettre de greffer le module "menu haut horizontal" dans displayNav Cette astuce Prestashop est valable pour la version 1.6 ...
Quels sont les modules utilisés sur la page d’accueil ? | Prestashop 1.7
views 10784
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...
Désactiver “Recevez les offres spéciales de nos partenaires” | Astuce Prestas...
views 1136
Cette phrase  "Recevez les offres spéciales de nos partenaires"  apparait lors de la création d'un compte comme vous pouvez le voir sur la photo ci-de...
Seo et Prestashop | Astuces
views 713
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...
Insérer un favicon dans votre boutique Prestashop
views 1865
A) Qu'est ce qu'un favicon ?  Le favicon est l'icône qui se situe à  gauche de l'URL dans la barre d'adresse de votre navigateur B) Quelle est l...
Gérer les paniers abandonnés | Astuce Prestashop 1.6
views 2251
Qu'est ce qu'un panier abandonné ?  L’abandon de panier,  c’est lorsque l’un de vos internautes ne finalise pas le processus de commande, après avoir...
Ajouter gratuitement un live chat sur votre site | Astuce Prestashop 1.6
views 1393
Qu'est qu'un live chat ?  Le terme live chat désigne l'ensemble des moyens qui permet à un internaute de rentrer instantanément en contact  avec un e...
Bouton Suivant/Précedent sur la page produit | Astuce Prestashop 1.6
views 1041
Voici un petit tutoriel si vous désirez ajouter un bouton suivant/précedent sur la page produit Cette astuce Prestashop est valable pour la version...

Laisser un commentaire

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