Magento

Adding icons next to My Cart, My Wishlist & Checkout in the Header Links?

Attached is an example of what I’m trying to do with the My Cart link.

I’ve tried adding the image to app > code > core > Mage > Checkout > Block > Links.php.  I can modify the text there, but can’t add images there.

Thanks!

Click thumbnail to see full-size image

Brady, if you haven’t install Firefox web developer tool or FIrebug, please do as either of them is a must have tool for website development and it can help you tremendously in customize magetnto shop, that is, if you don’t write your own style sheet.

With web developer toolbar, you can easily find out what class (or id) controls the “My cart”, to see it, you go to ‘Information > display element information’, then click on My cart, there, you will see that it’s controlled by “.quick-access” and the ‘my cart’ has a class called “first”. 

All you need to do is go to boxes.css, search for “.quick-access li.first”, then add:

.quick-access li.first {
background: url{cart_icon.jpg) no-repeat left center; /* you can use unit value too like “background: url{cart_icon.jpg) no-repeat 0 5px */
padding-left: 30px; /* the default value is set to ‘0’ in magento’s demom, you need to adjust the value accordingly so that the text won’t overlap the cart icon. */ }

Hope this helps!

Thanks.  I do use Firebug and WebDev, but didn’t think of doing this as a CSS background image.  I’ll give that a shot!

The way you use is for place a background image in the div. but if you want place a clickable button. You can find the div in the template and place a button.

NueBe - 20 November 2007 02:22 PM

The way you use is for place a background image in the div. but if you want place a clickable button. You can find the div in the template and place a button.

Very true! 

To me, image that is for visual pleasure that serves no purpose for site function, should stay in the background. There is already a ‘my cart’ to click, no need to make a cart icon clickable. Placing the icon in the background also have an incentive, say, if you want the icon change color, you can place that icon in the
li.first a:hover {background: url(car_icon_hover.jpg) }

Thank you so much Minu!  I appreciate the help!

If you want add something interactive, if you want put a rollover button.

If you want edit apperance, o have to edit the filles allowed in the template directory.

You have to find a file that contains the top right links and insert a image before the shopping tag

Any chance we can remove/edit the text in those links? I’d like links for [Account] [Help] [Cart]

-A

Mi cart is defined linke .top-link-cart

Yo have to define a css for it:

.top-link-cart {backgroung: url(1.jpg) no-repeat; padding-left:16px; display:inline; width:auto;}
.top-link-cart:hover {backgroung: url(1.jpg) 50% 50% no-repeat;}

This is a css with opacity rollover for 1.jpg (the image have a width of 16 pixels)

im trying to do the same thing, and all the other icons work just not the wishlist icon! its driving me crazy.

.access { clear: right; float: right;position:relative; top: 10px; }
.access .links{ position:relative; }
.access ul { float: right; }
.access .links li { display:inline; margin-right: 10px; font-size: 12px;}
.access .links li a { color: #999999; padding-left: 17px; text-shadow: 0px 1px #fff; }
.access .links li a:hover { color: #000; text-decoration: none; }
.access .links li.first { padding-left:0 !important; }
.access .links li.last { background:none !important; padding-right:0 !important; margin-right: 0px;}
.access .links li.first a { background: url(../images/icons/account_ico.png) no-repeat left center; }
.access .links li.last a {background: url(../images/icons/login_ico.png) no-repeat left center; }
.top-link-wishlist { background: url(../images/icons/wishlist_ico.png) no-repeat left center; }
.top-link-cart { background: url(../images/icons/cart_ico.png) no-repeat left center; }
.top-link-checkout { background: url(../images/icons/checkout_ico.png) no-repeat left center; }

i’ve tested the links to all the icons, and they all work fine other then wishlist, the icon shows up if i directed it onto another link, so it has to be something wrong with the code itself.