adding icons to My Account | Cart Contents | Checkout | etc...

[georgex300]

Need help on how to add icons on top (when logged off - My Account | Cart Contents |Checkout) and (when logged in - My Account | Log Off | Cart Contents | Checkout)

i.e.

ICON
My Account

Any help appreciated. Thanks!

[Absolute]

There are 2 ways to do this. First, you can change your language file, which is includes/languages/english/YOUR_TEMPLATE/header.php. and change the text here to include the <img......> tags.

Remember if you are using the first option to use something like:

define('HEADER_TEXT_LOGIN', zen_image('login.gif', 'Login').' Login');

This way the images will also appear on any SSL pages without security warnings.

Alternatively, you can change the includes/templates/YOUR_TEMPLATE/common/tpl_header.php, so that it includes an id with each <li> object, which is called header_NAME_OF_SPECIFIC_LINK, and then you can use CSS to apply a unique image to th background of each link.

Absolute

[DivaVocals]

Hate to bump an old thread, but I wanted to contribute how I accomplished this for anyone who might be looking for this information:

I opted to edit the header.php language file. This seemed like the best solution to this.. I created a folder in my Zen Cart images folder called "menu_icons" and placed all my nav images there.

Here is a sample of how I edited the header.php file

  define('HEADER_TITLE_CART_CONTENTS', '<img src="images/menu_icons/cart.png" alt="Shopping Cart" />');

If I wanted text along with the image, I opted to create an image which included the text as a part of the image file. Hope this is helpful to someone else.

[DivaVocals]

Wanted to post some corrections/updates.. Just in case someone else was looking for this information like I was.. I just wanted to pay it forward by posting what worked for me..

I added a title attribute to my header.php entries so that when you hover the image links see a text tooltip.

  define('HEADER_TITLE_LOGIN', '<img src="images/menu_icons/icon_login.jpg" alt="Log In" title=" Log In " />');

I also forgot that the "Home" link in the footer links is driven by the header.php language file. So to avoid my "Home" icon from appearing in my footer links as well, I added another definition to my header.php as follows (highlighted in red):

// header text in includes/header.php
  define('HEADER_TITLE_CREATE_ACCOUNT', 'Create Account');
  define('HEADER_TITLE_MY_ACCOUNT', '<img src="images/menu_icons/icon_account.jpg" alt="My Account" title=" My Account " />');
  define('HEADER_TITLE_CART_CONTENTS', '<img src="images/menu_icons/icon_cart.jpg" alt="Shopping Cart" title=" Shopping Cart " />');
  define('HEADER_TITLE_CHECKOUT', '<img src="images/menu_icons/icon_checkout.jpg" alt="Checkout" title=" Checkout " />');
  define('HEADER_TITLE_TOP', 'Top');
  define('HEADER_TITLE_CATALOG', '<img src="images/menu_icons/icon_home.jpg" alt="Home" title=" Home " />');
  define('HEADER_TITLE_LOGOFF', '<img src="images/menu_icons/icon_logout.jpg" alt="Log Out" title=" Log Out " />');
  define('HEADER_TITLE_LOGIN', '<img src="images/menu_icons/icon_login.jpg" alt="Log In" title=" Log In " />');
  define('HEADER_TITLE_CATALOG_FOOTER', 'Home');

Then I updated my /includes/templates/YOUR_TEMPLATE/common/tpl_footer.php to use this new definition as follows:

<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG_FOOTER; ?></a></li>

Now it all works nicely!

[DivaVocals]

and the fun doesn't end.. There are two more files that need to be updated so that your "Home" icon appears in it's place.. (BTW, you cannot create an override for these files.. so make sure you make a note of these changes so you can update the files after an upgrade)

includes/classes/breadcrumb.php
Line #53 : if ($this->_trail[$i]['title'] == HEADER_TITLE_CATALOG) {

includes/init_includes/init_add_crumbs.php
Line #14 : $breadcrumb->add(HEADER_TITLE_CATALOG, zen_href_link(FILENAME_DEFAULT));

Shoulda used the Developer Tool Kit to start with instead of GUESSING.. Oh well it's late, and I'm sleep deprived.. or is it the Merlot??

[DivaVocals]

Let me correct my last post...

There are two more files that need to be updated so that your "Home" icon does not appear..

Also, in case I wasn't clear, you simply replace the constant with the new constant you used in the footer links.. This way your breadcrumbs will display "Home" as a text link instead of displaying your icon..

Okay.. all done.. going to bed now.. Hope my ramblings help someone else who wants to do this..

[misticloudz]

This is genius, and is exactly what I needed. Thank you DivaVocals for saving me countless hours or more of work!!

[DivaVocals]

This is genius, and is exactly what I needed. Thank you DivaVocals for saving me countless hours or more of work!!

You're welcome!

Search Terms:
Add icons to navMainWrapper
Replace navMainWrapper links with images
Replace My Account link with image or icon
Replace Home link with image or icon