Cart image and his background

[Francky123]

How can i change the cart image and his background collor?

 

http://s12.postimg.org/811de6mj1/cart.png

[vekia]

cart image is based on fontawesome icons pack.

you can defiine new icon image in css styles file: /themes/default-bootstrap/css/modules/blockcart/blockcart.css

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

change content: "\f07a"; to any other fontawesome icon you want.

full list of "content" codes you can find here:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

[Francky123]

Thanks. Another 2 questions, how can i remove "Blog" button and how can i add more categories on that bar? Because i made more of them and i added subcategories to each one + products and still nothing.

Edited April 29, 2014 by Francky123 (see edit history)

[vekia]

go to modules > modules tab in back office

then search for "block top menu" module

click on configure

 

you can mange items of menu there.

[Nikko]

cart image is based on fontawesome icons pack.

you can defiine new icon image in css styles file: /themes/default-bootstrap/css/modules/blockcart/blockcart.css

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

change content: "\f07a"; to any other fontawesome icon you want.

full list of "content" codes you can find here:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

Hi Vekia,

You provide very helpful information to all of us who just started using prestashop, and i really want to thank you for that.

The solution for the shopping cart you provided is not actually allow you to customize the cart. As you can see, it's not give you options with a variety of shopping cart icons, since It contains only one icon for that purpose. My question is, if it's possible to add a .png or other type of picture there?

[vekia]

hello Nikko

 

this modification above is based on font-awesome feature

you can modify icon with font-awesome change:

content: "\f07a";

to any other icon definition from http://astronautweb.co/snippet/font-awesome/

 

if you want to use png image, it will be necessary to rebuild code a little.

 

 

remove:

content: "\f07a";

font-family: "FontAwesome";

 

and add there:

background:url('http://urltoyourimage.com/image.png');
 

and define width and height of the block, for example:

 

display:block;

width:45px;

height:45px;

[Nikko]

Thank you very much Vekia for your fast response. I will not be able to try this before Monday, so i will come back then to tell you if i managed to come thru this.

 

Have a nice weekend!

[Nikko]

Hello Vekia,
 
I've tried to put the .png image inside a file and give the url to it, but without luck. Probably i'm doing something wrong here.

Edited July 21, 2014 by Nikko (see edit history)

[Nikko]

I still can't figure this out. Any help?

[vekia]

 

this is not correct url to file.

use correct url

[Nikko]

This is the point i can't understand Vekia.

 

I put the image inside the: (mydomain/themes/default-bootstrap/img) folder

While i was typing ( background: ) a pop up window, provided me the option to add a url. So i navigate to the folder i had already put the image. After that i got the url I've already posted.

 

Can you please guide me on how to put the url correct.

 

Thank you in advance and forgive me for my English. I hope i've made you understand what i mean.