Module « Custom CSS par type de page » pour PrestaShop 1.7 à 9.0

Présentation du module

Le module Custom CSS par type de page développé par Thierry Taruffi est la solution idéale pour les développeurs, intégrateurs ou e-commerçants qui souhaitent ajouter rapidement du CSS personnalisé sans modifier les fichiers natifs du thème PrestaShop.

Contrairement aux méthodes classiques (ajout de fichiers dans le thème), ce module permet une gestion dynamique, ciblée et sécurisée du CSS, directement depuis le back-office, avec un affichage conditionnel par type de page.

✅ Il permet aussi de modifier rapidement le style sans jamais se connecter à un logiciel FTP.

Nouveautés version 3.2.0

Cette nouvelle version majeure apporte des fonctionnalités professionnelles qui révolutionnent l’expérience utilisateur :

🎨 Éditeur de code professionnel

Intégration de CodeMirror, l’éditeur utilisé par les IDE professionnels :

• ✅ Coloration syntaxique CSS en temps réel
• ✅ Auto-complétion intelligente (Ctrl+Espace)
• ✅ Numérotation des lignes
• ✅ Détection d’erreurs visuelles
• ✅ Thème sombre moderne
• ✅ Indentation automatique

🛡️ Sécurité renforcée

Protection niveau enterprise contre les injections malveillantes :

• ✅ Filtrage avancé : bloque `<script>`, `javascript:`, `expression()`
• ✅ Protection IE : neutralise `behavior:` et autres failles
• ✅ URLs sécurisées : bloque les data: URLs malveillantes
• ✅ Imports contrôlés : empêche les @import externes dangereux
• ✅ Nettoyage intelligent : préserve le CSS valide, nettoie le dangereux

💾 Système de backup automatique

Sauvegarde automatique avant chaque modification :

• ✅ 10 backups maximum par type de page (50 au total)
• ✅ Horodatage précis : date et heure de chaque sauvegarde
• ✅ Restauration en un clic avec aperçu de la taille
• ✅ Nettoyage automatique : supprime les anciens backups
• ✅ Diagnostic avancé : messages d’erreur détaillés en cas de problème

Fonctionnement du module

Une fois installé, le module génère automatiquement les fichiers suivants :

/modules/customcss/views/css/
├─ css-custom-global.css
├─ css-custom-home.css
├─ css-custom-cat.css
├─ css-custom-prod.css
├─ css-custom-cms.css

/modules/customcss/views/css/source/
├─ css-custom-global.css (version éditable)
├─ css-custom-home.css (version éditable)
├─ css-custom-cat.css (version éditable)
├─ css-custom-prod.css (version éditable)
├─ css-custom-cms.css (version éditable)

/modules/customcss/backups/
├─ css-custom-global-2025-06-05_14-30-15.css
├─ css-custom-home-2025-06-05_14-25-10.css
└─ ... (jusqu'à 10 backups par type)

Chaque fichier correspond à un type de page précis. Le contenu est éditable depuis le back-office avec l’éditeur CodeMirror. Toute modification est automatiquement minifiée pour optimiser les performances et sauvegardée automatiquement.

Architecture source/production

Le module utilise une architecture professionnelle en double niveau :

• 📝 Fichiers source (`/source/`) : versions lisibles et bien formatées pour l’édition
• ⚡ Fichiers production (`/css/`) : versions minifiées et optimisées pour le front-office
• 🔄 Workflow automatique : édition → sauvegarde source → minification → production

Injection intelligente du CSS

Le module injecte les feuilles de style de manière ciblée et s’intègre parfaitement dans le système de cache PrestaShop :

• hookHeader() : injecte css-custom-global.css sur toutes les pages
• actionFrontControllerSetMedia : injecte uniquement le CSS spécifique à la page en cours
• 🏃 Cache intégré : combinaison automatique avec les CSS du thème
• 📦 Minification PrestaShop : re-minification par le système natif
• 🌐 Compatible CDN : fonctionne avec tous les systèmes de cache

🔍 Exemple de comportement

Interface utilisateur moderne

L’interface a été entièrement repensée pour offrir une expérience digne des outils professionnels :

• 🎯 Sélection par onglets : bascule intuitive entre les types de pages
• 📱 Interface responsive : fonctionne sur tous les écrans
• 🔍 Recherche instantanée : Ctrl+F dans l’éditeur
• 💡 Messages informatifs : retours utilisateur clairs et détaillés
• ⏱️ Sauvegarde automatique : plus de risque de perte de travail

Compatibilité

Le module est entièrement compatible avec les versions suivantes de PrestaShop :

• ✅ PrestaShop 1.7.8.x
• ✅ PrestaShop 8.x (et supérieures testées à ce jour)
• ✅ PrestaShop 9.x (testées à ce jour)

Il fonctionne aussi bien avec le thème par défaut (Classic) qu’avec des thèmes personnalisés. Le module ne surcharge aucun fichier natif et n’utilise aucun override, garantissant une parfaite stabilité sur toutes les installations.

Points forts du module

• 🎯 Injection ciblée : seules les CSS nécessaires sont chargées
• ⚡ Minification automatique : le CSS est optimisé sans effort
• 🧼 Sans surcharge du thème : aucun fichier du thème modifié
• 🖥️ Interface professionnelle : éditeur CodeMirror intégré
• 🔐 Sécurité enterprise : protection contre les injections malveillantes
• 💾 Backups intelligents : sauvegarde automatique avant chaque modification
• 🏃 Performance optimale : intégration parfaite au cache PrestaShop
• 🛠️ Diagnostic avancé : messages d’erreur détaillés pour un debug facile

Cas d’usage typique

• Masquer un bloc sur la page produit ? 👉 css-custom-prod.css
• Changer la couleur de fond de l’accueil ? 👉 css-custom-home.css
• Uniformiser tout le site ? 👉 css-custom-global.css
• Tester des modifications ? 👉 Backup automatique pour revenir en arrière
• Débugger un problème ? 👉 Diagnostic détaillé en cas d’erreur

Sécurité et conformité

Le module atteint un niveau de sécurité enterprise :

• 🛡️ Note de sécurité : 100/100
• ✅ Conforme PrestaShop Addons : respecte tous les standards
• ✅ Protection CSRF : jetons de sécurité sur toutes les actions
• ✅ Validation stricte : tous les inputs sont contrôlés
• ✅ Échappement HTML : protection contre les injections XSS
• ✅ Logs sécurisés : traçabilité des actions sensibles

Prix du module

💶 72 € TTC pour une licence à vie, sans abonnement.

Télécharger le module

Conclusion

Cette version 3.2.0 transforme complètement l’expérience utilisateur et place le module au niveau des outils professionnels. Elle est pensée pour les professionnels exigeants qui veulent :

• ✅ Gagner du temps avec un éditeur moderne
• ✅ Travailler en sécurité avec les backups automatiques
• ✅ Maintenir des performances optimales avec la minification intelligente
• ✅ Garantir la sécurité avec une protection niveau enterprise

👉 Il remplace avantageusement les bricolages manuels ou les thèmes surchargés, et s’installe en 2 minutes pour une productivité immédiate.

➡️ Un must-have absolu dans toute boîte à outils PrestaShop.