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)
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éfinissez 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 !
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
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 !
sinon tu copie ta ligne unique et tu te rends sur http://jsbeautifier.org/ pour rendre ton code plus agréable à lire; ça marche aussi pour le js et le html
Merci d’avoir apporté cette précision et d’avoir donné le lien.
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.
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 !
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,
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 !
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,
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 !
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
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 !
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,
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 !
Bonjour
Faut il recompresser après modification pour avoir 6 lignes ou bien laissé comme tel.
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 !
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
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 !
super merci c’était bien ça!!
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
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 !
Parfait! ça fonctionne !
Un grand merci 🙂
Bonne soirée
C’est super, à bientôt !
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
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 !
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 🙂
Bonjour,
Il est possible de travailler directement sur les fichiers sources en ligne, regardez le billet suivant comment procéder avec Notepad++ ou Filezilla : https://www.webbax.ch/2017/04/03/prestashop-1-7-modifier-les-fichiers-par-ftp-ep-17/
A bientôt !
Bonjour,
Est ce que prestashop fait le mise à jour automatique de théme aussi comme WordPress ou non ?
Si oui ,comment le désactiver ? car J’ai modifier une grande partie d’un thème css etc.
Bonjour,
Prestashop ne se met pas à jour automatiquement, sauf si vous avez installé Prestashop en tant qu’application auprès de votre hébergeur (avec une interface d’installation fournie par l’hébergeur)… mieux vaut vérifier. Si vous avez déployé Prestashop manuellement avec un .zip récupéré depuis le site officiel alors il ne se mettra pas à jour automatiquement.
A bientôt !
Bonjour,
Comment fait-on pour modifier le CSS avec un thème enfant ?
Faut-il créer un fichier .css dans le thème enfant et copier tout le nouveau fichier, ou juste les quelques lignes modifiées ?
Hello,
Pour le moment j’ai pas testé et je ne sais pas si tout marche correctement (ça me semble un peu jeune pour avoir zéro bug). La méthode le plus simple reste de faire une copie du thème original dans sa globalité.
A bientôt !
Super video, comme d’habitude 😉
j ai une petite question, je trouve le bloc header triste en blanc, j aimerais mettre une image de fond, dois je ajouter la regle dans header.tpl directement ou dans le css ?
Bonjour,
C’est mieux de le faire dans le CSS, mais peut-être essayez ce tutoriel, qui permet déjà d’égayer votre page : https://www.webbax.ch/2016/12/12/prestashop-1-7-dynamiser-larriere-plan/
A bientôt !
Bonjour,
pourquoi modifiez-vous le THEME.CSS si dans le même dossier vous avez le CUSTOM.CSS dont le rôle est justement de corriger le premier en ayant la priorité?
cordialement
Bonjour,
Effectivement vous avez tout à fait raison, actuellement je passe directement par ce fichier « custom.css » (cela dépend aussi du type de modification).
Merci pour cette remarque !
Bonjour, merci beaucoup pour toutes ces infos 🙂
Du coup j’ai tenté de faire votre méthode dans le fichier thème.css pour mettre le fond de mon site (en ligne) en blanc mais aucune modification ne se fait sur mon site. Le fond reste inchangé bien que j’ai enregistré la nouvelle règle dans le thème.css et vidée tout les caches ( navigateurs et prestashop). J’ai aussi regardé sur un autre ordinateur
J’espère que vous pourrez m’aiguiller sur ce problème.
Merci d’avance et encore merci pour tout vos tutos ils sont top !!
Audrey
Bonjour,
Il faudrait consulter le tutoriel suivant, un problème d’actualisation des données peut-être la cause : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/
A bientôt !
Bonjour,
J’ai une question sur ce fichier theme.css.
Je l’ai modifié en y ajoutant un code css pour afficher les sous-categories dans la page category.tpl
Mais, vu que mon code ne fonctionnait pas bien, je l’ai donc supprimé. Mais cela a fichu tout l’apparence de mon theme en l’air. J’ai déjà essayé de supprimer les caches mais cela ne change rien. Je vous laisse un lien de mon site: http://www.clicknpick.xyz
Merci d’avance pour votre aide.
Bonjour,
Il faudrait consulter le tutoriel suivant, un problème d’actualisation des données peut-être la cause : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/. Par contre, je fais le test avec le thème par défaut, sur un thème personnalisé le résultat d’affichage peut-être différent.
A bientôt !
Bonjour,
merci pour toute vos aides que ce soit ici ou sur youtube.
par contre je travaille en ligne dans le back office. comment je peux faire pour modifier le css ?
merci
christelle
Bonjour,
Si votre site est déjà en ligne, vous pouvez essayer de modifier directement vos fichiers CSS via Notepad++ avec la connexion live : https://www.webbax.ch/2017/04/03/prestashop-1-7-modifier-les-fichiers-par-ftp-ep-17/
A bientôt !
J’ai un souci, en fait les fichiers css pris en compte pour l’enrichissement du html ne sont ni thème.css, ni custom.css, mais des fichiers css dans le dossier themes/classic/assets/cache/
Ce qui est curieux, c’est que c’est récent …
Hello,
Certainement parce que les caches Prestashop sont activés, pouvez-vous essayer de tous les désactiver en suivant le tutoriel suivant : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/
A bientôt !
Bonjour,
J’ai une question sur la modification des couleurs.
Au niveau des boutons « s’abonner, commander… », j’ai changé la couleur background et la couleur de survol, seulement quand je clic le bleu d’origine réapparaît furtivement. Avez vous une solution?
Merci beaucoup pour tous vos tutos, ils sont super !!
Yohann
Bonjour,
je sais le poste est assez vieux, mais il m’aide beaucoup.
petite question, j’utilise un thème enfant et un custom.css tout neuf dans celui-ci;
Sauf que les modifications de CSS qui sont dans theme.css ne fonctionnement pas, il faudrait le même principe que custom, mais dans le thème enfant.
Une idée ?
Merci
Patrick
Bonjour,
A vrai dire j’utilise rarement le thème enfant Prestashop (trop peu de développeurs l’utilisent, donc il peut y avoir certains comportement non fonctionnels).
A bientôt !
Bonjour,
C’est bon j’ai trouvé, j’ai mis 2/3 règles en !important et maintenant ça fonctionne
Merci