Icons for links in Ezpages bar header

[strokerstees]

Does anyone know how I might be able to add images in place of standard text links for a site that uses EZpages for navigation?

Here is a link to the site; http://www.yabbos.com

I've looked in tpl_ezpages_bar_header php and ezpages_bar_header.php files and am stumped. Not surprising considering my lack of php skills. I'm guessing I need to define images for each link but don't know how to go about it.

Has anyone done something similar?

Thanks,
Todd

[DrByte]

They are built based on the name of the EZ-Page title, via includes/modules/YOURTEMPLATE/ezpages_bar_header.php

To convert them to images, you'll have to:
- change the database to allow you to store the image name
- change the module to retrieve the image name
- change the module to use the image name when creating the link
- deal with stylesheet matters to ensure the images display consistently as desired

... and this is assuming everything's only in one language.

[strokerstees]

English only. ;)

So it is workable then? The changes you list, are they extensive or just a few lines of added code?

If the changes are too daunting I will probably just style the header bar with the stylesheet, but would much prefer the images.

I'm guessing rollovers is asking a bit too much, eh? lol

Thanks,
Todd

[kuroi]

There are a variety of ways of doing this depending upon exactly what you want to achieve. However, here's a relatively simple approach that sidesteps the need for database changes.

Create a tpl_ezpages_bar_header.php in your template and replace the for loop with the following

<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {

$tab_img = strtr(strtolower($var_linksList[$i]['name']),' ','_') . '_tab.' . TAB_FILE_EXT; ?><a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo zen_image($template->get_template_dir($tab_img, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $tab_img, $var_linksList[$i]['name']); ?></a>

<?php } // end FOR loop ?>

The first line builds an image file name from the text that would have appeared on your tab. So the first one in your menu would be the_stuff_tab.gif if you have defined TAB_FILE_EXT to be 'gif'.

TAB_FILE_EXT is a new constant for which you would need to add a definition in your header.php file. Though I guess you could hard-code it here to avoid that step if you wished.

The second line replaces the EZ_Pages link text with an image with the name that was built in the first line, and uses the original link name as the Alt image.

You would then need to create your images and put them in your template/images file. If your images are all the same size, then it would be good to add the width and height as parameters 3 and 4 of the zen_image function.

Finally, some styling of the images/links may be necessary to persuade them to line up neatly across your page.

Rollovers? That could be could be achieved by including an onmouseover command as the 5th parameter of the zen_image function, with the rollover image name built up in the same way as was done for the initial tab image.

[Pauls]

Does anyone know how I might be able to add images in place of standard text links for a site that uses EZpages for navigation?

Has anyone done something similar?

Thanks,
Todd

Like this ? http://www.stylish-bathroom-cabinets.co.uk/

[kuroi]

Hi Paul

I actually thought about your site when I first saw this question, but ... errr ... you used category tabs not EZ-Pages. Nevertheless, the underlying technique is very similar and you're right that Todd might find value in visiting the thread where this approach was refined.

[Pauls]

Hi Kuroi,
yep thought it was close, still don't know enough about ZC terminology, but I figured you and I thrashing it out on that other thread would be worth a read by Stokerstees

[strokerstees]

Booyah!! We have success! Even a noob like me was able to figure it out after a while. (I had to hardcode the define into the tpl_ezpages_header thingy as I apparently put it in the wrong header file or that just didn't work.)

http://www.yabbos.com to check it out.

Now to add rollovers. I'll search the forum for adding onmouseover commands and just exactly how to difine the sizes as they are all the same size.

Thanks for the help once again Kuroi!

Todd

[strokerstees]

Hmmmm. Not finding the info I am looking for after two hours of searching. I may have found it, but simply didn't understand it?

I looked at Easy Rollovers but that only seems to work with zen buttons, which these are not.

Any suggestions?

Thanks,
Todd

[kuroi]

I'd recommend that you first get your head round javascript rollovers, to which there's a helpful introduction here.

Then work out what inline javascript would need to appear in the HTML that Zen Cart produces.

Finally insert that inline javascriot into the 5th parameter of the zen_image function call.