Categories Dressing v2.7.3

For assistance, see Categories Dressing in the Zen Cart support forum.

If you would like to support development of this mod, you can make a Paypal donation to simonokewode@hotmail.com.

Legal

This file is part of Categories Dressing.

Categories Dressing is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

Categories Dressing is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with Categories Dressing. If not, see http://www.gnu.org/licenses/.

Introduction

This is a mix-and-match group of alterations you can make to the appearance of the standard Zen Cart "Categories" sidebox. Each alteration can be repeated with different characteristics, or omitted if not wanted.

Files

Modified file included:

New files included:
New files included in /ch_category/ folder (only for Uncollapsed Categories Tree):
Example image files included:
(new and example files are configured to display with Zen Cart demo products)

Installation

After unzipping the files on your computer, follow the folder tree to /includes/languages/english/extra_definitions/your_template/, and to /includes/templates/your_template/. Rename the /your_template/ folders in each case to the folder name of the custom template you are using.
After making any necessary file edits, ftp the /includes/ folder to the root of your store on the server. The files will automatically be placed in the correct locations.

If you wish to use the Uncollapsed Categories Tree to display all subcategories all the time, do the same to /ch_category/includes/modules/sideboxes/your_template/, and /ch_category/includes/templates/your_template/.
Then ftp the /includes/ folder inside /ch_category/ to the same place.
Rename the main package's stylesheet_categories_dressing.css to stylesheet_categories_dressing.css.bak to avoid conflicts.
Activate the chcategories sidebox as described in readme_ch_categories.txt.
Uncollapsed Categories Tree by Christoph Handel (fragfutter) is included unchanged in this package. Thanks to Limelites for the initial discovery of its compatibility.

You will probably want to adjust categories settings in your Admin > Configuration > Layout Settings as detailed under "To display images in place of selected category names:", and at the bottom of this page.

NOTE: You will need to edit categories_dressing_defines.php in a text editor to specify the locations and other characteristics of some of your alterations.
Others will automatically be activated if the appropriate image file exists.

You will want to edit stylesheet_categories_dressing.css as shown below to give your alterations the appearance you desire.

You may also need to create images and add them to your /includes/templates/your_template/images/ and /includes/templates/your_template/buttons/english/ folders as noted below.

Application

To apply any of the following modifications, locate the defines shown in your categories_dressing_defines.php, duplicate and edit.

There are numerous examples set by default to display the mod's functions; you will probably want to turn many of them off for your situation. See the appropriate readme section for adjusting each function.
(To best understand all of the capabilities of this mod, you may want to install it on a test setup of Zen Cart with the demo products activated. All of the mod functions can be observed in this way, as the examples are coordinated with the demo products.)

In general, to make any heading, divider, subtext or grouping, copy one of the example defines and change the number to fit your category's cPath; then change or add values in the appropriate fields.
You can find the cPath by navigating to the desired category in your store and looking in the address bar at the top of the window.

All changes except for subtext will occur above the category you select.

The heading defines take this form:
define ('CAT_BOX_HEADING_#','group|divider/class|[imgname]|[imgalt][|headcontent|headclass][|headcontent|headclass]...');
Replace the # with the category's cPath, for example: 
 
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
The subtext defines take this form:
define ('CAT_BOX_SUBTEXT_#','subtext|subtextclass');
Replace the # with the category's cPath.
The category display-limiting define takes this form:
define('CAT_BOX_ACTIVE_LEVEL', 'active|highest_level|deepest_level');

To start a new <ul> list grouping at a specific point in the categories menu:

The first number in the "pipes" section '1|0||' controls the list grouping.
define ('CAT_BOX_HEADING_1','1|0||');//new list - no headings
When set to 1, a new list group will begin with the specified category, and continue until another group is defined. You do not need to have a heading for a group.
The group will have an id based on the cPath of the category at its head, like #catGroup48, which can be used to style and even move the group independently of the rest of the sidebox:
ul#catGroup48 {
    border: 1px solid #bd6699;
    background: #bbeeff; 
    position: relative;
    left: -1.3em;
    top: 0.2em;
    }
Leave this field set to 0 unless you specifically want to style a group starting with this category.
Note: All subcategory sets will automatically be given an id, which can be used for styling in the same fashion or ignored as you like.

To add a divider in a specific place in the categories menu:

The second number in the "pipes" section '0|1||' controls the divider for the given category. A "0" means no divider, a nonzero number indicates the style of divider you want.
define ('CAT_BOX_HEADING_52','0|1||');//divider only - style 1
define ('CAT_BOX_HEADING_53','0|2||');//divider only - style 2
The divider will be identical to the standard divider between categories and "All Products".
To make it different, uncomment this in your stylesheet and give it the properties you desire:
hr.catBoxDivider1 { 
    color: #aabbcc;
    }
If you want to add a differently styled divider elsewhere, enter "2" in the define. This will set the class to "catBoxDivider2"; style this in your stylesheet.
If you do not wish to use the divider feature, make sure the divider field '0|x||' in the define is 0.

To add a non-linked heading in a specific place in the categories menu:

After the first set of fields in the define '0|0||, add your desired heading text and its class identifier, both preceded by pipes | :
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)
You may specify two or more headings for a category, each with different styling. This can be useful for making "super groups".
You will get a non-linked heading with whatever styling you specify at the full width of the menu.
If you want to use an image as a heading, name it like cathead23.gif (replacing the 23 with your cPath) and insert the name in the image field and its alt text in the alt field; save the file in /your_template/buttons/english/.
(You can use any filename, but you may want to keep the format shown for consistency.)
The code will check to see if an appropriately-named file exists, and if so, display it; if not, display the alt text in the next field.
If you want to use a background image behind a heading, enter the text as usual, and adjust the stylesheet properties to call your desired bg image for that class.

In stylesheet_categories_dressing.css, modify as desired:
.catBoxHeading1 { 
    font-family: georgia, serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335511; 
    background-color: #ff66ff;
    /*background-image: url(../buttons/english/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    display: block;
    padding: 0.3em 0.4em;
    margin: 0;
    padding: 0;
    }
If you do not wish to use the heading feature, comment out any example defines which create headings on your site.

To add a non-linked heading to the all/featured/specials/new links:

Replace the number in a define with SPECIALS, NEW, FEATURED or ALL as required, and adjust the fields for the heading you want:
define ('CAT_BOX_HEADING_FEATURED','0|0|||Featured Heading|3');//no list break - text heading
Replace "Featured Heading" with your desired text.

If you want images instead of text for these headings, insert the name (like cathead-featured.gif) in the image field and save the file in /your_template/buttons/english/.
The code will check to see if an appropriately-named file exists, and if so, display it; if not, display the alt text in the next field.
The "Featured Products" link heading is enabled by default as an example; if you do not want a heading there, comment out its define.

To display non-linked subtext below any desired category name:

Duplicate the subtext define and adjust as desired:
define ('CAT_BOX_SUBTEXT_23','Subtext for cat 23 escape apostrophe\'s|1');//subtext - style 1
Be sure to put a \ before any apostrophes, to avoid confusing the code about where the definition ends.
Find in your stylesheet and adjust:
.catBoxSubtext1 {
    font-family:  'times new roman', serif;
    font-weight: normal;
    font-size: 1.2em;
    color: #335511; 
    background-color: #ffccff;
    padding: 0.1em 0.2em 0.1em 0.6em;
    }
If you do not wish to use the subtext feature, comment out the example define.

To display images in place of selected category names:

Make your images with names like catimg#.gif (or catbg#.gif and catbg#hover.gif), and save in /includes/templates/your_template/buttons/english/. If you want to use a hover effect you will need to use background images.
Replace the # with the category cPath.
The code will first check to see if an appropriately-named foreground image file exists, and if so, add it to the display.
If there is no foreground image, the code will check to see if an appropriately-named background image file exists, and if so, add a corresponding class name and hide the text.
Otherwise, the category name will display as usual in text.

Add this to your stylesheet_categories_dressing.css for each category cPath where you wish to use a background image:
#categories li a.catBg25 {
    background-image: url(../buttons/english/catbg25.gif);
    height: 30px;
    }

#categories li a.catBg25:hover {
    background-image: url(../buttons/english/catbg25hover.gif);
    }
You may want to change some settings in Admin > Configuration > Layout Settings to allow for images (the code does this for images, if you do not):

Categories Separator between the Category Name and Count     &nbsp; &nbsp; (set to nothing)
Categories Separator between the Category Name and Sub Categories     |_&nbsp; (you may want to set this to nothing, change it or leave as is)
Categories SubCategories Indent     &nbsp;&nbsp; (you may want to set this to nothing, or leave as is)

and in Configuration > My Store:

Show Category Counts     (set to false)

If counts are enabled, they will be hidden for images since they cannot display correctly together.

The image names should be in the form catimg3.gif or catimg21_57.gif, with the numbers matching the cPath for the category, and located in the /includes/templates/your_template/buttons/english/ directory.
The background image names should be in the form catbg3.gif or catbg21_57.gif, with the numbers matching the cPath for the category, and located in the /includes/templates/your_template/buttons/english/ directory.

If you do not wish to use the image feature, delete any matching image files.
If you do not wish to use the background image feature, delete any matching background image files.

To hide certain kinds of categories, like inactive, top or subs:

define('CAT_BOX_ACTIVE_LEVEL', '0|1|9');//hide top cats
or
define('CAT_BOX_ACTIVE_LEVEL', '1|0|1');//show only active cats, to first subcat level
Adjust the "active", "highest_level" and "deepest_level" field settings as shown above to display only the active top category and its subs, hide top cats, hide sub-subcats, or any combination.
Note that this can include "expanded categories" functionality, if the Uncollapsed Categories Tree mod in this package is installed.

Only uncomment and set this define if you want to hide cats based on active tree or level.

Bonus:

Directions for using the function built into tpl_categories.php to give specific categories their own styles:

(from /includes/templates/your_template/sideboxes/tpl_categories.php)
// 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;
Edit tpl_categories.php like this for each of your categories, giving it an appropriate name. Then find in your stylesheet_categories_dressing.css:
#categories li.cat-holiday a {
    border-top: 3px dotted #112233; 
    background-color: #aabbff; 
    color: #112233; 
    padding: 1em 0em;
    }
Duplicate for each category, adjusting numbers and adding or deleting properties as you desire (such as font or background-image).
Note that this as shown gives the category a divider above it which can be any CSS style/color/thickness desired.

Using your stylesheet:

If your current stylesheet applies styling to a.category-top, a.category-subs or a.category-products, you will need to replicate that styling for #categories ul a {} and #categories ul ul a {}.
If you are using Uncollapsed Categories Tree, replace #categories with #chcategories in all examples.

To display all top categories as colored boxes:

Find in your stylesheet_categories_dressing.css:
#categories ul a {/*top categories*/
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
    background: no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    }
Adjust numbers and add or delete properties as you desire (such as font, border or background-image).

background: #ffaadd; will give a color, and border: 1px solid #990066; will give a thin border to the box.
If you want subcategories styled differently from top categories, modify properties in the #categories ul ul a {} rule.

For a "rollover" effect to change the appearance on hovering:

Find in your stylesheet and adjust: 
/* top category hover effects*/
#categories li.cat-top a:hover {
    color: #dd6633; 
    background:  #ddeeff url(../images/catbghover.gif);
    } 

/* subcategory hover effects*/
#categories li li.cat-subs a:hover, #categories li li.cat-products a:hover {
    color: #aa9966; 
    background: #ffb9ff url(../images/catbghover.gif);
    }

For bullets in front of category names:

Find in your stylesheet and adjust list-style: 
#categories ul a {/*top categories*/
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
    background: no-repeat;
    border: none;
    margin: 0;
    padding: 0;
    }
To change the bullet when a category is open to subs, find and adjust:
/*change  bullet when a category w/o bg image is open to subs:*/
#categories li a.cat-parent-text {
    list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
    }
To give the all/featured/new links a different bullet, uncomment and adjust:
/*different bullet for links if desired*/
/*
#categories li a.category-links {
    list-style: disc inside url(../images/bullet4.gif);
    }
*/
To give bullets to subcategories, find and adjust:
#categories ul ul a {/*subcategories*/
    display: list-item;
    list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
    background: #ffddbb;
    border: none;
    margin: 0;
    padding: 0;
    }
For subcat bullets, you will want to change some settings in Admin > Configuration > Layout Settings:

Categories Separator between the Category Name and Sub Categories     (set to nothing)
Categories SubCategories Indent    (set to nothing or as desired; the ul list code will handle indents)

Bullet images may be named as desired and should be located in the /includes/templates/your_template/images/ directory.
The above rules limit their effect to the categories sidebox. If you want to affect the Categories-Tabs menu or the Documents box, add/change styling to suit your taste.