Categories Dressing

gjh42:

So the <a> elements are being hidden, but the <li> presumably are still taking up space... The trouble with hiding upper level li is that the lower level elements are part of an upper li. It may be possible to do this with catGroup ids... I've forgotten the link to your site, and I can't test anything without that.

I have just send you website link on pm:wink:

Glenn - You are a freakin' wizard! First, I took your advice and copied and pasted your code at the end of stylesheet_chcategories_dressing.css. It worked for the header box, (of course). Then, using that format as a model, I was able to modify the other elements in the category sidebox as desired. Fantastic! Just one thing... Somehow along the way, I lost the indent on my subcategories. I will pour through this thread, and search for an answer. I will probably reinstall the Cat Dressing mod, adding the necessary css styles. However, if you have a quick answer, I would really appreciate your help.

I don't know where you find the time to reply to all these requests. Thanks so much for the great mod, and the expert advice!

Oh man... I'm almost there. I reinstalled tpl_categories.php and edited stylesheet_chcategories_dressing.css, and I got almost everything I wanted. Now, the only problem I have is that bg25 setting. Not sure what to do about that, but I will keep digging. If I simply comment it out, it leaves a big hole in my categories list. It is covering up the name of that category.

gjh42:

Kinvart - I looked at your site, and there are several strange things happening that I can't understand without seeing the code that makes them happen. If you post the section of tpl_categories.php where you added special categories, and your categories_dressing_defines.php, I may be able to figure it out.

This is tpl_categories.php

 * includes/languages/english/extra_definitions/your_template/categories_dressing_defines.php - make user settings here
 */

  $content = "";
  $prev_cat_depth = -1;//do not alter
  $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: #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=3'):
//        $new_style = 'holiday';
//        break;
      case ($box_categories_array[$i]['path'] == 'cPath=9'): //Zenski cevlji
        $new_style = 'category-zenski';
        break;
      case ($box_categories_array[$i]['path'] == 'cPath=8'): //Moski cevlji
        $new_style = 'category-moski';
        break;
      case ($box_categories_array[$i]['path'] == 'cPath=10'): //Otroski cevlji
        $new_style = 'category-otroski';
        break;
      case ($box_categories_array[$i]['path'] == 'cPath=2'): //Oblacila
        $new_style = 'category-oblacila';
        break;
      case ($box_categories_array[$i]['path'] == 'cPath=19'): //Ostalo
        $new_style = 'category-ostalo';
        break;
      case ($box_categories_array[$i]['top'] == 'true'):      }
    $current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);
    $skip_cat = 0;
    $skip_cat = cat_active_level_manage($current_path);
    if ($skip_cat 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)) {
      // skip if this is for the document box (==3)
    } 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>';
      $content .= cat_box_subtext($current_path);
    }
  }
  $content .= cat_ul_manage(0, $prev_cat_depth, 0) . '</ul>' . "\n";
    
  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";
    }
    $content .= '<ul class="catLinks">' . "\n";
    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";
    }
    $content .= '</ul>' . "\n";
  }
  $content .= '</div>';
?>

and the categories_dressing_defines.php

* includes/languages/english/extra_definitions/your_template/categories_dressing_defines.php
*/

//example defines - copy & modify for each category desired
define ('CAT_BOX_HEADING_#','group|divider/class|[imgname]|[imgalt][|headcontent|headclass][|headcontent|headclass]...');
define ('CAT_BOX_HEADING_1','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_3','1|0|||Major Heading|1|Minor Heading|2');//new list - text headings - multiple levels - styles 1 & 2
define ('CAT_BOX_HEADING_23','0|1|||Another Heading|2');//no list break - divider and text heading - style 2
define ('CAT_BOX_HEADING_33_34','0|0|||Subcat Heading|3');//simple text heading - style 3
define ('CAT_BOX_HEADING_48','1|0|cathead48.gif|Cat 48 Heading|Buy Now...|3');//image heading and alt text - can be followed by text heading(s)
define ('CAT_BOX_HEADING_52','0|1||');//divider only - style 1
define ('CAT_BOX_HEADING_53','0|2||');//divider only - style 2
define ('CAT_BOX_HEADING_FEATURED','0|0|||Featured Heading|3');//no list break - text heading
define ('CAT_BOX_SUBTEXT_23','Subtext for cat 23 escape apostrophe\'s|1');//subtext - style 1

//
//display only the active top category and its subs, hide top cats, hide sub-subcats, or any combination.
//only uncomment and set this define if you want to hide cats based on active tree or level
// 'active|highest_level|deepest_level'
//active: 0=all tops/1=full active tree only/2=active only (all tops when no cat selected)/
//3=full active tree, others per level/4=like 3, active branches only/5=like 1, no tops|
//highest_level: 0=all levels/1=no topcats/etc.|
//deepest_level: 1=only first subcats/2=first & second subcats/etc.
//
//define('CAT_BOX_ACTIVE_LEVEL', '0|1|9');//hide top cats
//define('CAT_BOX_ACTIVE_LEVEL', '1|0|1');//show only active cats, to first subcat level

I recon i did something wrong in categories_dressing_defines.php but don't know what :oops:

Thank you!

You erased part of tpl_categories.php when you added the special categories. You have thisphp case ($box_categories_array[$i]['path'] == 'cPath=19'): //Ostalo $new_style = 'category-ostalo'; break; case ($box_categories_array[$i]['top'] == 'true'): } $current_path = str_replace("cPath=","",$box_categories_array[$i]['path']); $skip_cat = 0; but it should look like this```php
case ($box_categories_array[$i]['path'] == 'cPath=19'): //Ostalo
$new_style = 'category-ostalo';
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;

This is one of the features of v2.8, moving special category creation to defines so nobody needs to touch the code in tpl_categories.php. Hopefully I will get some final adjustments to it done soon so I can release it.

I noticed the reason for the incorrect classes being assigned to subcategories: with the standard $new_style assignment cases missing, since $new_style is not reset at the top of the loop, the previous value from the top category was reused, instead of being caught by the default. The not resetting is not a fault as long as the original code is in place.

gjh42:

You erased part of tpl_categories.php when you added the special categories. You have thisphp case ($box_categories_array[$i]['path'] == 'cPath=19'): //Ostalo $new_style = 'category-ostalo'; break; case ($box_categories_array[$i]['top'] == 'true'): } $current_path = str_replace("cPath=","",$box_categories_array[$i]['path']); $skip_cat = 0; but it should look like this```php
case ($box_categories_array[$i]['path'] == 'cPath=19'): //Ostalo
$new_style = 'category-ostalo';
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;

> This is one of the features of v2.8, moving special category creation to defines so nobody needs to touch the code in tpl_categories.php. Hopefully I will get some final adjustments to it done soon so I can release it.

This is now working, thanks:clap:

> I noticed the reason for the incorrect classes being assigned to subcategories: with the standard $new_style assignment cases missing, since $new_style is not reset at the top of the loop, the previous value from the top category was reused, instead of being caught by the default. The not resetting is not a fault as long as the original code is in place.

What can i do about that?

That was the problem caused by the missing code. You fixed it by replacing the code.

gjh42:

That was the problem caused by the missing code. You fixed it by replacing the code.

Oh, sorry, i taught you were talking about the empty space on the left side in sub categories. How can i change that to be wide as a top category?

dreamoutlaw - The code automatically detects the existence of a background image titled for category 25, so it sets up a blank image replacement in expectation that you will have a stylesheet rule to give the background. Since you don't want the background image here, you need to delete the demo image file catbg25.gif.

The indent is caused by one of your Template Monster stylesheets, stylesheet_boxes.css:```
.box ul li {
border-bottom:1px solid #E9E9E9;
line-height:40px;
padding-left:18px;
}

To avoid changing your other sideboxes, add a new rule to your stylesheet_chcategories_dressing.css:```
#chcategories ul li {/*category li containers*/ 
    margin: 0;
    padding: 0;
    }
```I just tested this on your website and it works.

gjh42:

The indent is caused by one of your Template Monster stylesheets, stylesheet_boxes.css:```
.box ul li {
border-bottom:1px solid #E9E9E9;
line-height:40px;
padding-left:18px;
}

> To avoid changing your other sideboxes, add a new rule to your stylesheet_chcategories_dressing.css:```
#chcategories ul li {/*category li containers*/ 
    margin: 0;
    padding: 0;
    }
```I just tested this on your website and it works.

THANK YOU THANK YOU THANK YOU!!!

You have just saved my day :clap:

Now, for the very last thing, then i'm (hopefully) done with questions.

I would like to put an image (and hide the actual typing) in categories boxes. So instead of p.e. "Ženski čevlji->" would be an image. How to do that?

Thanks again :bigups:

Look at the readme. The section titled "To display images in place of selected category names:" gives the instructions for this.

Glenn - Thanks again for your quick response! I think I read this section in the readme file, ("To display images in place of selected category names:"). It confirmed what you just told me. I thought I could correct it by changing the name of the file reference in stylesheet_chcategories_dressing.css... therefore, it would be referring to a file that does not exist. But, that didn't work. I will rename the demo .gif, and see if that solves the problem. As a last resort, I will delete the .gif image. If I ever need it for anything, I can always reinstall it from the original file on my local hard drive. Thanks again! - Reg

The demo gif is purely for demo purposes, and you can just delete it.

Cool. (WOW!... You're fast!)

gjh42:

So the <a> elements are being hidden, but the <li> presumably are still taking up space... The trouble with hiding upper level li is that the lower level elements are part of an upper li. It may be possible to do this with catGroup ids... I've forgotten the link to your site, and I can't test anything without that.

Glenn, I hope link I send you was helpuful.

Here is how rightsidebox looks like now click here
It should look same as chcategories on left but instead it stretched and there is empty space on top and bellow car part types:dontgetit

Geez, that was easy! Thank you so much! Is there a link where users can make a donation for all your great work? I didn't see one in the readme file.

I see something that might be useful: all of the first subcats have class="cat-subs" while all the fourth level subcats have class="cat-products".
So add to your stylesheet_categories_dressing.css```
#categories li.cat-subs {display: none;}

dreamoutlaw - not a link, but my paypal address is at the top of the readme;)

gjh42:

Look at the readme. The section titled "To display images in place of selected category names:" gives the instructions for this.

Did, so, but the image is not displayed correctly... any ideas?

From stylesheet_chcategories_dressing.css

#chcategories li a.catBg9 {
    background-image: url(http://www.elegance.si/store/includes/templates/theme322/buttons/slovensko/catbg9.gif);
    width: 200px;
    height: 60px;
    }

#chcategories li a.catBg9:hover {
    background-image: url(http://www.elegance.si/store/includes/templates/theme322/buttons/slovensko/catbg9hover.gif);
    width: 200px;
    height: 60px;
    }

The image is somehow distored (wider than it really is) and not shown as it should. any ideas?