Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Adding icons next to My Cart, My Wishlist & Checkout in the Header Links
 
Brady
Guru
 
Avatar
Total Posts:  330
Joined:  2007-09-10
Orange County, CA
 

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!

Image Attachments
Picture-1.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

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!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brady
Guru
 
Avatar
Total Posts:  330
Joined:  2007-09-10
Orange County, CA
 

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!

 
Magento Community Magento Community
Magento Community
Magento Community
 
NueBe
Member
 
Total Posts:  65
Joined:  2007-09-30
Tres Cantos - Madrid - Spain
 

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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 
NueBe - 20 November 2007 01: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) }

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brady
Guru
 
Avatar
Total Posts:  330
Joined:  2007-09-10
Orange County, CA
 

Thank you so much Minu!  I appreciate the help!

 
Magento Community Magento Community
Magento Community
Magento Community
 
NueBe
Member
 
Total Posts:  65
Joined:  2007-09-30
Tres Cantos - Madrid - Spain
 

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
andrewmaier
Jr. Member
 
Avatar
Total Posts:  22
Joined:  2008-01-13
 

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

-A

 
Magento Community Magento Community
Magento Community
Magento Community
 
NueBe
Member
 
Total Posts:  65
Joined:  2007-09-30
Tres Cantos - Madrid - Spain
 

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)

 
Magento Community Magento Community
Magento Community
Magento Community
 
Michdog22
Jr. Member
 
Total Posts:  5
Joined:  2011-04-18
 

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.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top