TUTO - Modifier le theme de prestashop 1.7

Dans ce tuto nous allons voir les bonnes pratiques pour modifier les couleurs / arrière plan de votre thème de Prestashop 1.7

Comment modifier la couleur de fond du thème par défaut ?

Pour modifier son thème il a plusieurs manière de faire.

La première consiste à modifier les fichiers css du thème:

par exemple si l’on veut modifier la couleur de fond de la top bar en s’aidant du developper tools du navigateur (F12 sous chrome)

je me rends compte qu’il s’agit du fichier theme.css à modifier ligne 7:

ce fichier se trouve dans: /themes/classic/assets/css/theme.css

Donc si je modifie ce fichier ma modification devrait être prise en compte, par contre, en ouvrant le fichier, je m’aperçois d’une chose, ce que ce dernier est minifié:

Et pour le modifier, ça rends la chose assez compliqué, et il vaut mieux faire autrement…

Il y a une autre solution:

En jettant un oeil au code source:

Je m’aperçois que Prestashop mets à disposition un fichier custom.css qui me permet de rajouter mon propre CSS et d’overrider les élèments du thème par défaut.

Ce fichier se trouve: /themes/classic/assets/css/custom.css

Donc si j’édite ce fichier et que je rajoute:

#header .header-nav {
   background: black;
}

Je sauvegarde (renvoi sur le ftp si nécessaire), le rafraichit en vidant le cache et active la compilation de Prestashop et la:

Miracle, ma top bar à bien une nouvelle couleur de fond.

Ceci est un première manière de faire, assez pratique mais pas la mieux.

Edit: Allez plus: Modifier son thème avec le StarterTheme et nodeJS

Enjoy ;)