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

Modifier la police d’écriture avec Google Fonts – PrestaShop 1.7
views 6142
Dans ce tuto nous allons voir comment modifier la police d'écriture avec Google Fonts pour votre site PrestaShop 1.7 A noter: actuellement la police par défaut est Noto Sans, sans-serif Etape 1) Choisir sa police d'écriture  Nous allons choisir notre/nos police(s) d'écriture sur le site de Google Fonts à cette adresse : https://fonts.google.com/ Je vais choisir deux polices d'écriture, 1 ...
Faire une sauvegarde de votre BDD depuis le BO de Prestashop 1.6
views 2056
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 produits, vos images, vos textes, vos commandes, vos clients.... Pourquoi faire une sauvegarde ?  En cas de bug, d'une fausse manipulation, d'un module défectueux.... il sera peut-être nécessaire de réinitialiser votre base de données. D'où l'import...
Lutte contre la fraude à la TVA et PrestaShop
views 1081
Depuis le 1er janvier 2018, l'article 88 de la loi n° 2015-1785 du 29 décembre 2015 de finances pour 2016 prévoit l'obligation pour les assujettis à la taxe sur la valeur ajoutée (TVA) qui enregistrent les règlements de leurs clients au moyen d'un logiciel de comptabilité ou de gestion ou d'un système de caisse, d'utiliser un logiciel satisfaisant à des conditions d'inaltérabilité, de sécurisation...
Supprimer “Imprimer” sur la fiche produit | Astuce Prestashop 1.6
views 2009
Personnellement, je n'arrive plus à me souvenir la dernière fois où j'ai imprimé une fiche produit depuis le site d"une boutique en ligne. Je suppose que si vous lisez cet article, vous êtes dans la même situation. Il est très simple de supprimer le mot et l'icône "Imprimer" sur la fiche produit,  mais il faut obligatoirement passer par le code. Comment supprime t-on "Imprimer"  sur la fiche p...
Ajouter les réseaux sociaux sur la page d’accueil | Prestashop 1.7
views 6740
Contrairement à Prestashop 1.6, les réseaux sociaux sur votre page d'accueil ne s'affichent pas automatiquement. Ce petit tutorial va vous permettre de les configurer et de les faire apparaître sur la version Prestashop 1.7. Configurer les réseaux sur la page d'accueil | version Prestashop 1.7 A) Depuis le back-office de Prestashop, allez dans Modules > Modules & Services  B...

Laisser un commentaire

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