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.
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++.
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 ».
« #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 :
Prenons un bleu clair #B0C4DE, remplaçons sa valeur.
Admirez le résultat en vous rendant sur votre site. Pour moi, voila ce que ça donne :
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 :
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 :
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 :
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 :
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 :
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 :
Excellent tuto.
Mais savez vous comment mettre une image en footer-bg plutôt que de changer la couleur ?
C’est le même principe mais à la place de background-color:### on écrit background-image: url de l’image.
Je vous conseille de lire le tuto sur les fonts ou j’explique comment mettre une image. http://tutoriel.webetplus.fr/changer-les-fonds-de-votre-site/
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.
C’est bon j’ai trouvé
blockcms.tpl et on modifie l’année !
Désolé du dérangement…
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
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.
Bonjour,
pouvez vous m’expliquer comment faire pour modifier les images des icones sociales.
Merci d’avance de votre aide.
Bonjour,
Que voulez vous faire ? Modifier le graphisme des images des icônes sociales ou en enlever/rajouter ?
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
Bonjour,
De quel module parlez vous ?
Pouvez vous me donner l’url de votre site pour que je regarde.
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
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 » ?
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
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
Ravie que mes tuto vous servent, et merci pour le lien qui peut servir.
Bonne soirée
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
Bonjour, Avez vous trouvé une solution, car sur votre site je ne vois pas de marges.
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
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 && $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’)
&& $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));
}
}
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.
Bonjour,
Merci pour votre retour. Mais je ne vois pas où il faut aller pour enlever ces marges blanches autour des photos 🙁
Cordialement
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 ! 🙂
C’était sans doute une histoire de cache, parce que maintenant ça fonctionne.
Encore merci pour tous ces tutos !
BONJOUR
j’ai suis en train de developper un blog sous prestashop j’ai fait des recherches dans de forum mais pas des réponses merci de m’indiquer comment faire?
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
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.
Bonjour,
Avez vous vidé les caches ? cache prestashop et cache navigateur ?
Tuto ici
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
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
Ah ba non j’ai parlé trop vite….
Bonjour,
Je ne vois pas de décalage dans le footer, pouvez vous préciser ce que vous souhaitez faire.
Cordialement
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.
Tant de temps passé sur le code pour s’apercevoir que c’est modifiable dans le BO via les positions…..
Désolé et encore merci pour vos tutos !
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
Bonjour,
Cette méthode fonctionne pour le 1.6.1.17 il faut juste trouver le bon sélecteur.
Vous avez activé le configurateur de thème c’est pour cela que ça ne fonctionne pas cela rentre en conflit.
Bonne journée
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