Modifier les couleurs du bas de page dans prestashop 1.6

Modifier l’apparence de votre site Prestashop 1.6 : le footer

Dans ce tutoriel, nous allons voir comment changer la couleur de fond du footer, ainsi que les couleurs des bordures et les couleurs des textes.

changement des couleurs du footer

 

 

Nous utiliserons un éditeur de texte (notepad++) et nous travaillerons sur une copie du thème. Si vous ne voyez pas de quoi je parle, vous pouvez lire le tutoriel :
Modifier l’apparence de son site Prestashop : fond où nous avions vu comment télécharger un éditeur de texte et créer une copie de notre thème.

Vous pouvez télécharger la dernière version de notepad++ à cette adresse : notepad ++.

Le fichier global.css

Ouvrez le dossier de votre thème, trouvez le dossier CSS à l’intérieur ouvrez le fichier global avec notepad++.

fichier global.css

 

Changer la couleur du fond

Dans le fichier global.css, descendez jusqu’à la ligne 6776 (prestashop 1.6.0.9) ou 7002 (prestashop 1.6.0.11) dans le bloc : .footer-container à la ligne « background-color: #333333
et à la ligne 6779 dans le bloc footer-container à la ligne « background: url(../img/footer-bg.png) repeat-x #333333; ».
Les numéros de lignes correspondent aux numéros de lignes du fichier de base. Si vous avez déja modifié le fichier, ils peuvent ne pas correspondre. Dans ce cas la faite une recherche avec le terme « .footer-container ».

css du fond du footer

 

« #333333; » représente la couleur de fond. Pour changer cette couleur remplacez #333333 par une valeur hexadécimale composée de 6 chiffres précédés d’un dièse.
Vous pouvez trouver les valeurs hexadécimales à l’adresse suivante dans la colonne du milieu :

Couleurs du web

Prenons un bleu clair #B0C4DE, remplaçons sa valeur.

Changement de couleur du footer

 

Admirez le résultat en vous rendant sur votre site. Pour moi, voila ce que ça donne :

Modification des couleurs du fond du footer pour prestashop 1.6

 

Modifier la bordure

Nous allons modifier la bordure en haut du footer

Cette bordure est faite grâce à une image qui se touve dans le dossier img de votre thème. Cette image se nomme : « footer-bg.png ». Ouvrez-la avec un logiciel de dessin, modifiez sa couleur ou refaites une image de 1px de large et 70px de long de la couleur de votre choix et remplacez-la. J’ai choisi un bleu foncé.

Admirez le résultat en vous rendant sur votre site. Pour moi, voila ce que ça donne :

Modification de la couleur de la bordure du footer pour prestashop 1.6

 

Modifier les couleurs des icônes sociales de « nous suivre »

Toujours dans le fichier global.css rendez vous à la ligne 6870, dans le bloc « .footer-container #footer #social_block ul li a » à la ligne « color: #908f8f; » remplacez #908f8f par la couleur de votre choix. J’ai choisi un rose clair : #DDA0DD.

Admirez le résultat en vous rendant sur votre site. Pour moi, voila ce que ça donne :

Modification de la couleur des icônes sociales de nous suivre pour prestashop 1.6

 

Modifier les couleurs du texte des catégories du footer

Toujours dans le fichier global.css rendez vous à la ligne 6797, dans le bloc « .footer-container #footer h4  » à la ligne « color: white; » remplacez white par la couleur de votre choix. J’ai choisi un rose foncé : #FF00FF.
Puis rendez vous à la ligne 6814, dans le bloc  » .footer-container #footer h4 a  » à la ligne « color: white; » remplacez white par votre couleur.

Admirez le résultat en vous rendant sur votre site. Pour moi, voila ce que ça donne :

Modification de la couleur du texte des catégories du footer pour prestashop 1.6

 

Modifier les couleurs du texte du footer

Toujours dans le fichier global.css rendez vous à la ligne 6792, dans le bloc « .footer-container #footer a » à la ligne « color: #777777; » remplacez #777777 par la couleur de votre choix. J’ai choisi le même rose clair que précedement :#DDA0DD.

Nous allons aussi modifier la couleur de l’ombre du texte qui est restée grise. Toujours dans le fichier global.css rendez vous à la ligne 6819, dans le bloc  » .footer-container #footer ul li a » à la ligne « text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4); » remplacez rgba(0, 0, 0, 0.4) par la couleur de votre choix (en rgba, c’est la colonne de droite dans Couleurs du web). J’ai choisi une couleur plus foncée que mon fond : rgba(102, 153, 153, 0.4).

La ligne en dessous : « .footer-container #footer a:hover color: white;  » correspond à la couleur au passage de la souris, vous pouvez là aussi remplacer white par la couleur de votre choix.

Pour la partie information, toujours dans le fichier global.css rendez vous à la ligne 6783, dans le bloc « .footer-container #footer » à la ligne « color: #777777; » remplacez #777777 par votre couleur.
Pour la couleur des icônes, c’est à la ligne 6844 dans le bloc « .footer-container #footer #block_contact_infos > div ul li i » à la ligne « color: #908f8f; »
Pour la couleur du numero de téléphone et du mail, c’est à la ligne 6836 dans le bloc  » .footer-container #footer #block_contact_infos > div ul li > span » à la ligne : « color: white; »

Admirez le résultat en vous rendant sur votre site. Pour moi, voila ce que ça donne :

Modification de la couleur du texte du footer pour prestashop 1.6

Modifier les couleurs des traits de séparation du footer

Toujours dans le fichier global.css rendez vous à la ligne 6820, dans le bloc  » .footer-container #footer #block_contact_infos » à la ligne « border-left: 1px solid #515151; » remplacez #515151 par la couleur de votre choix. J’ai choisi un jaune foncé : #FFA500.
Puis à la ligne 6915, dans le bloc  » .footer-container #footer .bottom-footer div  » à la ligne « border-top: 1px solid #515151; » remplacez #515151 par votre couleur.

Admirez le résultat en vous rendant sur votre site. Pour moi, voila ce que ça donne :

Modification de la couleur des traits de séparation des bloc du footer pour prestashop 1.6

 

Modifier les couleurs de la lettre d’information.

Nous allons travailler sur un autre fichier css : blocknewsletter.css, voici le chemin :
votre dossier prestashop > theme > le nom de la copie de votre theme (test pour nous) > css > modules > blocknewsletter > blocknewsletter.css
Allez à la ligne 49 dans le bloc  » #footer #newsletter_block_left .form-group .form-control  » à la ligne « background: #3c3c3c; » remplacez #3c3c3c par la couleur de votre choix. J’ai choisi un jaune clair : #F0E68C.
Nous allons modifier la couleur de la bordure grâce à la ligne en dessous : « border-color: #515151; » remplacez #515151 par la couleur de votre choix. J’ai choisi un jaune foncé : #FFA500.
Pour modifier la couleur de l’icône, c’est à la ligne 64 : « color: #908f8f; » remplacez #908f8f par la couleur de votre choix. J’ai choisi un rose foncé : #FF00FF.

Admirez le résultat en vous rendant sur votre site. Pour moi, voila ce que ça donne :

Modification des couleurs du bloc lettre d'information du footer pour prestashop 1.6

 

 

N'hésitez pas à laisser un commentaire

Vous pouvez vous abonner à notre newsletter mensuelle pour être informé de nos nouveaux tutoriels.

Vous pouvez aussi aimer notre page facebook.

36 thoughts on “Modifier les couleurs du bas de page dans prestashop 1.6

  1. Bonjour

    Toujours dans le meme sujet, savez comment on modifie l’année du copyright, en l’occurrence la modifier par 2016 !

    Footer.tpl mais où exactement ?

    Merci pour votre réponse.

  2. Bonjour
    merci pour votre site qui est une mine d or.
    cependant j ai un problème d affichage au lieu de saisissez votre mail pour la Lettre d’informations, j’ai enter your mail j’ai eu beau aller dans traductions rien n y fait c’est comme Store Information qui ne change pas et call us now auriez vous une idée ?
    merci

    1. Bonjour,

      Quand vous allez dans les traductions vous avez bien les termes en français ? Parce que ce qui arrive parfois c’est que les fichiers de réduction ne sont pas pris en compte dans ces cas la on à les traduction française vide, il suffit de les refaire.

  3. Bonjour j ai un probleme je suis sur la version 1.6.1.5 et lorsque j apporte les modification de changement de couleur ca ne change pas toujours car ca s affiche seulement si je change les couleurs du theme avec le module integré donc mes changements apporter se retrouve sur différente page Merci

  4. http://topgen.ca dans le theme par defaut ont peux changer les couleurs ont a 8 choix donc quand j apporte les changement j ai pas tous mes changement sur le theme ex.rouge et blanc ,mais changement se ramasse sur différente couleur

  5. Bonjour,
    un grand merci à vous pour vos excellents tuto !
    J’ai une question, comment faire si je souhaite avoir une couleur de police pour  » Newsletter » et « nous suivre » et une autre couleur pour  » Catégories » « Informations » et « mon compte » ?

    1. Bonjour,

      C’est assez compliqué car ces éléments ne se ciblent pas individuellement.
      Il faut modifier les fichier tpl des différents modules pour mettre des sélecteurs différents puis les cibler en CSS.

      Bonne journée

  6. excellent tuto , je suis un archi nul et en quelques heures! le temps d’installer nopad++ et comprendre les infos ( et ne pas merder) grâce a ce tuto j’ai changer toutes les couleurs de mes pages un grands bravo , c’est succin , sans langage technique
    un grand merci , pour info (même si vous l’avez pour les codes couleur j’ai trouver un site qui s’ appelle :http://www.html-color-codes.info/Codes-couleur-HTML/ quand on clic sur une couleur le code apparait il n’y a plus qu’le coller ( je me doute que vous le connaissez) pour un nul c’est indispensables encore merci ! !
    Christian

  7. Bonsoir,

    Je viens d´essayer toute la journée à me battre sur un prestashop 1.6.0.9 encore en travaux, pour éliminer les marges blanches autour de toutes les photos …. j´ai essayé les rares tutos qu´on trouve sur internet mais ils me provoquent une page blanche en BO ….

    Si je pose la question ici, c´est parce que je pense, s´il existe une solution réellement fonctionnelle, qu´elle pourrait profiter à d´autres personnes qui comme moi, cherche à avoir ses photos sans ces fameuses marges, y compris si c´est possible au niveau également de la thickbox.

    Cordialement

      1. Bonjour,

        Non je n´ai pas trouvé de solution. Si vous ne voyez pas de marge c´est parce que les photos démo de prestashop ont toutes un fond blanc ….. Or dans la réalité, je peux avoir des fonds en couleur. :/

        Cordialement

  8. Ce code donné dans les tutos pour « Enlever les marges autour des photos », me renvoie une page blanche. Existerai-t-il une autre méthode ?

    <?php

    class ImageManager extends ImageManagerCore
    {

    /**
    * Resize, cut and optimize image
    *
    * @param string $src_file Image object from $_FILE
    * @param string $dst_file Destination filename
    * @param integer $dst_width Desired width (optional)
    * @param integer $dst_height Desired height (optional)
    * @param string $file_type
    * @return boolean Operation result
    */
    public static function resize($src_file, $dst_file, $dst_width=null,
    $dst_height = null, $file_type='jpg', $force_type=false)
    {
    if (PHP_VERSION_ID 1 &amp;&amp; $height_diff > 1)
    {
    $next_width = $src_width;
    $next_height = $src_height;
    }
    else
    {
    if (Configuration::get(‘PS_IMAGE_GENERATION_METHOD’) == 2 || (!Configuration::get(‘PS_IMAGE_GENERATION_METHOD’)
    &amp;&amp; $width_diff > $height_diff))
    {
    $next_height = $dst_height;
    $next_width = round(($src_width * next_height) / $src_height);

    $dst_width = (int)(!Configuration::get(‘PS_IMAGE_GENERATION_METHOD’) ? $dst_width:$next_width);
    }
    else
    {
    $next_width = $dst_width;
    $next_height = round($src_height * $dst_width / $src_width);

    $dst_height = (int)(!Configuration::get(‘PS_IMAGE_GENERATION_METHOD’) ? $dst_height:$next_height);
    }
    }

    if (!ImageManager::checkImageMemoryLimit($src_file))
    return false;

    $dest_image = imagecreatetruecolor($dst_width, $dst_height);

    //ici on applique un fond transparent quelque soit le type de fichier.
    imagealphablending($dest_image, false);
    imagesavealpha($dest_image, true);
    $transparent = imagecolorallocatealpha($dest_image, 255, 255, 255, 127);
    imagefilledrectangle($dest_image, 0, 0, $dst_width, $dst_height,
    $transparent);

    imagecopyresampled($dest_image, $src_image, (int)(($dst_width –
    $next_width) / 2), (int)(($dst_height – $next_height) / 2), 0, 0,
    $next_width, $next_height, $src_width, $src_height);
    return (ImageManager::write($file_type, $dest_image,
    $dst_file));
    }
    }

    1. Bonjour,

      Normalement les marges s’enlevent en css, il ne me parait pas utile de mettre du php.
      Vous devez activer le mode debug pour voir l’erreur que provoque le code que vous avez mis.

  9. Bonjour,
    Sauriez-vous où trouver l’image correspondant à « footer-bg.png » pour changer la couleur de la partie supérieure du footer quand on l’affiche sur mobile ?
    J’ai suivi vos modifications avec succès, mais sur mobile (thème par défaut PS 1.6.1) seul le champ pour la newsletter est de la couleur demandée, le bandeau a repris le noir d’origine.
    Merci par avance ! 🙂

    1. Bonjour,

      Prestashop n’est pas trés adapté pour un blog, c’est un CMS orienté e-commerce. Allez-vous vendre des produits ? ou des articles ? Si non, il vaut mieux utiliser wordpress pour votre blog.

      Bonne journée

  10. Bonjour.

    J’ai un soucis pour changer la bordure, le fichier footer-bg.png est bien modifé avec la couleur souhaitée soit #3DBCED mais il reste gris sur le site.

  11. Bonjour,
    Bonjour,

    Tout d’abord un grand merci pour tout vos tutos, grâce à vous j’ai pu modifier mes fichiers .css avec une grande facilité alors que je suis novice.

    J’ai un problème sur lequel je bute depuis quelques jours.
    Sur mon site http://www.kawaii-dokidoki.fr le footer est « décalé » et même en réinitialisant les différents blocs le problème reste inchangé….

    Sauriez-vous comment modifier cela ?

    Cdt,

    Samir

    1. C’est bon j’ai rien dit….
      J’ai modifié :

      .footer-container #footer .footer-block {
      margin-top: -3px;

      dans le global.css

      Je bute dessus depuis 2/3 jours et il suffit que je vous Laisse un commentaire pour trouver !

      Merciiiiii

          1. Merci pour votre réponse rapide !
            En fait, lettre d’informations et « nous suivre » apparaissent en bas au lieu de l’endroit « normal » c’est à dire au dessus des infos.

  12. Bonjour, je suis avec prestashop 1.6.1.17 et après avoir fait des test cette méthode ne fonctionne pas pour la couleur du footer et la bordure mais ok pour les textes du footer
    Ce n’est pas au même endroit pour ma version ?

    Merci de votre aide
    PS: je suis avec le thème d’origine bootstrap

  13. Bonjour, merci pour votre réponse,
    J’ai désactivé le configurateur de thème et toujours pareil
    Dans /monsite/themes/default-bootstrap/css/global.css
    J’ai bien mis le code couleur #FFFFFF
    .footer-container {
    background-color: #FFFFFF; }
    @media (min-width: 768px) {
    .footer-container {
    background: url(../img/footer-bg.png) repeat-x #FFFFFF; } }
    .footer-container .container {
    padding-bottom: 100px; }

    Dans /infomir/themes/default-bootstrap/img/footer-bg.png
    J’ai changer la couleur en blanc et rien ne change

    Merci pour votre aide
    PS: je voudrais mettre tout le footer en blanc avec les textes en rouge

Répondre à doudou Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *