Categories Dressing

How do I remove the -> from the end of top level categories? Thanks.

I confess I'm clueless. :frusty:

I've been trying to make my headings linked and everything I've tried (from the "Relentless' posts earlier in this thread) so far kills all of the sideboxes. They either completely disappear or they all start overlapping on top of each other.

Here is a link to the site: https://www.nybgear.com

I want the headings to link to a category by the same name. As you can see, right now the category is showing directly under the headings. If I can get the headings linkable, I will turn those specific categories off.

I appreciate your help!

Hi Glenn,

I hope you don't get annoyed by me, but I have yet another question. I have images for eacht category in my menu. They are images of words so they are not good for english or german.

Now I've made new images and placed them, the way I read in this thread, in buttons and than language.

So the path for example for category 1 would be
buttons/dutch/catimg1.gif
buttons/german/catimg1.gif
buttons/english/catimg1.gif

Now I read the part on language-specific stylsheets so I made a stylesheet for every language. What I just don't understand is what to put in it. I read something on catbackground... but I don't use those images, I just use the catimg.gif thing. So what do I add to all of the stylesheets to make it work?

Sorry if this is a stupid question. Thank you again for all your help.

Juliet

Language-specific stylesheets and the /buttons/language/ subfolders are two different ways to get similar results. They don't really work together, although it probably won't hurt to use them both for their own purposes.
The stylesheets can work for background images, but not for foreground images, and background images cannot switch between subfolders within the CSS.

You should actually be able to make language subfolders in your template /images/ folder, and save the category images there.
Change this section

	  // categories dressing - display image if exists for category name - with title tag
      if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif')) {
        $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif', '', '', '', 'title="' . $box_categories_array[$i]['name'] . '"'); 

to look like this```php
// categories dressing - display image if exists for category name in current language - with title tag
if (file_exists(DIR_WS_TEMPLATE_IMAGES . $_SESSION['language'] . '/catimg' . $current_path . '.gif')) {
$cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . $_SESSION['language'] . '/catimg' . $current_path . '.gif', '', '', '', 'title="' . $box_categories_array[$i]['name'] . '"');

This approach can be adapted to other foreground image displays as well.

Qwert302 -

The -> is set in admin > Configuration > Layout Settings >
Categories Separator between the Category Name and Count.

Boggled -

You are making things more complicated than they need to be for your situation.
Instead of making headings that link to the first category in each section, and then hiding that category name, just make those category names look like headings. Use the built-in switch:php switch(true) { // to make a specific category stand out define a new class in the stylesheet example: A.category-holiday // uncomment the select below and set the cPath=3 to the cPath= your_categories_id // many variations of this can be done // case ($box_categories_array[$i]['path'] == 'cPath=3'): // $new_style = 'category-holiday'; // break; and make a case for each of categories 1-6, referencing 'category-heading':```php
case ($box_categories_array[$i]['path'] == 'cPath=1'):
$new_style = 'category-heading';
break;
case ($box_categories_array[$i]['path'] == 'cPath=2'):
$new_style = 'category-heading';
break;

and then style a.category-heading {} the same as you have styled .catBoxHeading1.

gjh42:

and then style a.category-heading {} the same as you have styled .catBoxHeading1.

Thank you so much Glenn! I should have known I was overthinking it.

The links are working now, but I can't get them styled. I've added the a.category-heading{} to my stylesheet, but they don't appear to be picking up any styling whatsoever. I tried commenting out the catBoxHeading1 and various other combinations, but nothing worked.

Here is what I have in my stylesheet:

	
.catBoxHeading1 { 
    font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
	font-size:1em;
	font-weight: bold;
	padding: 0.1em 0 0em 0;
	display: block;
    color: #ffffff;
	text-align: center;
    background-image: url(../images/red/sideboxbg.gif);  /*uncomment to use background image with or without coded text*/
    height: 20px;  /*uncomment to use background image without coded text*/
    width: 160px;
	border: 3px ridge #F9F9F9; 
	border-style: ridge;	
    margin-top: 2px;
    margin-bottom: 2px;
	margin-left: -6px;
    } 
 	

.catBoxSubtext {
    /*font-family:  'times new roman', serif;*/
    font-weight: normal;
    font-size: 1em;
    color: #000000; 
    padding: 0.1em 0.2em 0.1em 1.0em;
	background-color: transparent;
	border-top: 2px solid #E4E0D7;
	padding: 4px;
    }  

/*display all cat box links as block*/
#categories a {
    background-repeat: no-repeat;
    display: block;
	border-top: 1px solid #F3F3F3;
	border-bottom: 1px solid #A9A294;
	border-left: 1px solid #D9D9D9;
	border-right: 2px solid #A9A294;
    }

	
a.category-heading {
    font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
	font-size:1em;
	font-weight: bold;
	padding: 0.1em 0 0em 0;
	display: block;
    color: #ffffff;
	text-align: center;
	background: #244B86;
    background-image: url(../images/red/sideboxbg.gif);  /*uncomment to use background image with or without coded text*/
    height: 20px;  /*uncomment to use background image without coded text*/
	/*width: 157px;*/
    margin-top: 2px;
    margin-bottom: 2px;
	margin-left: -6px;
	}

	
/* example for  top category styling */
a.category-top-text {
	display: block;
	background-color: #E9E9E9;
	border-top: 2px solid #ECECEC;
	padding: 4px;
    color: #000000; 
    margin: 0.0em 0;
    padding: 0.2em 0.3em;
    } 

a.category-subs-text, a.category-products-text  {
    background-color: #ffffff;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #D1D1D1;
    border-left: 1px solid #D9D9D9;
    border-right: 2px solid #D1D1D1;
    color: #000000; 
    margin: 0.0em 0;
    padding: 0.2em 0.3em;
    } 

/* uncomment for  top category hover effects (add ,  a.category-subs-text, a.category-products-text if desired) (use  background-image if desired)*/
a.category-top-text:hover {
	 color: #000000;
	 border-top: 1px solid #f5f5f5;
	 border-bottom: 1px solid #f5f5f5;
     background-color: #ffffff;
    } 
	
a.category-subs-text:hover, a.category-products-text:hover  {
	 color: #000000;
     background-color: #93C632;
    } 

Site: https://www.nybgear.com

Do you see what I'm doing wrong? I know it's bound to be something simple that I'm overlooking.

Is their a way to center the images you use as category names? you can see my problem here:

http://www.optifact.com/zencart

Also is their a way to add a space between the images? you can see my problem here: http://www.optifact.com/zencart

SITM -
Add text-align: center; and margin-top: .5em; to your #categories a{} rule:```
#categories a {
background-repeat: no-repeat;
display: block;
text-align: center;
margin-top: .5em;
}

Boggled -

The category names are straight text, so they are getting the -text added to the class name. Change the a.category-heading { to a.category-heading-text { and it should pick up the styling. This wasn't so much a mistake of yours as something I might have foreseen if I had thought about it.

Hello,

I am in need of a little clarification...i am trying to change my categories text links into image links. So far it does not work and i am wondering when you say "copy this in your stylesheet" are you referring to the CSS included in the download (which the code is already there) or my stylesheet.CSS which was there before the mod installation. So this is what i would add (copied this from another post, page 30)

#categories a {
background-repeat: no-repeat;
display: block;
}

a.catBg14 {
background-image: url(../images/catbg14.gif);
height: 30px;
}

a.catBg14:hover {
background-image: url(../images/catbg14hover.gif);
height: 30px
}

And replace the 14 with my own cpath ?And when i add another image link, i just copy this again and change the number with the desired cpath number? Nothing else to add elsewhere except upload the image into my image folder? Lots of question marks eh?:smile: Thanks for any help on this matter.

Matt

gjh42:

Boggled -

The category names are straight text, so they are getting the -text added to the class name. Change the a.category-heading { to a.category-heading-text { and it should pick up the styling. This wasn't so much a mistake of yours as something I might have foreseen if I had thought about it.

Glenn,

Thank you!!! That fixed it. They look and work perfect now. :smile:

Well i found what i was looking for and answered all of my questions in the process :thumbsup: Please ignore my above post

Matt

How can I alter the tpl_categories.php code so that I may use the same image and same image name for every category?

I want to use rollover buttons in place of category names but I don't want to have to add entries to my .css and copy images with new names evertime I create a new cat.

Thanks in advance,
John

Ohhh I was making it too hard on myself. a.category-top-text {}

Thanks for the great mod!

John

Hi Glenn,

I'm sorry to bother you once again. I did exactly as you said in this post http://www.zen-cart.com/forum/showpost.php?p=598270&postcount=364 but it makes me end up with a text based menu again.

I copied the php code exactly and also made language specific subfolders. I don't understand why it's not working.

I haven't tested the /images/language/ subfolder approach yet, so there is a chance that it won't work for some reason.

I know that the /buttons/language/ subfolder approach works, so try altering your code and folders to that and see what happens.```php
// categories dressing - 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 . '.gif')) {
$cat_name_display = zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catimg' . $current_path . '.gif', '', '', '', 'title="' . $box_categories_array[$i]['name'] . '"');

Hi Glenn,
first thanks a lot for this great mod :)
I have a couple of questions: i have added this to my css:

#categories a {
background-repeat: no-repeat;
display: block;
}

a.catBg1 {
background-image: url(../images/catbg1.gif);
height: 45px;
}

a.catBg1:hover {
background-image: url(../images/catbg1hover.gif);
}

and have files called catimg1.gif, catbg1.gif, catbg1hover.gif.

I can see the catimg file, but the rollover effect is not showing. instead i have a red background at the edge when I go on the cat. what am I doing wrong?

another question: my site is bilingual and I want therefor for each language a different image, can this be done? if not, is it possible to have the cat name showing as text and have the bg? how do I do that?
thanks a lot!!
nilsen

Hi Glenn,

I'm sorry but I'm still having no luck with it. Now the problem could very well be that I'm very new to php and am making beginners errors.

Here's the php file (without the language things you wrote down to add because it wasn't working for me I had to take them out)

<?php
/**
 * Side Box Template
 *
 * @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: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $
 * Modified for Categories Dressing v2.2  by Glenn Herbert (gjh42)  2008-02-25
 */
  $disp_block = '';
  //$disp_block = '<br />'; //if not using display: block; in stylesheet, uncomment  this line
  $disp_block_head = '';
  //$disp_block_head = '<br />';  // for headings not block uncomment this line
  $content = "";
  
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  for ($i=0;$i<sizeof($box_categories_array);$i++) {
    switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
//      case ($box_categories_array[$i]['path'] == 'cPath=3'):
//        $new_style = 'category-holiday';
//        break;
      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        break;
      case ($box_categories_array[$i]['has_sub_cat']):
        $new_style = 'category-subs';
        break;
      default:
        $new_style = 'category-products';
    }
	$current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);
    if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
      // skip if this is for the document box (==3) 
    } else {
      // categories dressing - add divider above specified cats
      if(in_array($current_path, explode(",",'3,22,21_56'))) { //replace numbers with your cat ids separated by commas
        $content .= '<hr class="catBoxDivider" />' . "\n";
      }
      // categories dressing - add (divider and) heading above a cat
	  switch ($current_path) {
	  case '23': //replace number with your desired cPath
        //$content .= '<hr class="catBoxDivider" />' . "\n";  // to add divider uncomment this line
        $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n"; 
	  break;
      }  
	  // categories dressing - category name mods
      $cat_name_display = $box_categories_array[$i]['name'];
//      $subcat_level = (substr_count($current_path, '_'); //strip out subcat indent 
//      $cat_name_display = substr_replace($cat_name_display,'',0,($subcat_level*strlen(CATEGORIES_SUBCATEGORIES_INDENT)));
	  $cat_img_bg = '';
	  // categories dressing - display image if exists for category name - with title tag
      if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif')) {
        $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif', '', '', '', 'title="' . $box_categories_array[$i]['name'] . '"'); 
	  // categories dressing - display background image if exists for category name - with title tag
	  } elseif (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg' . $current_path . '.gif')) {
        $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'pixel_trans.gif', '', '100%', '100%', 'title="' . $box_categories_array[$i]['name'] . '"');
        $cat_img_bg = ' catBg' . $current_path;
      } else {
	    $cat_img_bg = '-text';//append to main classname
	  }
      $content .= '<a class="' . $new_style . $cat_img_bg . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';
      if ($box_categories_array[$i]['current']) {
        if ($box_categories_array[$i]['has_sub_cat']) {
          $content .= '<span class="category-subs-parent">' . $cat_name_display . ($disp_block == '<br />'?'</span>':'');
        } else {
          $content .= '<span class="category-subs-selected">' . $cat_name_display . ($disp_block == '<br />'?'</span>':'');
        }
      } else {
        $content .= '<span class="category-not-selected">' . $cat_name_display . ($disp_block == '<br />'?'</span>':'');
      } // category name mods

      if ($box_categories_array[$i]['has_sub_cat']) {
        $content .= CATEGORIES_SEPARATOR;
      }
      $content .= ($disp_block == '<br />'?'</a>':''); // categories dressing - adjust link end 

      if (SHOW_COUNTS == 'true') {
        if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
          $content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
        }
      }

      $content .= ($disp_block == ''?'</span></a>':'') . $disp_block . "\n"; // categories dressing - adjust link end 

      // categories dressing - add subtext below a cat
	  switch ($current_path) {
	  case '23': //replace number with your desired cPath
        $content .= '<span class="catBoxSubtext">Subtext for cat 23 escape apostrophe\'s</span>' . $disp_block . "\n"; 
	  break;
	  } // subtext
    }
  }

  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
    if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      // display limits
//      $display_limit = zen_get_products_new_timelimit();
      $display_limit = zen_get_new_date_range();

      $show_this = $db->Execute("select p.products_id
                                 from " . TABLE_PRODUCTS . " p
                                 where p.products_status = 1 " . $display_limit . " limit 1");
      if ($show_this->RecordCount() > 0) {
        //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    }
  }
  $content .= '</div>';
?>

Now I was wondering where the buttons solution would need to go (I already have the buttons in language folders in my template) and if there's anything I need to adjust for my template. I tried pasting it somewhere but it started complaining about a parse error and not expecting an end.

The template name I use is juliet and it's in the normal directory of templates /includes/templates/juliet

Thanks a ton for your help, I'm so sorry that I have to keep bothering you.

Juliet