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)

24 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 !

      Répondre

      1. Bonjour,
        Je crée ma boutique en local sur prestashop 1.7.7.2 et je souhaite modifié un produit en rajoutant sur la fiche une étiquette comme celle de la neuf pour y mettre « Tous Les Modèles » mais je n y parviens pas. Je regarde vos vidéo mais j ai rien trouver. Pourriez vous m aidé. Est ce que dans le custom.css je peux entrée une règle pour y ajouter cette éléments. Si oui sous quelle forme je dois l inscrire.
        Merci a vous.

        Répondre

  2. 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

    Répondre

  4. 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

    Répondre

  6. 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 ? 🙂

    Répondre

    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 🙂

      Répondre

    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 !

      Répondre

  7. Salut webbax.
    Felicitation pour toutes tes videos elle sont super!
    Je suis en 1.7.6.2 je ne comprend pas car je suis exactement ce que tu fait dans ta video pour le bloc reassurance et page product mais rien ne se passe.
    J’ai également suivi tes indication pour decompresser le css que j’ai effectue mais dans ma console google sea m’affiche toujours la ligne 10 pour tout.

    Merci pour ton aide !

    Répondre

  8. Bonjour,
    j’ai voulu faire les modifs et mon fichier ne correspond pas du tout !!!
    je ne trouve pas la couleur.

    comment est ce possible?
    Pourtant j’ai déjà suivi ce tuto et ça avait bien fonctionné.

    Répondre

  9. Bonjour, sur ma version 1.7.8.7 de ps le theme.css du theme classic ne fait que 72 ligne, il n y a pas les couleurs.. Il y a des src:url à la place du code CSS… Que faire ?

    Répondre

  10. Bonjour webbax !

    Merci pour toutes tes vidéos elles sont super et m’aident beaucoup dans la réalisation de mon site !

    Je suis en 1.7.8.7 et j’ai effectué les mêmes modifs en remplaçant tous les codes couleur bleu de base pour le code couleur de ma charte graphique, cela fonctionne mais toutes les icônes (shopping_cart, search, favori, etc) ne s’affichent plus et affiche en toute lettre le nom de l’icône.

    Cela est une erreur de ma part ou autre ?

    Merci pour ton aide !

    Répondre

    1. Le fichier a dû être « déformé », il faudrait reprendre le fichier d’origine et le modifier avec le Notepad++ qui respecte le format d’encodage source du fichier.

      Répondre

Laisser un commentaire

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