Dans ce tuto nous allons modifier l’apparence du panier sur la page d’accueil pour prestashop 1.6

modification du panier 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.

Modofication de la partie visible du panier

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; }

panier modifié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 : Modification couleur panier

 

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.Zone du panier à modifier

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.

Modification des couleurs du texte du panier

 

III Modification de la partie basse, livraison, total et commander

1 Modification de la couleur de fond

Pour la zone sous livraison et total, vers la ligne 203
#header .cart_block .cart-prices {
 border: none;
 background: url(../../../img/cart-shadow.png) repeat-x #3d3d3d; }

Remplacson le gris par un marron clair,  dans la ligne background: url(../../../img/cart-shadow.png) repeat-x #3d3d3d; } je remplace #3d3d3d par #A0522D
Pour la zone sous commander, vers la ligne 205
 #header .cart_block .cart-buttons {
 background: url(../../../img/cart-shadow.png) repeat-x #333333; }
Remplacson le gris par un marron foncé,  dans la ligne background: url(../../../img/cart-shadow.png) repeat-x #333333; } je remplace #333333 par #800000

2 Modification du trait se séparation

Pour modifier la trait de séparation entre livraison et total, vers la ligne 130
.cart_block .cart-prices .cart-prices-line {
 overflow: hidden;
 border-bottom: 1px solid #515151;
 padding: 7px 0; }
la ligne border-bottom: 1px solid #515151; correspond à un trait de sépartion, 1px c’est la taille, solid c’est ke type et #515151 la couleur. Moi je vais mettre des pointillés en orange.
.cart_block .cart-prices .cart-prices-line {
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.

Modification bas du panier