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

Taille des Images du thème par défaut de Prestashop 1.6
views 6142
Ce tutoriel va vous permettre de connaitre la taille des images du thème par défaut de Prestashop La plupart des images que vous téléchargez dans le back-office doivent être enregistrées au format .jpg ou .png. Attention pour activer le format png il faut aller dans Préférences > Images et dans la partie "Options de génération d'images", cochez dans format d'image : Utiliser le PNG uniquemen...
Quelques variables qui peuvent vous aider pour votre mise en page – Prestashop 1.7 ...
views 11148
Dans le tuto du jour, je vais énumérer quelques variables de PrestaShop 1.6 PrestaShop 1.7 qui peuvent vous aider pour personnaliser votre site. N'hésitez pas à les partager via les commentaires ------------------ Insérez un lien vers une page CMS dans un fichier TPL Prestashop 1.6 : {$link->getCmsLink()} Exemple : l'id de la page cms est 3 Prestashop 1.7 : {url entity='cms' id=$i...
Seo et Prestashop | Astuces
views 1034
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érencement - SEO. Avoir une boutique c'est bien, mais faut-il qu'elle soit visible sur le net. Ben oui, un site e-commerce qui se situe en 6ème page et/ou à une faible notoriété à très peu de chance d'être visité. Mais rien n'est perdu, il faut utilise...
Supprimer le cadre blanc autour de vos images | Astuce Prestashop 1.6
views 4315
Lorsqu’on upload une image dans Prestashop, ce dernier la redimensionne selon les différents formats spécifiés dans « préférences/images ». Mais si vous regardez bien le front-office de  votre boutique, vous pouvez remarquer que Prestashop ajoute par défaut un cadre blanc autour de votre image. Cette astuce Prestashop est valable pour la version 1.6 Voici la solution pour remédier à ce pr...
Pourquoi faut-il migrer sur Prestashop 1.6 | Infographie
views 214
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éfaut de Prestashop est plus esthétique que l'ancien, plus  élégant, souple et permet de mettre en avant des bannières personnalisables. - il est possible de modifier les couleurs, les polices, etc directement depuis le Front Office. - la création ...

Laisser un commentaire

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