Categories Dressing

I'm trying to customize the categories listing to include a banner between the links, I posted my question here. So far I haven't received any info.. I really hope you can help me with this issue!

For the "categories always expanded" feature you want, try the Uncollapsed Categories Tree mod recently released by fragfutter. I haven't tested it, but the description is exactly what you asked for.

For the styling and banners, Categories Dressing can provide the framework to accomplish this. FInd this section ```php
}
// categories dressing - add (divider and) heading above a cat
if ($box_categories_array[$i]['path'] == 'cPath=23') { //replace number with your desired cPath
/$content .= '<hr class="catBoxDivider" />' . "\n";/ // to add divider uncomment this line
$content .= '<span class="catBoxHeading1">Heading 1</span><br />' . "\n"; //to display image replace >Heading 1< with: ><img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/your_image.gif"><
}

Replace the 23 with the cPath of the category you want just below the banner.

Repeat this process for the second banner - although since the method puts the content above the specified category, you will have to rearrange the location of the code for the second one. Put it immediately after this section```php
      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;
        }
      }
``` and use the cPath of the category you want just above the banner.

You will have to find the code for the banners. I suggest to start in Tools > Layout Boxes Controller and see the filename for the specials sidebox, and search from there.

For the general styling, read the section at the bottom of the readme about styling a.category-top. You might want to style the subcategories with ```
#categories a (
    background-color: #xxxxxx; (whatever for orange)
    margin-top: 0;
    margin-bottom: 0;
    }

and the top cats with

#categories a.category-top {
    font-size: 1.6em;
    padding: 5px;
    margin-top: 3px;
    }
```adjusting/adding properties as required.

Thanks a lot for your help, I finally managed to get started on this...
First off, I've implemented the Uncollapsed Categories Tree and it works great.
I've also set up your contribution. I followed your instructions on changing the divider and heading, but couldn't get it right.

Let's keep it more simple for now, forget the styling and say I just want to add this image anywhere at the end of a category. After I accomplish this I can replace the <img> tag with the code that displays the "specials".

The code I modified so far in the "active_cat_tree_tpl_categories.php":

      // categories dressing - add (divider and) heading above a cat
      if ($box_categories_array[$i]['path'] == 'cPath=10') { //replace number with your desired cPath
        $content .= '<hr class="catBoxDivider" />' . "\n";*/  // to add divider uncomment this line
        $content .= '<span class="catBoxHeading1"><img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/specials-img.jpg"></span><br />' . "\n";  //to display image replace >Heading 1< with:  ><img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/your_image.gif"><
      }  
```The site I'm working on and my current progress is **[here](http://www.imbatabil.ro/shop)**.

As you can see I the image is not displayed.

There is also an extra space between these two categories: "Test 10%" & "Free Call Stuff".

Any suggestions?

"image is not displayed" - Where do you have the image file located? It needs to be in /your_template/images/.

The space after "Test 10%" is supposed to be "Test 10% by Attrib", which the example sets up as a background image display and turns off the foreground text. It is not finding the background image, and you do not have the "display: block;" styling active, so there is nothing to click on, only the <br /> at the end of that cat display. Without display: block or text output, I don't think there is anything to apply a background to, so finding the image may not be the issue.

Also, if the uncollapsed cat tree mod affects tpl_categories.php, there might need to be some special integration - or have you already done that?

More comments:

The "Category 3" in the display is the "image not found" alt text for the "DVD Movies" demo category, so the example images are not in the right place.

Your code snippet shows you applying the heading image to category 10, but the demo store has no cPath = 10, so your code will not be applied to anything. You need to verify the cPath of the category you want to test with the URL in the address bar at the top of the screen.

Ok, I've moved the image files in the images folders of both "template_default" folder and in the "classic" folder. It appears that the right folder was "classic/images". Now, as you can see the image for category3 is showing... I also moved the specials image to those folders, but it still doesn't show up.
Also when I do a search in the source code of the generated page, I can't find the text "specials-img.jpg" anywhere... Any ideas?

See my post above (posted seconds before yours showed up:)

I've set the cPath to 2, which surely is valid, but the image still doesn't show and I still can't find the image name in the page's source code...
What could be wrong?

I guess I need to ask what folder the copy of tpl_categories.php that you have been editing is in.
You have the Classic template active, so all modifications and additions need to go under that. Change "your_template" to "classic" when placing files in this case, as the readme instructs.

You will also need to learn about the template override system (see FAQ/tutorials) and set up your own template.

Wouldn't you know it, two days after I released v1.1 with coded bullets, I realized the full power of the "display: list-item;" CSS property.

Version 1.2 is now available in Downloads, featuring pure CSS custom category bullets (simpler, more flexible and more powerful) as well as a number of improvements to other coding, and the new improved readme to replace the one I inadvertently left out of the zip for v1.1.

The examples are configured to display with Zen Cart demo products to quickly illustrate their use. A sample stylesheet is included, from which to copy CSS code for your main stylesheet.

Erratum: The example CSS file, stylesheet_categories_dressing.css, should have a class added to this declaration to function properly in all circumstances:```
#categories a.category-top.catText:hover {
background-color: #ddeeff;
color: #554433;
background-image: url(../images/catbghover.gif);
}

Add .catText as shown to limit background hover effects to text-based links and leave background-image-based links to their own swapping operation.

---

Also, further testing has shown a puzzling bug in IE6 handling of CSS bullets for subcategories. It is treating the subcat tags as if they were top cats, even though they do not have top cat tags and have separately styled subcat tags. Meanwhile, Firefox of course handles all the different conditions as designed.

Stay tuned for further info if this feature matters to you.

Update: I have found and corrected the cause of IE6 CSS bullet misbehavior.
Version 1.2.1 should be available soon in Downloads.

The problem was caused by the last-minute addition of a second classname to the <a> tag for bullet handling distinction. IE6 is apparently so confused by a double classname (a.category-top.catText) that it makes strange and perverse choices of what CSS declarations to apply to a situation.

The problem was solved, apparently without undesired side effects, by altering the generating code to append the second name to the main name (a.category-top-catText), incidentally providing a unique classname that will never cause side effects in the Categories-Tabs menu.

Categories Dressing v 1.3 is now available in Downloads.

I have added one new function, and made minor code efficiency improvements.

• You can add non-linked subtext below any desired categories.

This is one of the most useful zencart mods for me, thanks for the great mod.
I manage to get it working properly, except one thing.

I like to add "non-linked heading" just above special, (or Featured Products ...
All Products ...)

This is how i did, for example, I have special link acitvated in the categories menu and link to the special is " http://xxxxxx.com/index.php?main_page=specials"
so I cut and paste "special" into

"case 'special': //replace number with your desired cPath"

but the non-linked heading did not show up. I guess it should be numeric number instead of "special" text.

Can you tell me the way to fix this problem?

The test for displaying headings is in a loop that goes through the categories, but does not go through the all/featured/new/specials links. Those are separately output after the categories.

The way to accomplish this will be to copy the heading code to the specials output area. I am away from my home computer now, but when I get back I will look at the files and post here with the necessary code.

To get headings above links, add this (modified appropriately) to each desired link display block:```php
$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

Or simply replace the entire last section of tpl_categories.php with this:
```php
  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') {
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        //$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 
        $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>';
?>

Replace "Link Heading" with your desired text.
If you want images instead of text for these headings, name them like cathead-featured.gif and save them in /your_template/images/.

This code will check to see if an appropriately-named file exists, and if so, display it; if not, display the heading text at the end of the statement.
To disable any heading, comment out its line as noted.

This and similar more robust and flexible code for category headings will be in the next release of Categories Dressing.

Categories Dressing v2.0 is now available in Downloads.

As noted above, the non-linked heading function is extended to the all/featured/specials/new links.

All of the image replacement functions are now automated: the code looks for an image file named appropriately for the current category and uses it if found. If not found, it uses the text version - no lists needed there any more.

This necessitated changes in the naming conventions used for files and CSS styles, so if you want to upgrade, be advised that you will need to rename some things to keep them working.

How can I change the background colour of each sub-category? I have all categories diferent using the back picture, but as a sub-categories I want it with text and only what I know haw to set up colour for sub-categories in common, but i need it separetly. Please, help! :(

You will need to follow the directions in the comments near the top of tpl_categories.php (where it says "A.category-holiday") to make a new tag for each subcat you want to be different from standard, using the full cPath in the case.

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

For a subcat whose cPath is 3_42, make it ```php
case ($box_categories_array[$i]['path'] == 'cPath=3_42'):
$new_style = 'category-sub-3_42';
break;

and then style

.category-sub-3_42-text { background-color: #aabbcc;}

or whatever you want.

But there is more then 1000 products on my database....is there anyhow posible to make it multiple...