TUTO - Modifier le theme de prestashop 1.7 - PrestaSafe
PrestaSafe.com
  • Accueil 
  • Prestashop
    • Présentation de Prestashop 
    • Support et assistance pour Prestashop 
    • Création de votre boutique de vente en ligne 
    • Cartzilla, un thème PrestaShop Performant, Mobile et SEO 
    • Migration PrestaShop 
    • Maintenance technique pour site E-commerce PrestaShop 
  • Blog 
  • Devis en ligne 
  • Boutique 
  • Contact 
  • Mon compte 
    ecommerce, prestashop, tuto

    TUTO – Modifier le theme de prestashop 1.7

    1. By guillaume
    2. No Comments

    30 Oct

    PrestaShop solution e-commerce

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

    Pour plus de détails, vous pouvez consulter notre vidéo qui explique comment compiler votre theme PrestaShop rdv sur ce lien

    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 😉

    share:
    No Comments

    Articles similaires

    09 Déc

    PrettyBlocks, le page builder gratuit et open sour

    23 Juil

    PrestaShop solution e-commerce

    Thème PrestaShop 1.7 100% seo et personnalisable

    07 Fév

    PrestaShop solution e-commerce

    Supprimer le bouton “Imprimer” sur une

    Loading...

    Insérer/modifier un lien

    Saisissez l’URL de destination

    Ou alors, faites un lien vers l’un des contenus de votre site

      Aucun mot n’a été donné pour cette recherche. Voici les recherches précédentes. Recherchez ou utilisez les flèches haut et bas pour choisir un élément.