How to Customize Category Tabs with Image Buttons?

I basically want to customize the category tabs area right under my logo, I made image buttons to replace the text links. Is there a place/file to put my html? Would I have to have the Category Tabs ON/OFF turned to on or off (in Configuration/Layout Settings)? I'd like to do this customization in my template. I searched for how to do this in the forums and wiki, forgive me if I simply missed it.

Probably doesn't make a difference concerning my question, but in case, here's my site so far....

https://www.blackorchidcouture.com/catalog

In /includes/modules/your_template/categories_tabs.php, find```php
// currently selected category
if ((int)$cPath == $categories_tab->fields['categories_id']) {
$new_style = 'category-top';
$categories_tab_current = '<span class="category-subs-selected">' . $categories_tab->fields['categories_name'] . '</span>';
} else {
$new_style = 'category-top';
$categories_tab_current = $categories_tab->fields['categories_name'];
}

// create link to top level category
$links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';
$categories_tab->MoveNext();

```php
  //image replacement
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif') {
    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif">';
  }else{
    $categories_tab_display = $categories_tab->fields['categories_name'];
  }
  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $new_style = 'category-top';
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>';
  } else {
    $new_style = 'category-top';
    $categories_tab_current = $categories_tab_display;
  }

  // create link to top level category
  $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';
  $categories_tab->MoveNext();

Save your images as
/includes/templates/your_template/buttons/english/cat_tab##.gif
where ## is replaced by the category id that the image belongs to.
Replace english with the appropriate language if required. If your site is multilingual, this allows the tabs to reflect the current language.

This is not yet tested.

P.S. - You should include an alt tag so the images can be read by search engines and sight-impaired users.```php
$categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif">';

//should be

$categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif alt="' . $categories_tab->fields['categories_name'] . '" />';

This is only one way to accomplish the image replacement goal; other methods may work as well.

Save your images as
/includes/templates/your_template/buttons/english/cat_tab##.gif
where ## is replaced by the category id that the image belongs to.

This is not yet tested.

Thanks for responding. I did as you said, but so long as I had categories_tab.php in /includes/modules/(name of my template)/, it made my site suddenly have nothing in the main wrapper, it was just my header and logo and empty wrapper. When I removed the file, it went back to normal. I hadn't put the images in a buttons folder yet, but don't know if that would make a difference. As for naming the images, if it were Jewelry for instance, would I name it cat_tabJewelry.gif, or cat_tab_jewelry.gif? Also, if I do get this to work, can the button links be rollovers?

Seems like it would be easier (for me anyway) if there was a file to add html to get the effect I want, though I know most of Zen Cart is run mostly by php.

Thanks!

You need to have the PHP to create the HTML; adding flat HTML to the files wouldn't get the result you want.

As I said, the code suggestion was not tested. Either there is a bug I didn't see, or you did something wrong when making the edit. What you describe is a symptom of a PHP syntax error, as in a tag missing or the like. What did you use to make the edit?

The images need to be named with the id number of the category; the name would not work. The format must be exactly as I showed to work.

Finally, if you want rollover functionality, you will need a different approach, either javascript or CSS.php //image replacement if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif') { $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE_IMAGES . 'pixel_trans.gif" alt="' . $categories_tab->fields['categories_name'] . '" />'; $new_style = 'category-' . $categories_tab->fields['categories_id']; //class for individual cat hover }else{ $categories_tab_display = $categories_tab->fields['categories_name']; $new_style = 'category-top'; //class for non-hover cat } // currently selected category if ((int)$cPath == $categories_tab->fields['categories_id']) { $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>'; } else { $categories_tab_current = $categories_tab_display; } Then add to your stylesheet```
category-## {background: url(../buttons/english/cat_tab##.gif) no-repeat;}
category-##:hover {background: url(../buttons/english/cat_tab##hover.gif) no-repeat;}

category-23 {background: url(../buttons/english/cat_tab23.gif) no-repeat;} /example for category id 23/
category-23:hover {background: url(../buttons/english/cat_tab23hover.gif) no-repeat;} /example for category id 23 hover state/

Again, thank you for taking the time to help me with this. Ok, I understand now how to name my images with the category id, and have done that. As for the php code, I copied it, deleted exactly the part you said to delete in the categories_tags.php file, and pasted the new code. Should I not be copy/pasting? I tried it multiple times, making sure I was cutting out the exact code per your instructions, and each time it did the same thing, everything in the main wrapper wasn't showing. I then tried it replacing the deleted code with the rollover code you just gave me, and the same thing happened. Do I need to have any other files in that folder as well?

I have only a basic understanding of php, so don't know if I can figure out the part that isn't working.

Would it help if I posted here the whole file after I've changed it so you can see that I've done it correctly?

What do you think of the idea of getting my logo back in photoshop and extending the bottom a few inches, filling the bottom space with the image links, and splicing them, so they were just an extension of the logo? That way I wouldn't even be worried about dealing with the category tabs area. Think that would work?

Here is the whole categories_tabs.php file once I've done the code swap:

<?php
/**
 * categories_tabs.php module
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: categories_tabs.php 3018 2006-02-12 21:04:04Z wilt $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
$order_by = " order by c.sort_order, cd.categories_name ";

$categories_tab_query = "select c.categories_id, cd.categories_name from " .
TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                          where c.categories_id=cd.categories_id and c.parent_id= '0' and cd.language_id='" . (int)$_SESSION['languages_id'] . "' and c.categories_status='1'" .
$order_by;
$categories_tab = $db->Execute($categories_tab_query);

$links_list = array();
while (!$categories_tab->EOF) {




//image replacement
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif') {
    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif">';
  }else{
    $categories_tab_display = $categories_tab->fields['categories_name'];
  }
  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $new_style = 'category-top';
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>';
  } else {
    $new_style = 'category-top';
    $categories_tab_current = $categories_tab_display;
  }

  // create link to top level category
  $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';
  $categories_tab->MoveNext();  

 
}

?>

If I save this file (in includes/modules/my_template) it makes the content disappear. Same thing if I use the code for the hover buttons instead.

One question about the css for the hover buttons, do I put the above css code in my main css page or the buttons css page?

I've been searching other ways to put image buttons in the category tabs area, but so far haven't found anything. Surely it's been done?

If it makes a difference, I'm using Zen Cart v1.3.9.

Thanks ahead of time for any further info on this!

I don't have a functioning test site on my new computer yet, so I can't debug it myself. This is the corresponding code that works in Categories Dressing:php //display image if exists for category name in current language - with title tag if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catimg' . $current_path . CAT_NAME_IMG_EXT)) { $cat_name_display = zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catimg' . $current_path . CAT_NAME_IMG_EXT, '', '', '', 'title="' . $cat_name_display . '"'); Comparison shows that I missed the second closing ) in this line:php if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif') { It should be```php
if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif')) {

You rock!

Check it out!

https://www.blackorchidcouture.com

I just need to make a few tweeks with sizing and spacing, but this is what I wanted!

A few quick questions and I'll be out of your hair. I had not wanted to have to have a button for every category I have listed in the left sidebox, hence the text "Band Shirts". Is there a way to block some categories out of the tabs? Also, I had wanted the stars to be spacers between the links but didn't know how to do this, so I incorporated the stars into the buttons, and once they have no space between them, it will look like the stars are evenly spaced between the links. Is there a better way to do this?

Thank you so much!

Add a test inside the while loop to skip the category:```php
while (!$categories_tab->EOF) {

if ($categories_tab->fields['categories_id'] != '23') { //skip cat

//existing code

} //skip
$categories_tab->MoveNext();

The method you used for star spacers is the simplest for your situation. I wouldn't change it.

Is there a way to do this where I add an image to the left of the text links?

Yes, you would style the links as list items, inline, with the stars as markers. I can't take the time right now to work out all the styling, but if you post a link to see your site, I'll look at it later.

From the wording of your other post asking the same question, it is apparent that you want not "an image" (one, repeated) but a unique image for each category. Thus the above method is not what you want. A slight tweak to the original code in post 5 will take care of you:```php
//image replacement
if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif') {
$categories_tab_display = '<img src="' . DIR_WS_TEMPLATE_IMAGES . 'pixel_trans.gif" alt="' . $categories_tab->fields['categories_name'] . '" />' . $categories_tab->fields['categories_name']; //image plus text
$new_style = 'category-' . $categories_tab->fields['categories_id']; //class for individual cat hover
}else{
$categories_tab_display = $categories_tab->fields['categories_name'];
$new_style = 'category-top'; //class for non-hover cat
}
// currently selected category
if ((int)$cPath == $categories_tab->fields['categories_id']) {
$categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>';
} else {
$categories_tab_current = $categories_tab_display;
}

Hmmmm, I'm getting the same issue where everything disappears except for the header. Here's the code I pasted into categories_tabs.php

  //image replacement
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.png')) {
    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE_IMAGES . 'pixel_trans.gif" alt="' . $categories_tab->fields['categories_name'] . '" />' .  $categories_tab->fields['categories_name'];  //image plus text
    $new_style = 'category-' . $categories_tab->fields['categories_id']; //class for individual cat hover
  }else{
    $categories_tab_display = $categories_tab->fields['categories_name'];
    $new_style = 'category-top'; //class for non-hover cat
  }
  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>';
  } else {
    $categories_tab_current = $categories_tab_display;
  }  

I added the 2nd parentheses as it looked like it was omitted as you had mentioned in one of the previous posts. You'll notice that I also switched .gif to .png as that is the format of my buttons. I assumed that was okay.

And here is what I put into the css:

category-1 {background: url(../buttons/english/cat_tab1.png) no-repeat;}
category-1:hover {background: url(../buttons/english/cat_tab1.png) no-repeat;}

category-2 {background: url(../buttons/english/cat_tab2.png) no-repeat;}
category-2:hover {background: url(../buttons/english/cat_tab2.png) no-repeat;}

category-3 {background: url(../buttons/english/cat_tab3.png) no-repeat;}
category-3:hover {background: url(../buttons/english/cat_tab3.png) no-repeat;}

I don't have hover images yet so I just referenced the same buttons. I think I've done it right, but everything except for the header is gone. I'm stumped. Any ideas?

P.S. - I should note that I didn't have /includes/modules/your_template/categories_tabs.php, as it's not in my template, so I just edited the one in template_default, but I still put the buttons within my template

Any time a /your_template/ file is mentioned, you should copy it from the /template_default/ version to a /your_template/ folder if you don't already have it. This would not be the reason for your problem, though.

It appears I missed the . before the classnames in my example in post 3:
category-1 {background: url(../buttons/english/cat_tab1.png) no-repeat;}
should be
.category-1 {background: url(../buttons/english/cat_tab1.png) no-repeat;}
If you don't want hover effects, you don't need a :hover rule at all.
Actually, in that case you would want to use the original version of the code (with ) adjustment and tweaked for image plus text):

  //image replacement
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.png')) {
    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.png" alt="' . $categories_tab->fields['categories_name'] . '" />' . $categories_tab->fields['categories_name'];
  }else{
    $categories_tab_display = $categories_tab->fields['categories_name'];
  }
  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $new_style = 'category-top';
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>';
  } else {
    $new_style = 'category-top';
    $categories_tab_current = $categories_tab_display;
  }

Finally, I see several error notices "undefined x" on your homepage, completely unrelated to categories-tabs, one in white on white in the header and two at the bottom. You may have some corrupted files.

Those notices were some issues that I was having installing Magic SEO URL's, but has been resolved.

So here's my entire PHP for catergories_tabs.php (which has now been moved to my includes/modules/my_template folder).

<?php
/**
 * categories_tabs.php module
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: categories_tabs.php 3018 2006-02-12 21:04:04Z wilt $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
$order_by = " order by c.sort_order, cd.categories_name ";

$categories_tab_query = "select c.categories_id, cd.categories_name from " .
TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                          where c.categories_id=cd.categories_id and c.parent_id= '0' and cd.language_id='" . (int)$_SESSION['languages_id'] . "' and c.categories_status='1'" .
$order_by;
$categories_tab = $db->Execute($categories_tab_query);

$links_list = array();
while (!$categories_tab->EOF) {

  //image replacement
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.png')) {
    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.png" alt="' . $categories_tab->fields['categories_name'] . '" />' . $categories_tab->fields['categories_name'];
  }else{
    $categories_tab_display = $categories_tab->fields['categories_name'];
  }
  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $new_style = 'category-top';
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>';
  } else {
    $new_style = 'category-top';
    $categories_tab_current = $categories_tab_display;
  }  

?>

And here's my revised CSS:

.category-1 {background: url(../buttons/english/cat_tab1.png) no-repeat;}

.category-2 {background: url(../buttons/english/cat_tab2.png) no-repeat;}

.category-3 {background: url(../buttons/english/cat_tab3.png) no-repeat;}

I still get nothing below the header when I have it like this.

I didn't mention explicitly that the code I posted the last couple of times does not include the "// create link to top level category" section, as that was unchanged from the original in all mod versions given. You cannot delete that from the file without causing a major problem.

You, sir, are a beautiful human being. That did it! Thank you so much for taking your time to help me out.

:clap: