Changing top_nav links with images

[barendfaber]

Hi,

I hope someone can help me, this is my first go at trying to change the actual code to create a bespoke template! I am working on dragons.digi-blue.co.uk, using version 1.3.9 h. I would like to replace the links for my top nav (home, specials, account, etc.) with images. I have already created these and added them to includes/templates/MY_TEMPLATE/images. In my tpl_header.php, I have this as:

<?php require($template->get_template_dir('tpl_top_nav.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_top_nav.php'); ?>

On my tpl_top_nav.php, I have this code:

<div id="top_nav">
<div id="tab_nav">
<ul class="list-style-none">
<?php
if ($current_page_base == 'index') { $active = 'tab_active';
} else { $active = '';
}?>
<li class="<?php echo $active;?>"><a href="<?php echo '' . HTTP_SERVER . DIR_WS_CATALOG;?>"><?php echo TOP_MENU_HOME;?></a></li>

<?php
if ($current_page_base == 'products_new') { $active = 'tab_active';
} else { $active = '';
}?>
<li class="<?php echo $active;?>"><a href="index.php?main_page=products_new"><?php echo TOP_MENU_NEW_PRODUCTS;?></a></li>

<?php
if ($current_page_base == 'specials') { $active = 'tab_active';
} else { $active = '';
}?>
<li class="<?php echo $active;?>"><a href="index.php?main_page=specials"><?php echo TOP_MENU_SPECIALS;?></a></li>

<?php
if ($current_page_base == 'featured_products') { $active = 'tab_active';
} else { $active = '';
}?>

How can I change the code to pull up my images rather than the links? I have seen this link (http://www.zen-cart.com/showthread.p...eck+link+image) but it is a bit different from the top nav!

[kobra]

Looks like you have sorted this out

[barendfaber]

Hi Kobra,

Thanks for the reply. No, it is not. What I would like to do is replace Home with a icon of a home, with alt text. The same with Account, replace that with a picture of a wallet, etc. I have used the Abagon template for layout, and now I am trying to amend this. Could you help with this?

[David Allen]

Looks like the code comes from the template you are using, so I'm not totally sure. But if you locate the language file that TOP_MENU_HOME is defined in, you can replace the the statement that looks like

define('TOP_MENU_HOME', 'Home');

with this

define('TOP_MENU_HOME', '<img src="images/my_home_icon.gif" alt="my_alt_text" title="my_title" />');

and similarly for all the specials etc.

Hope this helps

[barendfaber]

Hi David,

Thank you for the recommendation. Unfortunately when I added this, it broke the site. I loaded the home.jpg to my main images folder as well as my template images folder. Do you have any idea why this has not worked?

[barendfaber]

Hi David,

Thank you for the recommendation. Unfortunately when I added this, it broke the site. I loaded the home.jpg to my main images folder as well as my template images folder. Do you have any idea why this has not worked?

Sorry, stupid me! There were 2, I chnaged the one and forgot to add the ' at the end, fixed it and now it is working. Thank you!