Categories Dressing

i added:
margin: 0 0 0 0;
padding: 0 0 0 0;

to the 1st four li items:
#categories li a.catBg1 {
background: url(../buttons/english/catbg1.gif) 0 0 no-repeat;
height: 27px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg1:hover {
background-position: -167px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

etc....

no change to the padding in IE. still trying to find that pixel.gif file... will let u know if i have no luck.

ok, so i found where that file is referenced several times... however they are all regarding php if/else statements...
so the issue is in the code or the css somewhere that is telling it to use that image... dont want to change the code to not call it, need to fix the actual problem with the "harnesses" category... and why it feels the need to use the "else" instead of the "if"...

?? any thoughts?

The pixel_trans.gif is to give the <a> something to contain - IE doesn't like an empty <a> element and won't give it a size.
I see the space in Firefox, but don't have time at the moment to investigate further. Will check in later.

Dear all,
I would like to ask for your advice(s) on Categories Dressing, but I posted to wrong forum, please have a look:

http://www.zen-cart.com/forum/showthread.php?p=720177#post720177

Thank you in advance.

Tim

Before trying to debug the particular code you posted, I have a question.
Do you want all top categories styled in the way you describe, and all subcategories in another way? If so, you don't need to modify any PHP files, just use the stylesheet.

It is possible to style top categories and subcats differently in stock Zen Cart without installing any mods, though Categories Dressing will also allow more extensive changes. Your stylesheet rule seems to show that you want the block display furnished by Cat Dressing, so you should probably continue with it.

Before I go on, please post a link to see your site, and let me know about the styling question.

Thank you, Glenn, for your reply.

Here is the link of my store: http://www.pacificphm.com/store

I want to have all categories names in a large font-size and specific background, subcategories in smaller fonts.

More, I want to have all subcategories (of all categories) displayed in left column (even if visitors don't click on category name).

I prefer to use Categories Dressing what you provided, but surprised why my mod doesn't work. If I get it worked, I think I can modify the site by my way, I am ok with CSS.

Thank you again, Glenn.

Tim

To have all subcategories showing all the time, you need an expanded categories mod. The newest version of Categories Dressing includes an optional expanded categories mod (Uncollapsed Categories Tree). It is not available in Free Addons yet, but I posted it in post 729 above. I have made a few changes from it in my development set, but what is there will work for what you want.

It will be easier for you to use the stylesheet to style
#chcategories ul a {}
for top categories and
#chcategories ul ul a {}
for subcategories than to try to style each top cat individually as you started to do.

Note - your site is password-protected and I can't see it.

oh sorry, I just took password away.

Here is a set of Categories Dressing v2.7.2, with <ul> validation improved and a few other minor tweaks. Thanks to Website Rob for advice. Unless someone finds an error in this, I will submit it to Free Addons in a day or so.

The zip in post #729 has been deleted.

glenn, did you get a chance to look into that weird space i have in FF, and the consistent space i have in IE?

#categories li a.catBg4 {
background: url(../buttons/english/catbg4.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg4:hover {
background-position: -167px 0;
}

#categories li a.catBg5 {
background: url(../buttons/english/catbg5.gif) 0 0 no-repeat;
height: 28px;
}
#categories li a.catBg5:hover {
background-position: -167px 0;
}

#categories li a.catBg6 {
background: url(../buttons/english/catbg6.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg6:hover {
background-position: -167px 0;
}

#categories li a.catBg7 {
background: url(../buttons/english/catbg7.gif) 0 0 no-repeat;
height: 27px;
}
```Harnesses is category 5... do you see a pattern? :)

Dear all,
I have an "empty line" between category name and first subcategory name, I remember I saw a post about this problem somewhere but unfortunately I can't find it again by searching.

When I use Firefox Firebug, I see "<br/>" right there, but don't know what file I need to edit and remove it.

Please, advise me how to fix it, thank you.

Tim

bah! i tooootally checked that. i think someone went in and changed it to make me look bad.. LMAO!!

ok, so that fixed the firefox problem... still have spacing in IE, im not too worried about it, because it looks consistent... but am curious if there is an easy fix? if not... no worries!

thanks as always glenn!

Tim,

You have ch_categories installed, but not Categories Dressing, so the block display of the top categories is causing the space.
You can fix this for modern browsers by adding to your stylesheet:

#chcategories a.category-top+br {display: none;}

This will not work in IE6 because it does not understand the "+", but if you are ok with users of this old browser having an extra space in the list, you can call it good. Otherwise, you will have to install the Cat Dressing files and make the stylesheet changes in stylesheet_chcategories_dressing.css.

Dear Glenn,
How to check if the mod works after uploading all the Categories Dressing files ? I follow all the guidelines for installing the mod, but I don't see any change, means, no effect from the mod (maybe these files are ignored). Please, advise me, thank you.

Tim

Are you sure the files are in the right template folders? Please check and post the exact filepath to tpl_categories.php, and verify that it is the Cat Dressing version of the file.

Hi Glen,

I wonder if you could tell me the easiest way to go from this (existing):

To this:

I'd like the new products and the all products llinks moved to the top with a seperator but don't know the easiest way to do it without loads and loads of trial and error :-(

You would want to move the whole "links" code section near the top of tpl_categories.php. This would not be difficult, but would require a lot of making sure the right parts go in the right order - you would need to know how everything works to tweak it correctly.

Another possibility would be giving #chcategoriesContent position: relative; and padding-top: 5em; more or less so it will be a positioning context with an open space at the top, and giving #catLinks position: absolute; top: 0; so it sits at the top of the box.
Add a divider above the Womens category.

I have to leave for the weekend now - will look in when I return.

Hi Glen,

I figured it out. Just moved a couple of blocks of code around in tpl_categories.php as you suggested. Here is the content of my modified file for anyone who's interested in having 'new products' and 'all products' links above all of their categories at the very top:

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2009 Glenn Herbert
 * @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.6  by Glenn Herbert (gjh42)   - 20090128  
 * Referenced files:
 * includes/functions/extra_functions/categories_dressing_functions.php
 * includes/languages/english/extra_definitions/your_template/categories_dressing_defines.php - make user settings here
 */

  $content = "";
  $prev_cat_depth = -1;
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  
  // display a separator between categories and links
    $content .= '<ul class="catLinks">';
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
	  $cat_box_link_head = cat_box_heading('SPECIALS');
	  $content .= $cat_box_link_head[1];
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<li><a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '</li>' . "\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) {
	    $cat_box_link_head = cat_box_heading('NEW');
	    $content .= $cat_box_link_head[1];
        $content .= '<li><a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '</li>' . "\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) {
	    $cat_box_link_head = cat_box_heading('FEATURED');
	    $content .= $cat_box_link_head[1];
        $content .= '<li><a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '</li>' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
	  $cat_box_link_head = cat_box_heading('ALL');
	  $content .= $cat_box_link_head[1];
      $content .= '<li><a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . '</li>' . "\n";
    }
	
	    if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
      $content .= '<hr id="catBoxDivider" />' . "\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: #categories li.cat-holiday a {}
// 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=1'):
        $new_style = 'bolder';
        break;
      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'top';
        break;
      case ($box_categories_array[$i]['has_sub_cat']):
        $new_style = 'subs';
        break;
      default:
        $new_style = 'products';
    }
	$current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);
	$skip_cat = 0;
	$skip_cat = cat_active_level_manage($current_path);
	     if (substr_count($box_categories_array[$i]['path'],'_') > 1 or 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)) {
    } else {
	  $cat_box_heading = cat_box_heading($current_path);
	  $cat_ul = cat_ul_manage($current_path, $prev_cat_depth, $cat_box_heading[0]);
      $content .= $cat_ul;
      $content .= $cat_box_heading[1];
	  $cat_name_display = cat_name_display($box_categories_array[$i]['name'], $current_path);
	  $active_class = ($box_categories_array[$i]['current'])? ($box_categories_array[$i]['has_sub_cat']? 'parent': 'selected'): 'not-selected';
      $content .= '<li class="cat-' . $new_style . '"><a class="cat-' . $active_class . $cat_name_display[0] . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';
	  $content .= $cat_name_display[1];
      if ($box_categories_array[$i]['has_sub_cat'] and $cat_name_display[0] == '-text') {
        $content .= CATEGORIES_SEPARATOR;
      }

      if (SHOW_COUNTS == 'true' and $cat_name_display[0] == '-text') {
        if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
          $content .= '<span class="catCount">' . CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX . '</span>';
        }
      }
      $content .= '</a></li>' .  "\n";
      $content .= cat_box_subtext($current_path); 
    }
  }
  $content .= str_repeat('</ul>',$prev_cat_depth+1);
  
  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') {
	$content .= '</ul>';
  }
  $content .= '</div>';
?>

Hmmm not sure if you'd have moved that code around differently Glen, but it's had one minor effect on the way the highlighted/selected categories behave.

When I click for example on dresses sub category, the red line (bullet3.gif) goes next to the main category womenswear as well as dresses.

Before I moved those code blocks, bullet3 only appeared on the actual dresses category and the main womenswear parent category only changed to bold type (no bullet3)...

Maybe when you get back from a nice weekend away, you could take a look and see if you can find what I've done wrong?