How to change the default icons for contact / shopping cart / bookmark etc?

[shopcarton]

Hi i am currently trying to customize the icon buttons for the default prestashop template.

Just wondering where in the CSS can i make the changes to change to my desired icons? Pls refer to attachment to have a look at which icons i am referring to. Thanks.

[pppplus]

In css code (/themes/yourtheme/css/global.css)

[shopcarton]

Could u be more specific? Thanks

[pppplus]

In global.css, you have

#header_user #shopping_cart a { background: transparent url('../img/icon/cart.gif') no-repeat top left; padding:5px 0 0 25px; color:#CFCFCF;}
#header_user #your_account a { background: transparent url('../img/icon/my-account.gif') no-repeat top left; padding:5px 0 0 25px; color:#CFCFCF;}

(css for shopping-cart and your account)

Css file gives the address of the icon.
Upload your icon, then give the address in the css file

[pppplus]

the 3 other icons are :

#header_links #header_link_sitemap a {
background-image: url('../img/icon/sitemap.gif');
}
#header_links #header_link_contact a {
background-image: url('../img/icon/contact.gif');
}
#header_links #header_link_bookmark a {
background-image: url('../img/icon/star.gif');
}

[shopcarton]

Hi thanks. I managed to change the icon picture, but my picture seems too big (pls see attachments).

How can i resize to fit it in?

[rocky]

You'll need to resize the image using an image editor like Photoshop or Paint.NET.

[shopcarton]

You'll need to resize the image using an image editor like Photoshop or Paint.NET.

Is it possible to edit the CSS to increase the space to accommodate a bigger picture as shown? Noting that i need to push the other columns downwards.

If i resize it to such a small size, it might not look as good.

[rocky]

You'll need to edit the following block in css/global.css in your theme's directory:

#header_user #shopping_cart a, #header_user #your_account a {
   background-repeat: no-repeat;
   background-position: top left;
   padding: 2px 0 4px 26px;
   height: 20px;
   text-decoration: none
}

Change the height from 20px to however big you need it. I think you should reduce the size of the image though, since 129px is too big for a header icon.

[suryasal]

In global.css, you have

 

#header_user #shopping_cart a { background: transparent url('../img/icon/cart.gif') no-repeat top left; padding:5px 0 0 25px; color:#CFCFCF;}

#header_user #your_account a { background: transparent url('../img/icon/my-account.gif') no-repeat top left; padding:5px 0 0 25px; color:#CFCFCF;}

 

(css for shopping-cart and your account)

 

Css file gives the address of the icon.

Upload your icon, then give the address in the css file

the 3 other icons are :

 

#header_links #header_link_sitemap a {

background-image: url('../img/icon/sitemap.gif');

}

#header_links #header_link_contact a {

background-image: url('../img/icon/contact.gif');

}

#header_links #header_link_bookmark a {

background-image: url('../img/icon/star.gif');

}

 

Hello, I've got the some problem, I want to change my icon for contact, sitemap, and cart, but I've tried your way, but I can't changed it,

I changed it in blockpermanentlinks modules, because I can't find it in my global.css

anyone could help me ?

 

thanks