Dans ce tuto nous allons modifier l’apparence du panier sur la page d’accueil pour prestashop 1.6
Nous allons modifier :
– la couleur
– la couleur du texte
– les polices
I Modification de la partie visible du panier dans la page d’accueil.
Ouvrez le fichier blockcart.css
Voici le chemin:
votre dossier prestashop > themes > le nom de la copie de votre thème (test pour nous) > css > modules > blockcart > blockcart.css
Les numéros des lignes sont données à titre indicatif et correspondent au Prestashop en cours (version 1.6.0.11) et à la mise à jour du module en cours. Elles peuvent donc varier légèrement, si vous ne les trouvez pas faites une recherche sur le sélecteur.
1 Modification de la couleur de fond et des couleurs de police
A la ligne 30
.shopping_cart > a:first-child {
padding: 7px 10px 14px 16px;
background: #333333;
display: block;
font-weight: bold;
color: #777777;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
overflow: hidden; }
Analysons les lignes qui nous intéressent.
.shopping_cart > a:first-child {
padding: 7px 10px 14px 16px;
background: #333333; C'est la couleur de fond
display: block;
font-weight: bold; C'est l'épaisseur de la police
color: #777777; C'est la couleur de la police
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
overflow: hidden; }
Je vais changer la couleur du fond pour mettre un orange, ainsi que la couleur de la police pour mettre un marron. Je vais rajouter une ligne pour mettre une police cursive. La couleur va être modifier pour le texte du bas du cadre, livraison et total.
.shopping_cart > a:first-child {
padding: 7px 10px 14px 16px;
background: #FF8C00;
display: block;
font-weight: bold;
color: #800000;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
overflow: hidden;
font-family : cursive;
}
Je vais maintenant cibler le mot panier, vers la ligne 41.
.shopping_cart > a:first-child b {
color: white;
font: 600 18px/22px "Open Sans", sans-serif;
padding-right: 5px; }
Je change sa couleur et sa police.
.shopping_cart > a:first-child b {
color:#FF8C00;
font: 600 18px/22px cursive;
padding-right: 5px; }
Voila ce que vous devez obtenir :
2 Modification du caddie et du triangle
Je souhaite maintenant modifier la couleur de l’image du caddie et la couleur du petit triangle.
Au alentour de la ligne 46
.shopping_cart > a:first-child:before {
content: "f07a";
font-family: "FontAwesome";
display: inline-block;
font-size: 23px;
line-height: 23px;
color: white;
padding-right: 15px; }
Remplacez la ligne color: white; par la couleur de votre choix. Moi je met un orange clair.
.shopping_cart > a:first-child:before {
content: "f07a";
font-family: "FontAwesome";
display: inline-block;
font-size: 23px;
line-height: 23px;
color: #f2bba0;
padding-right: 15px; }
Puis au alentour de la ligne 8
#header .shopping_cart > a:first-child:after {
content: "f0d7";
font-family: "FontAwesome";
display: inline-block;
float: right;
font-size: 18px;
color: #686666;
padding: 6px 0 0 0; }
Remplacez la ligne color: #686666; par la couleur de votre choix. Moi je vais mettre le même orange.
#header .shopping_cart > a:first-child:after {
content: "f0d7";
font-family: "FontAwesome";
display: inline-block;
float: right;
font-size: 18px;
color: #f2bba0;
padding: 6px 0 0 0; }
Voila ce que vous devez obtenir : 
II Modification le la partie « déployable » du panier.
1 Couleur de fond
Rendez vous à la ligne 165
#header .cart_block {
position: absolute;
top: 95px;
right: 0;
z-index: 100;
display: none;
height: auto;
background: #484848;
color: white;
width: 270px; }
Remplacez la ligne background: #484848; par la couleur de votre choix. C’est la couleur de fond, moi je vais mettre le même orange clair que tout à l’heure. Remplacez la ligne color: white; par la couleur de votre choix. C’est la couleur de la police, moi je vais mettre le même marron que tout à l’heure.
#header .cart_block {
position: absolute;
top: 95px;
right: 0;
z-index: 100;
display: none;
height: auto;
background: #f2bba0;
color: #800000;
width: 270px; }
2 Couleur du texte
Nous allons travailler zone par zone.
La quantité, vers la ligne 102
.cart_block .cart-info .quantity-formated {
display: inline-block;
color: #9c9b9b;
text-transform: uppercase;
font-size: 10px;
padding-right: 5px; }
La croix, vers la ligne 184
#header .cart_block .cart_block_list .remove_link a,
#header .cart_block .cart_block_list .ajax_cart_block_remove_link {
color: white;
outline: none;
text-decoration: none; }
La croix, au passage de la souris vers la ligne 189
#header .cart_block .cart_block_list .remove_link a:hover,
#header .cart_block .cart_block_list .ajax_cart_block_remove_link:hover {
color: #9c9b9b; }
Le nom de l’article au passage de la souris, vers la ligne 180
#header .cart_block a {
color: white; }
Le nom de l’article, vers la ligne 182
#header .cart_block a:hover {
color: #9c9b9b; }
La déclinaison, vers la ligne 201
#header .cart_block .product-atributes a {
color: #9c9b9b; }
La déclinaison au passage de la souris, vers la ligne 203
#header .cart_block .product-atributes a:hover {
color: white; }
Le prix, vers la ligne 192
#header .cart_block .price {
color: white; }
A chaque fois modifier la ligne color en mettant la couleur de votre choix, moi je vais tout mettre en marron : color : #800000;
Je vais aussi changer la police des texte, donc sur chaque paragraphe qui cible du texte (pas la croix et pas les passages de souris) la ligne font-family : cursive; pour mettre une police cursive.
Voici ce que vous devriez obtenir.
III Modification de la partie basse, livraison, total et commander
1 Modification de la couleur de fond
#header .cart_block .cart-prices {
border: none;
background: url(../../../img/cart-shadow.png) repeat-x #3d3d3d; }
#header .cart_block .cart-buttons {
background: url(../../../img/cart-shadow.png) repeat-x #333333; }
2 Modification du trait se séparation
.cart_block .cart-prices .cart-prices-line {
overflow: hidden;
border-bottom: 1px solid #515151;
padding: 7px 0; }
overflow: hidden;
border-bottom: 2px dashed #ff8c00;
padding: 7px 0; }
3 Modification des polices et couleurs de texte
Pour le texte de la livraison et le prix total, vers la ligne 191
#header .cart_block .price {
color: white; }
Mettez la couleur de votre choix, en modifiant color: white; moi je met en orange #ff8c00.
4 Modification du bouton commander
Pour la couleur de fond et la bordure du bouton commander, vers la ligne 150
.cart_block .cart-buttons a#button_order_cart span {
padding: 7px 0;
font-size: 1.1em;
border: solid 1px #63c473; couleur et forme de la bordure
background: #43b155; couleur du fond }
Nous allons mettre une bordure orange avec un fond marron clair
.cart_block .cart-buttons a#button_order_cart span {
padding: 7px 0;
font-size: 1.1em;
border: solid 1px #FF8C00;
background: #f2bba0; }
Pour la couleur de fond et la bordure du bouton commander au passage de la souris, vers la ligne 155
.cart_block .cart-buttons a#button_order_cart:hover span {
border: solid 1px #358c43; couleur et forme de la bordure
background: #2e7a3a; couleur du fond
color: white;
Nous allons mettre une bordure marron clair avec un fond orange au passage de la souris
.cart_block .cart-buttons a#button_order_cart:hover span {
border: solid 1px #f2bba0;
background: #FF8C00;
color: white;
Pour la couleur de la police et le type de police, vers la ligne 179
#header .cart_block a {
color: white; }
Nous pouvons changer la couleur et rajouter une ligne pour la police. Je met une couleur marron et une police cursive.
#header .cart_block a {
color: #800000;
font-family :cursive;
}
Pour le texte au passage de la souris, vers la ligne 181
#header .cart_block a:hover {
color: #9c9b9b; }
Je remplace la couleur par marron #80000
Voila ce que vous devez obtenir.
Bonjour
Tout d’abord toutes mes félicitation pour vos tutoriaux utiles et clair. C’est une mine inépuisable de conseils pour la modifications des thèmes.
J’ai vu dans ce tutorial le changement de couleur du petit triangle à côté du panier, je pensais trouver une piste pour changer la couleur du petit triangle à côté du choix des langue dans le header mais je tourne en rond…vous n’auriez pas une idée ?
Ce devrait être dans le module blocklanguages normalement non ?
Trouvé ! c’est à la ligne 29 🙂
Merci
Bonjour
Vous avez été plus rapide que moi 🙂
bonjour,
Savez-vous comment changer l’icone du panier?
Bonjour, tout dépend si vous souhaitez le remplacer par une image ou juste changer l’icone, car par défaut c’est une font awesome.
Bonjour,
merci pour ces tutos très clair! ont comprent très bien vos explications!
Comment mettre une bordure autour du panier déroulant?
Car je souhaite mettre le panier en blanc, et sans contour, cela fait étrange.
Est il possible de mettre un séparateur entre les produits dans le panier? Et le total?
merci pour vos informations
Bonjour,
Dans le fichier blochcard.css, faite une recherche du selecteur :
#header .block_content vers la ligne 200
et rajoutez : border : 1px solid lacouleur que vous voulez.
Un ombre serai certainement plus joli qu’un bordure.
Bonne journée
Merci pour ces explications super utiles quand on est débutant !
Dans le panier, le nom des articles est visible qu’en partie, est-ce qu’il est possible de pouvoir voir le nom de l’article en entier svp ?
Merci !
Bonjour,
Pour que le nom du produit apparaissent en entier dans le panier.
Dans le fichier blockcard.tpl du module, vous avez vers la ligne 65 :
{$product.cart_quantity} x getProductLink($product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}">{$product.name|truncate:13:'...'|escape:'html':'UTF-8'}Modifier truncate:13 en ce que vous voulez ou supprimer complètement truncate:13:’…’ pour avoir le nom en entier.
Bonne journée
Bonjour,
Savez vous comment changer la couleur de fond de la partie rechercher (avec l’icone de la loupe ?)
Bonjour,
Il faut aller dans le fichier css du module blocksearch et faite une recherche sur le selecteur #search_block_top .btn.button-search changez la couleur #333 de background: #333;
Bonne journée
Super 🙂
Re,
lorsque je choisis la police French Script MT, c’est difficilement lisible. Est il possible d’augmenter la taille de police sans jouer sur la taille du cadre ?
Bonne journée et merci encore
Bonjour,
Le cadre s’adapte au texte, donc si vous souhaitez que le cadre reste à la même taille, il va falloir jouer sur les padding.
bonjour et Merci pour les tutos. Cest excellent
Mais pour 1.7 comment faire?
Bonjour,
je suis en train de refaire mes tuto pour la 1.7, vous pouvez vous inscrire à notre newsletter pour être informé lors de la sortie des tuto.
Cordialement
Bonjour, super tuto qui ma bien aider!
je rencontre un souci de couleur avec le nome de l’article et la couleur de la police du bouton commander. j’ai besoin de 2 couleur différentes.
ces 2 attribut ont la même ligne de code.
comment faire pour ne pas mettre les mêmes couleur?
merci
Bonjour,
Je ne comprend pas trop ce que vous voulez dire. Les deux éléments ne sont pas sur la même ligne sur le thème de base. Si il sont sur la même ligne sur votre thème, il vous suffit de séparer les deux sélecteurs.
Bonne journée
Merci pour ces tutos qui m’ont bien aider pour modifier les couleurs panier, et autres tutos.
Je voudrais modifier ajouter une icone à la place de mon panier, et ajouter le prix total en dessous, avez vous un tuto?
Bonne journée
Bonjour, Non désolée, je n’i pas de tuto, pour le panier c’est simple, recherchez .shopping_cart > a:first-child:before dans le fichier blockcart.css et changez la couleur pour afficher le prix c’est un peu plus compliqué, cela va se passer dans le ichier .tpl et il faut un petit peu coder.
Bonne journée
Bonjour et un grand merci pour votre aide et votre boulot…
Quand à mon problème, je ne trouve pas de solution et je me retourne vers vous.
Je n’ai malheureusement plus le rectangle noir de mon panier avec l’icone panier le texte et la flêche par contre le contenu est bien là, version prestashop 1.6.1.10
Avez-vous déjà eu ce problème ?
Merci d’avance pour vos solutions et meilleures salutations.
Bonjour qu’entendez vous par le contenu est bien la ?
Vous pouvez essayer de réinitialiser le panier dans les modules.
Sinon il faudrait me donner l’adresse du site pour que je regarde.
Bonne journée