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

Faire une sauvegarde de votre BDD depuis le BO de Prestashop 1.6
views 1126
Qu'est ce qu'une BDD (base de données) ?  Une base de données est un outil qui permet de collecter et organiser des informations. Exemple: vos pro...
A/B Testing – Quick Vs Multi Page checkout – Which performs better?
views 503
Checkout pages are the last part of transaction that confirms sale. They ask customer about their personal information (name, CNIC, credit card info, ...
Afficher les disponibilités sur la liste de produits | Astuce Prestashop 1.6
views 2170
Ce tutorial va vous permettre d'afficher les disponibilités (en stock....) sur la liste des produits du bloc Populaire , Nouveaux Produits, Meilleures...
Connaître les modules de la page d’accueil | Astuce Prestashop 1.6
views 14210
Vous avez installé votre boutique Prestashop 1.6 et désirez modifier votre page d'accueil ? Ce petit tuto va vous aider à le faire en indiquant le nom...
Supprimer le cadre blanc autour de vos images | Astuce Prestashop 1.6
views 3277
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...
Insérer un favicon dans votre boutique Prestashop
views 2873
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...
Bug Google MAP – Petit problème… | Prestashop 1.6
views 3478
Vous êtes sur Prestashop 1.6 et la carte Google MAP, ne s'affiche pas sur la page "magasins" ? Voici un tutoriel qui va permettre de régler ce peti...
Petit aperçu du thème Classic de prestashop 1.7
views 5105
Prestashop vient de sortir la version  1.7.0.0 RC0. A noter, par rapport à la version Prestashop 1.6, le thème a été totalement repensé afin d'être...
Désactiver les frais de port dans le block panier | Astuce Prestashop 1.6
views 4270
Pour éviter toute confusion, je préfère désactiver les frais de port dans le block panier. En effet, si le client n'est pas connecté à son compte, ...
Taille des Images du thème par défaut de Prestashop 1.6
views 4823
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 l...

Laisser un commentaire

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