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

Le nouveau menu du back-office de Prestashop 1.7 – Partie 3
views 7698
Pour rappel, le menu du back-office de Prestashop 1.7 est organisé en 3 parties : Vendre qui regroupe les commandes, le catalogue, les clients, l...
Comment créer un compte Paypal Professionnel ? | E-ecommerce
views 1083
Si  vous désirez installer Paypal comme moyen de paiement sur votre site e-commerce, il sera nécessaire de créer  un compte professionnel. Voici le...
Insérer pop-up dans une page CMS | Astuce Prestashop 1.6
views 2429
Un client désirait insérer un système de pop-up dans la page cms de Prestashop Je ne voulais pas installer un n-ième module pour faire simplement c...
Installer manuellement un module PrestaShop
views 857
Voici un petit tuto pour vous permettre d'installer manuellement votre module PrestaShop Pour ce tuto, nous allons partir du fait que vous avez ach...
Améliorer les performances de votre boutique Prestashop 1.6
views 3363
A) Connaitre les performances de sa boutique Prestashop Lorsqu'un internaute arrive sur votre site de vente en ligne en général il n'a pas la patienc...
Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop
views 591
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...
Comment augmenter la taille de la description courte dans Prestashop
views 1136
Lors de la création de la fiche produit sur Prestashop, vous serez peut-être être bloqué par la limitation du nombre de caractères de la description c...
Seo et Prestashop | Astuces
views 641
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...
Pourquoi faut-il migrer sur Prestashop 1.6 | Infographie
views 125
Cette infographie, met en avant les différentes raisons pour migrer son site Prestashop sur la version 1.6 En voici quelques-unes : - le thème par d...
Prestashop 1.6 | Slider sur toute la largeur sur votre page d’accueil
views 6282
Voici un tutorial qui va vous permettre d'afficher le slider de votre page d'accueil sur toute la largeur. Valable pour prestashop 1.6 A noter :...

Laisser un commentaire

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