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

Savoir si votre module est fiable pour Prestashop
views 179
Il existe aujourd'hui de nombreux modules (gratuits ou payants) et certains d'entre-eux peuvent avoir un impact négatif sur votre boutique (bug, lente...
Supprimez le champs “objet” du formulaire de contact | Prestashop 1.6
views 854
Il est très important d'avoir un formulaire de contact simple, efficace et ergonomique. Pour un premier contact, le formulaire que propose Prestash...
Remettre un produit en nouveauté | Astuce Prestashop 1.6
views 1216
Il est vous peut-être arrivé de vouloir remettre votre produit en nouveauté Il existe deux solutions dont une donnée par Webbax Dupliquer votr...
Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop
views 644
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...
Braintree – Une solution de Paiement sans VAD | Prestashop
views 3541
Qu'est-ce que Braintree ?  Braintree offre une solution complète de paiement pour les e-marchands sur mobile, tablette et bureau. C'est une entrepris...
Le nouveau menu du back-office de Prestashop 1.7 – Partie 3
views 8263
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...
Configurer les réseaux sociaux sur la page produit | Prestashop 1.6 et 1.7
views 1485
Aujourd'hui, nous allons voir comment configurer les réseaux sociaux sur les pages produits de votre boutique e-commerce sous Prestashop 1.6 et 17 ...
L’Affichage des colonnes | Astuce Prestashop 1.6
views 803
La dernière version de Prestashop (1.6) permet de gérer plus facilement l'affichage de la colonne de droite ou de gauche et de choisir sur quelles pag...
Configurer le mode multi-boutique dans PrestaShop 1.6 & 1.7
views 6085
Qu’est ce que la multi-boutique ? La multi-boutique est un groupe de boutiques qui partage la même administration. Vous pouvez donc gérer plusieurs b...
Où Changer le nom de sa boutique | Astuce Prestashop 1.6
views 1523
Si vous désirez modifier le nom de votre boutique sur le cms Prestashop, suivez ce petit tuto Comment modifier le nom de sa boutique depuis le back...

Laisser un commentaire

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