Retouche CSS

Prestashop 1.7 – Personnaliser le CSS (ép.4)

Souvent les clients me demandent « Comment je peux personnaliser ma boutique » ? Dans le nouveau template de Prestashop, une centralisation du CSS a été effectuée, ce qui permet de faciliter la modification de l’apparence générale.

Episode 4

Concrètement si vous êtes e-commerçant, vous avez de la chance, car la tendance veut que les e-shops doivent se présenter de manière épurée. Grâce à la nouvelle version de Prestashop, il est possible de retoucher seulement quelques codes couleurs et l’ensemble de votre boutique sera harmonisée sur la base de votre identité visuelle.

Il est important de laisser la dominance blanc, je vous recommande vivement de suivre cette convention… n’ajoutez pas des fonds partout ou trop de couleurs. La tendance c’est l’épuré, surfez sur la vague et acceptez de retoucher seulement 1 ou 2 couleurs.

Je me souviens d’avoir effectué sur certains templates Prestashop, des milliers de retouches au niveau de l’apparence pour certains clients. Cela n’est plus d’actualité… actuellement il faut « CENTRALISER » et « SIMPLIFIER ». Dans l’exemple que nous allons voir ensemble, je vais retoucher le fichier « theme.css » de la boutique afin qu’elle puisse s’harmoniser avec mon logo.

Au programme

  • Le but ? Harmoniser la boutique :
    – votre point de repère ? Les couleurs de votre logo.
  • Optez pour la neutralité, des boutons gris / noirs, seront universels.
  • Analysez un code couleur avec Firebug.
  • Trouvez facilement le code couleur avec Colorzilla.
  • Remplacez en masse vos codes couleurs avec l’éditeur de code.
  • Analysez les différents états d’un élément sous Firebug.
  • Bonus :
    – optimisez le bloc rassurance client
    – encapsulez totalement la fiche produit (colonne de droite)

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (9 votes, moyenne : 5,00 sur 5)
Loading...

14 commentaires sur “Prestashop 1.7 – Personnaliser le CSS (ép.4)”

    1. Bonjour,

      N’hésitez pas à vous abonner à la chaîne YouTUBE pour être notifié des nouvelles vidéos qui sont publiées chaque semaine.

      A bientôt et merci !

  1. Bonjour M. Germain Tenthorey,
    j’ai opté pour la neutralité en choisissant la couleur noir pour personnaliser les éléments des pages.
    En exécutant un remplacement massif dans « theme.css » : remplacer «#2FB5D2 » par « #000101 » les éléments deviennent transparents (ou blancs).
    J’étudie en local prestashop_1.7.2.5 (pour lancer ensuite ma boutique) et vous seriez bien aimable de me communiquer les raisons de mon échec pour pouvoir résoudre le problème.
    Merci à l’avance pour votre aide.
    Imed-Tunisie

  2. merci pour ces tutos par contre je me demandais si il etait possible de modifier couleur police de la description courte afin de pouvoir changer police description sur tous les produits et ne pas devoir le faire un par un grace au CSS je pense que c est possible mais en modifiant product description short rien en se passe …merci pour ta future réponse Webbax

  3. Bonjour et long live webbax,

    Je suis sous prestashop 1.7.5.2 et dans le assets/css/ je n’ai que le custom.css , pas de theme.css

    j’imagine que presta a dû évoluer depuis et que le theme.css n’est plus d’actualité ? ou je me trompe d’endroit ? 🙂

    1. ok, désolé , je n’ai pas scroller assez bas (je travaille avec mc sous linux) , je l’ai trouver !!
      encore mille excuses , tout va bien 🙂

    2. Bonjour,

      Il faudrait bien vérifier à nouveau dans « \themes\classic\assets\css\theme.css » j’ai fait le contrôle à l’instant sous cette version, le fichier existe bien (pour le thème original).

      A bientôt !

Laisser un commentaire

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