Personnaliser les couleurs de fond et du menu dans PrestaShop

Introduction

Modifier les couleurs de fond du thème et du menu de navigation fait partie des premières personnalisations que réalise tout marchand PrestaShop. L'opération est simple en apparence, mais un piège classique empêche beaucoup de débutants de voir leurs modifications : le système de cache CSS intégré à PrestaShop. Voyons comment procéder méthodiquement, de la désactivation du cache jusqu'à la mise en production.

Étape 1 : Désactiver la concaténation CSS (CCC)

Avant toute modification CSS, il est impératif de désactiver le système CCC (Concaténation, Compression et mise en Cache) de PrestaShop. Ce mécanisme fusionne et minifie tous les fichiers CSS en un seul fichier optimisé. En phase de développement, cela rend le débogage quasi impossible puisque les fichiers originaux ne sont plus chargés par le navigateur.

Sur PrestaShop 1.6

Rendez-vous dans Back Office → Paramètres avancés → Performance et désactivez les options suivantes dans la section CCC :

• Concaténation des fichiers CSS
• Compression des fichiers CSS
• Mise en cache

Sur PrestaShop 1.7 et 8.x

Accédez à Back Office → Paramètres avancés → Performances et basculez les options suivantes sur « Non » :

• **Concaténer les fichiers CSS** : Non
• **Minifier les fichiers CSS** : Non
• **Utiliser le cache** : Non (optionnel mais recommandé pendant le développement)

Important : N'oubliez pas de vider le cache de PrestaShop après chaque modification de ces paramètres. Un simple clic sur le bouton « Vider le cache » dans la même page suffit.

Étape 2 : Identifier les sélecteurs CSS avec l'inspecteur

L'inspecteur intégré aux navigateurs modernes est votre meilleur allié. Faites un clic droit sur l'élément à modifier, puis sélectionnez Inspecter (Chrome) ou Examiner l'élément (Firefox).

L'inspecteur vous révèle :

• Le **sélecteur CSS exact** appliqué à l'élément
• Le **fichier source** et le **numéro de ligne** correspondant
• La **cascade de styles** qui s'applique, du plus prioritaire au moins prioritaire

Grâce à la désactivation du CCC à l'étape précédente, les chemins de fichiers affichés dans l'inspecteur pointent vers les vrais fichiers sources, et non vers les fichiers concaténés du cache.

Astuce : tester en temps réel

Dans le panneau « Styles » de l'inspecteur, vous pouvez modifier n'importe quelle propriété CSS en direct. Ces modifications sont temporaires (elles disparaissent au rechargement), mais elles permettent de valider visuellement un changement avant de l'appliquer dans le code.

Étape 3 : Modifier la couleur de fond du thème

Sur PrestaShop 1.6 (thème par défaut)

Le fichier principal à modifier est global.css, situé dans le répertoire de votre thème :

/themes/votre-theme/css/global.css

Recherchez le sélecteur .columns-container qui contrôle le fond de la zone de contenu, et #header pour l'en-tête :

/* Couleur de fond de la zone de contenu */
.columns-container {
  background-color: #f5f5f5; /* Gris clair — remplacez par votre couleur */
}

/* Couleur de fond de l'en-tête */
#header {
  background-color: #2c3e50; /* Bleu foncé — remplacez par votre couleur */
}

Sur PrestaShop 1.7 et 8.x (thème Classic)

La structure a changé. Le thème Classic utilise des fichiers SCSS compilés. Le fichier CSS principal se trouve ici :

/themes/classic/assets/css/theme.css

Mais la bonne pratique consiste à créer un thème enfant et à surcharger les styles. Voici les sélecteurs équivalents :

/* Fond général du body */
body {
  background-color: #f8f9fa;
}

/* Fond de l'en-tête */
#header {
  background-color: #2c3e50;
}

/* Fond du wrapper de contenu */
#wrapper {
  background-color: #ffffff;
}

Si vous utilisez un thème enfant avec SCSS (recommandé), modifiez les variables dans _custom-variables.scss :

$brand-primary: #2c3e50;
$body-bg: #f8f9fa;

Étape 4 : Personnaliser la couleur du menu horizontal

Sur PrestaShop 1.6

Le module blocktopmenu gère le menu principal. Son fichier CSS se trouve dans le répertoire du thème :

/themes/votre-theme/css/modules/blocktopmenu/css/superfish-modified.css

Recherchez le sélecteur .sf-menu :

.sf-menu {
  background-color: #34495e; /* Couleur de fond du menu */
}

/* Couleur des liens du menu */
.sf-menu > li > a {
  color: #ffffff;
}

/* Survol des liens */
.sf-menu > li > a:hover,
.sf-menu > li.sfHover > a {
  background-color: #2c3e50;
  color: #ecf0f1;
}

Sur PrestaShop 1.7 et 8.x

Le module se nomme désormais ps_mainmenu. Les styles se trouvent dans :

/modules/ps_mainmenu/css/

Ou mieux, surchargez-les dans votre thème enfant :

/* Menu principal */
#_desktop_top_menu .top-menu {
  background-color: #2c3e50;
}

#_desktop_top_menu .top-menu > li > a {
  color: #ffffff;
  padding: 10px 15px;
}

#_desktop_top_menu .top-menu > li > a:hover {
  background-color: #34495e;
}

/* Sous-menus déroulants */
#_desktop_top_menu .sub-menu {
  background-color: #ffffff;
  border-top: 3px solid #2c3e50;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Étape 5 : Réactiver le CCC pour la production

Une fois toutes vos modifications validées visuellement, retournez dans Paramètres avancés → Performances et réactivez :

• La concaténation des fichiers CSS
• La minification CSS
• Le cache Smarty (si vous l'aviez désactivé)

Videz ensuite le cache pour que PrestaShop régénère les fichiers concaténés avec vos nouvelles modifications.

Rappel : Le CCC améliore significativement les performances en réduisant le nombre de requêtes HTTP. Un site en production doit toujours avoir ces optimisations activées.

Bonnes pratiques

Utiliser un thème enfant

Ne modifiez jamais directement les fichiers du thème par défaut. Lors d'une mise à jour de PrestaShop ou du thème, vos modifications seraient écrasées. Créez un thème enfant qui hérite du thème parent et ne contient que vos surcharges.

Choisir les bonnes couleurs

Pour un résultat professionnel, respectez ces principes :

• **Contraste suffisant** : utilisez un outil comme WebAIM Contrast Checker pour vérifier que le texte reste lisible (ratio minimum 4.5:1)
• **Cohérence** : limitez votre palette à 2-3 couleurs principales
• **Notation** : préférez les codes hexadécimaux (`#2c3e50`) ou les variables CSS pour la maintenabilité

Utiliser les variables CSS (PrestaShop 8.x)

Sur les versions modernes, privilégiez les propriétés personnalisées CSS :

:root {
  --ps-header-bg: #2c3e50;
  --ps-menu-bg: #34495e;
  --ps-content-bg: #f8f9fa;
  --ps-text-on-dark: #ffffff;
}

#header {
  background-color: var(--ps-header-bg);
}

.top-menu {
  background-color: var(--ps-menu-bg);
}

.top-menu a {
  color: var(--ps-text-on-dark);
}

Cette approche centralise vos couleurs et facilite les modifications futures.

Résolution des problèmes courants

Mes modifications ne s'affichent pas

1. Vérifiez que le CCC est bien désactivé
2. Videz le cache de PrestaShop (Paramètres avancés → Performances → Vider le cache)
3. Videz le cache de votre navigateur (Ctrl+Maj+Suppr)
4. Vérifiez qu'un autre sélecteur CSS plus spécifique ne surcharge pas votre règle (utilisez l'inspecteur)

Ma couleur est appliquée partiellement

Certains modules injectent leurs propres styles qui prennent la priorité. Utilisez l'inspecteur pour identifier le sélecteur concurrent et augmentez la spécificité de votre règle :

/* Spécificité augmentée si nécessaire */
body #header .header-nav {
  background-color: #2c3e50 !important;
}

Attention : L'utilisation de !important doit rester un dernier recours. Préférez toujours augmenter la spécificité naturelle du sélecteur.