Modification CSS Prestashop

Prestashop 1.7 – Modifier le CSS (ép.16)

La personnalisation du thème Prestashop est souvent demandée par les clients, avec la nouvelle version 1.7 « épurée » on peut plus facilement retoucher l’apparence graphique du shop… il faut juste prendre son temps.

Episode 16

Le fait de pouvoir créer son thème soi-même c’est toujours une grande part de satisfaction, car on peut laisser libre cours à son imagination. Ce que je vous conseille dans un premier temps c’est surtout de travailler sur l’association des couleurs, ne modifiez pas des dimensions (largeurs de blocs et %) si vous ne savez pas exactement ce que vous faites.

Il est toujours important de conserver la logique du thème, essayez de modifier les blocs principaux de manière à donner une identité à votre boutique. Si vous n’êtes pas très inspiré je vous conseille de retoucher votre thème afin d’obtenir un thème « bi-color » noir et blanc, c’est universel et ça passe toujours. Le côté dynamique, vous pourrez le travailler avec l’arrière-plan.

Sous Prestashop 1.7 on peut déjà faire beaucoup de choses avec le fichier « theme.css », car c’est lui qui regroupe la globalité des règles, vous pouvez effectuer des remplacements massifs (CTRL+H en principe dans votre éditeur) sur les codes couleurs pour modifier l’apparence générale.

Notez qu’il est aussi possible d’utiliser Sass, mais actuellement je n’ai pas vraiment trouvé un réel avantage dans ma manière de travailler. Maintenant c’est à vous de faire le saut dans la personnalisation du CSS !

Ressources

Pour ce tutoriel vous avez à disposition :

  • theme.css.txt (extrait de règles CSS)

Télécharger

Au programme

  • Ne concevez pas le thème de vos rêves, adaptez votre pensée au template existant.
  • Décompressez votre fichier CSS sur Unminify, afin de lire plus facilement les différentes règles CSS.
  • Définisssez l’ordre de vos règles en partant depuis le body (principal), jusqu’aux petits éléments qui composent l’interface.
  • Effectuez un remplacement massif des couleurs, mais vérifiez bien que votre code couleur est unique pour pouvoir revenir facilement en arrière sur les modifications.
  • Soyez méthodique et définissez correctement vos règles, préfixez toujours l’identifiant du parent lorsque cela est possible.
  • La méthode pour apprendre ? C’est de tester, règle après règle !

27 réflexions au sujet de « Prestashop 1.7 – Modifier le CSS (ép.16) »

  1. Merci pour ces tutos bien intéressants. Dans mon thème Classic, le fichier theme.css affiche tout sur une seule ligne ! Je n’ai pas vu sur cette version une commande qui le ferait pour gagner en rapidité. Comment donc afficher ces css de façon plus agréable ? Merci

    1. Bonjour,

      Dans le tutoriel j’aborde ce point avec le service Unminify, qui décompresse le CSS pour le rendre plus lisible. Vous pouvez regarder à nouveau la vidéo, car j’aborde cette problématique du fichier CSS sur une seule ligne.

      A bientôt !

  2. Après unminify, le fichier theme.css fait dans les 11 000 lignes quand même !

    J’ajoute également un nouveau fichier CSS que j’appelle custom.css dans lequel je peux faire des « override » et ajouter mes propres règles CSS. Je trouve ça plus simple à gérer.

    Je voulais partir sur le starter theme car c’est quand même plus simple de construire le theme from scratch plutôt que de modifier la structure du theme classic. Mais par manque de temps, je me retrouve à modifier le theme classic ce qui est parfois aberrant : faire des override pour déconstruire un theme est quand même moins élégant que de tout coder sur mesure.

    1. Hello,

      Effectivement, le fichier comporte ensuite un grand nombre de lignes, mais il est plus facile ensuite de localiser la ligne à modifier.

      En principe ce que je fais, c’est que j’ajoute un override de règles au fond du fichier CSS principal… Avant je mettais cela dans un fichier personnalisé CSS, mais parfois la compression CSS (via cache) n’était pas bien prise en compte sur le fichier CSS custom ajouté.

      Tout coder sur mesure est un idéal, mais est-ce vraiment utile ? Tout dépend du contexte, si c’est pour soi-même ou pour un client… Actuellement j’essaie toujours d’aller à l’essentiel, mais cette manière de faire est bien sûr perfectible.

      A bientôt !

    2. Travailler dans le fichier CSS est certe complexe et pas forcément digeste! Partez de la version SASS qui est beaucoup plus lisible et facile à comprendre, c’est ce que j’ai fait sur le projet sur-lequel je suis actuellement. Le thème est plutôt bien fait et découpé en beaucoup de « zone ».

      Voici le lien du dépôt: https://github.com/PrestaShop/PrestaShop/tree/develop/themes/classic

      Pour la configuration de l’espace de travail j’ai expliqué dans mon autre poste.

      Bonne journée,

      1. Bonjour,

        Oui, vous avez raison sur ce point… d’ailleurs il serait plus judicieux d’utiliser le fichier « custom.css » présent dans le même dossier qui lui est vierge, afin de définir des nouvelles règles (pour overrider le fichier CSS de base).

        Merci de nous avoir partagé le lien du dépôt avec la version SASS.

        A bientôt !

        1. Bonjour,

          Pourquoi overrider le fichier de base? On ajoute du code CSS pour annuler le fonctionnement initial, je pense que c’est contre-productif. Le fichier custom.css est là pour justement ne rien toucher au fichier de départ pour des « quick fix ». S’il y a beaucoup de modifications, autant changer directement les éléments dans le fichier SCSS correspondant.

          Par contre j’ai copié le thème de base pour ne pas me faire avoir à chaque MAJ de prestashop qui sont nombreuses actuellement :-). Par exemple simplement changer le nom Classic en Classic2, pour cela changer le nom du dossier et ne pas oublier de modifier le fichier config/theme.yml par
          name: classic2
          display_name: Classic2

          Bonne journée,

          1. Bonjour,

            Je comprends tout à fait votre remarque, dans les tutoriels qui ont suivi j’ai finalement ajusté le fichier custom.css (quand cela était justifié).

            Après je dois dire que je n’utilise pas toujours forcément le chemin conseillé « idéal », disons que j’ai pas forcément d’arguments précis pour justifier cela… J’essaie d’exécuter au plus vite parfois sans trop me poser de questions, pourvu que je puisse avancer et certainement qu’il y’a à redire dans ma manière de faire.

            A bientôt !

  3. Hello,

    La configuration pour travailler avec les fichiers sass est peut-être compliquée à la base, mais c’est beaucoup plus propre! Je ne travaille plus jamais en CSS directement depuis que j’ai découvert SASS qui est une tuerie! Il y a moyen d’écrire plusieurs lignes de CSS en quelques ligne.

    Comme j’ai dû chercher comment faire, je vous donne le tutoriel :-). Il faut installer nodejs. Télécharger la version du thème classic directement depuis le dépôt de Prestashop ensuite rendez-vous dans le dossier « themes/classic/_dev » via le terminal.

    Faite un « npm install » pour installer les différentes dépendances qu’il faut pour le projet, cela peut prendre longtemps!

    Une fois les dépendances installées entrez simplement « webpack -w ». Le terminal va analyser les modifications que vous faites sur le fichier SASS et générer votre fichier theme.css

    Pour résumer, on travaille dans le dossier _dev qui va générer les fichiers finaux dans le dossier assets/css.

    Honnêtement c’est chiant à mettre en place, mais si vous faites beaucoup de modifications c’est beaucoup plus facile! Par exemple pour changer la couleur vous le faites dans le fichier _dev/css/partials/_variables.scss oubliez le chercher remplacer 😛 si par malheur vous avez 2 fois la même couleur pour des éléments différents ça peut vitre être l’anarchie!

    Je peux vous garantir que ceux qui font du CSS classique une fois découvert les fonctionnalités géniales de SASS le retour en arrière est impossible!

    Bonne journée

    1. Hello,

      J’ai déjà expérimenté SASS avec Scout sous Windows, le concept est bien sûr très intéressant, pour le moment son utilisation n’est pas devenue un standard dans mes travaux.

      Par contre, dans les tutoriels, j’évite de rajouter une couche supplémentaire pour qu’on reste sur un bas niveau facile d’accès à tous.

      Il y’a aussi d’autres raisons, comme par exemple le 99% des CSS des modules ne sont pas forcément supportés / intégrés avec SASS… du coup cela implique de quand même faire du CSS à la main.

      Vous avez bien fait de faire cette remarque et merci pour les informations que vous avez apportées.

      A bientôt !

      1. Bonjour,

        Bien sûr les plug-ins ne sont pas forcément faits en SASS, mais la refonte du thème touche quand même 90% du travail. Je comprends votre idée de rester simple, après une version simple pour tous avec l’explication pour les plus explorateurs donne l’occasion à tous de trouver la solution la plus adaptée à ses besoins!

        Le plus gros avantage depuis que je travaille avec SASS est le fait d’avoir des présets tout prêt que j’active ou non en fonction de mes besoins… Par exemple avec bootstrap tout importer pour juste utiliser le système de grille est une aberration! Avec bootstrap SASS on importe que ce qui est utile… Donc on a un fichier CSS plus petit et super facile à maintenir!

        Après il faut savoir que je suis principalement intégrateur web donc SASS m’a grandement facilité la vie et fait gagné énormément de temps. Par exemple pour écrire le fichier SASS pour créer des sprites ont fait un tableau avec x éléments puis 8 lignes de SASS maximum alors qu’en CSS on devrait écrire 5 lignes x le nombre d’éléments! Enfin j’arrête de faire l’apologie de cette technologie, je pourrai en débattre des heures. 🙂

        Bonne journée,

        1. Bonjour,

          Je pense aussi ce qui fait la différence c’est que vous êtes spécialisé sur la partie intégration, de mon côté c’est une tâche parmi beaucoup d’autres globales que je draine. C’est certainement ce qui explique aussi pourquoi j’ai moins approfondi le sujet.

          Merci en tout cas d’avoir apporté ces conseils !

    1. Bonjour,

      Cela n’est pas nécessaire. Si vous avez des règles CSS spécifiques, vous pouvez aussi les mettre directement dans le fichier « custom.css » présent dans ce même répertoire.

      A bientôt !

  4. Bonjour et merci pour ce super tuto. Je ne saurais pas dire pourquoi mais j’ai fait exactement pareil mais aucune de mes modifications n’est pris en compte… J’ai essayé de changer le header #fff avec un autre code hexadecimal (pas pris en compte) j’ai voulu remplacer tous les #fff par d’autres couleurs mais aucune des modifs n’est apporté!! Pourtant j’ai bien vidé le cache dans prestashop mais rien n’y fait ? Prestashop 1.7.1

    1. Bonjour,

      Les caches de Prestashop sont peut-être vides, mais le problème est peut-être lié au cache du navigateur. Faites bien un CTRL+R ou F5 sur votre page ou videz le cache de votre navigateur pour vérifier.

      A bientôt !

  5. Bonjour Germain,
    Merci pour votre travail!
    J’ai un petit soucis, j’ai pu recopier le code css sur le site Unminify et coller dans theme.css sur netbeans mais rien ne se passe. Sachant que j’ai fait la manip CTRL+R aussi. Pour info, après avoir fait F12 et puis pointer le curseur sur les éléments du Template Prestashop il m’indique theme.css:7 et pas la ligne réelle au niveau du code css.
    Merci pour votre retour!
    merci pour votre retour.
    bonne soirée

    1. Bonjour,

      En principe quand un fichier CSS ne s’actualise pas, il faut bien vérifier que tous les caches de Prestashop sont désactivés (Smarty / Compression) et quand vous rechargez la page de bien forcer le vidage du cache avec la console Chrome (comme montré dans la vidéo).

      Vous pouvez aussi tester avec un autre navigateur en vidant « tout » de manière à être sûr qu’il ne s’agit pas d’un problème du navigateur, avant de chercher plus loin.

      A bientôt !

  6. Bonjour,

    Merci pour ce tuto!
    Mais je n’y arrive pas!
    Je voudrais simplement renommer en dupliquant le thème classic.

    J’ai exporter le thème via BO,
    j’ai renommer le thème,
    j’ai modifier le nouveau nom dans
    config/theme.yml par
    name: nouveaunom
    display_name: nouveaunom

    Maintenant lorsque je veux l’importer comme nouveau thème, un message d’erreur me signale que le thème n’est pas compatible 1,7…

    Qu’ai je loupé?

    Merci de votre aide

    1. Bonjour,

      Personnellement j’ai pas expérimenté encore ces étapes sous Prestashop 1.7, la duplication de thème et je sais pas encore exactement ce que ça implique et s’il faut faire de la retouche ailleurs. Je ferai le test prochainement… si je vois qu’il y’a des dépendances je ferai un tutoriel. Regardez peut-être aussi en base de données (du côté des tables de thèmes), il y’a peut-être quelques enregistrements à insérer.

      A bientôt !

  7. Bonjour,

    Merci beaucoup pour ces vidéos qui donnent vraiment envie de « s’y mettre ».

    Est-il possible de faire ces modifications sans avoir une installation de son presta en local ? En effet, je suis hébergé chez OVH et je n’ai fichier installé sur mon dur.

    Merci de votre aide 🙂

Laisser un commentaire

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