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