How to Customize Category Tabs with Image Buttons?

[stevelucky]

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

[gjh42]

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.

[gjh42]

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:

  //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;
  } 

[stevelucky]

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

[gjh42]

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.

[stevelucky]

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.

[gjh42]

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.

[stevelucky]

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