Categories Dressing

My zen-cart store is open, secure socket layer in place and have had 35 sales so far .. whee, but I have a few niggling things that bug me and hope you can help.

1) When my text is too long in the categories column it moves down a line to the left .. anyway to get it to move to the right or center without having everything move? I have abbreviated but too much and it gets confusing as to WHAT I'm abbreviating.

2) On the categories page how can I get the text to move away from the category image? Right now it's right next without any spacing

3) How do I change the size of the popup window to match the image exactly? Right now there is a gap between the bottom of the image and the bottom of the popup window.

Beth-Katherine
https://www.smockingbooks.com

Thanks for your help.
Now I ran into situation; please have a look:
http://yhyonline.com/catalog/

Where could I have done wrong or where sould I change?
Any ideas?

Thanks!

Hi,

Please forget about my previous question.

Now I have a different question:

I tried to make the "MEN'S JEWELRY" a different background color. I named the style "category-mens" and here is my CSS:

a.category-mens-text:hover {
	background-color: #000033;
	color: #ffffff;
	margin: 0.2em 0  0 0.2em;
	padding: 0.2em 0.3em;
	}
	
a.category-mens-text { 
	background-color: #003366;
	color: #dddddd;
	margin: 0.2em 0  0 0.2em;
	padding: 0.2em 0.3em;
	}

On IE the square (list style) before "MEN'S JEWELRY" disappeared and on Safari all squares are gone. Where could the problem be?

Thanks.

Beth-katherine: None of your questions are related to Categories Dressing, but here goes:

1. If the category markers were list-item elements, you could change list-style-position: from inside to outside. But you are using Better Categories, which places the markers as foreground images inline at the beginning of the category name text. There is one way to achieve what you want, by tricking the category name. Add this to your stylesheet:

.betterCategories a.category-top { text-indent: -1.8em; padding-left: 1.6em;}

This will move the beginning of each text element to the left, and add padding to shift the whole thing back to the right.

2. For space above the listing image, add this to your stylesheet:

.listingProductImage { margin-top: 1.0em;}

Adjust to taste.

3. I found the file where this is set once a long time ago... best to post this question in a more appropriate place where those who know may see it. If I can, I'll try to answer the question there.

e81ny: First, you have a hanging comma after a.category-links which invalidates the entire list-item declaration:/* bullet for top categories & links:*/ a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links, { display: list-item; list-style: square inside ; }Second, you need to include your individual category name in the list:```
/* bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links, a.category-mens-text .category-not-selected, a.category-mens-text .category-subs-selected {
display: list-item;
list-style: square inside ;
}

3. I found the file where this is set once a long time ago... best to post this question in a more appropriate place where those who know may see it. If I can, I'll try to answer the question there.

Thank you so much for answering my questions, I will work on implementing them. I don't know why I keep asking my questions in the wrong spot but I've tried to get answers elsewhere with no luck.

Thanks again,

Beth-Katherine

Hello,

I am having a hard time adding multiple non-link headings. My first heading shows up fine, but the other one does not. Below is the code i modified!

Your help is appreciated!

Thank you!

// categories dressing - add (divider and) heading above a cat
switch ($current_path) {
case '168': //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 - add (divider and) heading above a cat
switch ($current_path) {
case '139': //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;
}

You do not duplicate the entire switch statement; you duplicate the "case ... break" section of the statement for each case you have:```php
// categories dressing - add (divider and) heading above a cat
switch ($current_path) {
case '168': //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;

case '139': //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 2</span>' . $disp_block_head) . "\n";
break;
}

gjh42:

You do not duplicate the entire switch statement; you duplicate the "case ... break" section of the statement for each case you have:```php
// categories dressing - add (divider and) heading above a cat
switch ($current_path) {
case '168': //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;

case '139': //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 2</span>' . $disp_block_head) . "\n";
break;
}

 
 
:clap:THanks! works perfectly!

I'm having the hardest time trying to figure out how to get my sidebox menu looking like this.

*see attached image

Can I get a nudge in the right direction? I just need to know what to edit and where & in what file.

I have the Categories Dressing Mod installed, that's it.

Thanks in Advance!
Len

Here's my tpl_categories.php file. Please show me where and what places to edit.

<?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.1 by Glenn Herbert (gjh42) 2008-01-01 */ $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-Holiday1'; 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="catBoxPearls">' . (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']; $cat_img_bg = ''; // categories dressing - display image if exists for category name if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif')) { $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif'); // categories dressing - display background image if exists for category name } elseif (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg' . $current_path . '.gif')) { $cat_name_display = ''; $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>'; ?>

The site is located here: 72.167.78.125

Thanks,
Len

This is the part you will edit to get the headings:```php
// 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="catBoxPearls">' . (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;
}

Navigate to the category that you want to appear just below the heading, and see its "&cPath=xx" in the address bar at the top of your window. Put the number part of that in the case 'xx': statement. 

Replace Heading 1 with your heading text - leave the quote ' in front of it.

If you are using an image file for the heading, name it catheadxx.gif and save it in /includes/templates/your_template/images/.
```php
// 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="catBoxPearls">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Cat 23 Heading</span>' . $disp_block_head) . "\n";
break;

case '69': //replace number with your desired cPath
$content .= '<hr class="catBoxDivider" />' . "\n"; // to add divider uncomment this line
$content .= '<span class="catBoxPearls">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Cat 69 Heading</span>' . $disp_block_head) . "\n";
break;
} 

I need help guys, I want to delete this line:

What I can do guys? :(

maclancer:

I need help guys, I want to delete this line:

Set the value for "Categories Separator between links Status" to 0 in the Admin > Configuration > Layout Settings menu.

Thanks a lot, I have another question, can I add this mod to the "information" section? It is possible? how to do it?

It should be possible to make a similar mod for the information sidebox, but it would require mostly new code tailored to that box.

Glenn,

Okay. I got the static headings to work as you explained above. I have a question:

If the Top Category heading is 'static' shouldn't its SubCategories appear under it? It looks like it repeats itself.

Pearls (Static Top Category-Non-Linked)
Pearls (Should not be here/redundant)****
Fresh Water Pearls *( Should be a sub-category linked to Pearls)
Abalone *( Should be a sub-category linked to Pearls)
Mother of Pearl Shell *( Should be a sub-category linked to Pearls)
River Shell *( Should be a sub-category linked to Pearls)
South Sea Shell Pearls *( Should be a sub-category linked to Pearls)

I want it to look like this. SubCategories appear underneath non-linked items:

Pearls *(Static Top Category-Non-Linked)
Fresh Water Pearls *(Links to section)
Abalone *(Links to section)
Mother of Pearl Shell *(Links to section)
River Shell *(Links to section)
South Sea Shell Pearls *(Links to section)

Glass Beads *(Static Top Category-Non-Linked)
Example *(Links to section)
Example *(Links to section)
Example *(Links to section)

Take a look at fusionbeads.com. I want my main menu to look like theirs. Any help would be appreciated greatly!

Thank you,
Len

The non-linked headings are not the actual category names, they are just additional text.

If you don't want the top categories to be clickable, there is no benefit in the sidebox to having the subcats structurally organized under anything. They can all be top cats, given an explicit sort order in admin so the headings show in the correct places.

For the breadcrumb display, you might want the top cats active, and also for handling in admin. It should be possible to tweak the categories sidebox code so that if a top cat is being processed, only text is generated, not a link. Then you would not need the additional non-linked headings.

2 Questions.

1. Sometimes my Category name goes to 2 lines.

   Cookies, Chocolates &
   Sweet Favors

I am trying to make it look like:

  Cookies, Chocolates &
    Sweet Favors

2. When I click on a category it opens up to the sub categories just fine.
   but what I wanted to know if there was a way to click on the category again
   and have them close back up again.

The mod is on my https://www.allforyourwedding.com site

The page display doesn't show whatever you intended for your desired example, but I would guess that you want to have the second line of the subcat indented for clarity.

There is not an easy way to do that exactly (that I can think of now anyway), but you can easily make the distinction with line spacing.
Modify your stylesheet declaration to look like this:```
a.category-subs-text, a.category-products-text {
/background-color: #ff69ff;/
color: #6699aa;
line-height: .9em;
margin: .5em 0;
/padding: 0.2em 0.3em;/
}

The line-height will set the line spacing of subcats closer, and the margin will add back space between different subcats. 

Adjust to taste.


The re-collapsing function is not available without some kind of custom coding, if at all.