Categories Dressing

[mthem2003]

Help Please: site: www.thepurseworld.com

I am trying to add a dotted line between the categories,

for some reason , the "Barbara Bui" Category becomes a white box, and the "Gucci" Becomes an image.

Please see screenshot

i am not sure what to comment out from the tpl_category
here is mine:

==================
<?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.2 by Glenn Herbert (gjh42) 2008-02-25
*/
//$disp_block = '';
$disp_block = ''; //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-holiday';
// 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
//9,25,27,62,31,35,60,43,37,29,11,1,3,39,33,41,81,69,5,7,15,17,19,13,45
if(in_array($current_path, explode(",",''))) { //replace numbers with your cat ids separated by commas
$content .= '<hr class="catBoxDivider" />';
}
// categories dressing - add (divider and) heading above a cat
//switch ($current_path) {
//case '': //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') . $disp_block_head) ;
//break;
//}
// categories dressing - category name mods
$cat_name_display = $box_categories_array[$i]['name'];
$cat_name_display = $box_categories_array[$i]['name'];
// $subcat_level = (substr_count($current_path, '_'); //strip out subcat indent
// $cat_name_display = substr_replace($cat_name_display,'',0,($subcat_level*strlen(CATEGORIES_SUBCATEGO RIES_INDENT)));
$cat_img_bg = '';
// categories dressing - display image if exists for category name - with title tag
if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif')) {
$cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif', '', '', '', 'title="' . $box_categories_array[$i]['name'] . '"');
// categories dressing - display background image if exists for category name - with title tag
} elseif (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg' . $current_path . '.gif')) {
$cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'pixel_trans.gif', '', '100%', '100%', 'title="' . $box_categories_array[$i]['name'] . '"');
$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>';
?>
==================

[busyMom]

Thanks for the info, Kuroi (and Glenn). I haven't been involved in coding enough recently to be thinking forward to optimization issues since losing all my brain cells during childbirth years ago! I'm just doing enough to get by, creating my own site right now, so I definitely appreciate all the help I can get!

As I mentioned earlier, this code is actually the vanilla 1.3.8a code, not in the code I changed, so if the performance gain is worthwhile you might want to throw this into the 1.4 bucket of upgrades if that eventual version doesn't completely overhaul this code. I might make the change in my own code since I've already got the vanilla code overridden for my changes, just because every little bit helps!

Thanks again for your support, Glenn and Kuroi!

[mthem2003]

Ok, you have a Template Monster template, which has added a bunch of code to the stock file, and changed how the contents are built.

If you tell me which Categories Dressing feature you are trying to use, I can probably tell you how to integrate it with this template.

I think the issue is that TM has modified the categories to display as an unordered list, and when you merged/replaced code that got eliminated.

Thank you for your response.

I am looking for something similiar to : the attached screenshot

1. a dotted line between each category (as shown)
2. a custom made arrow beside each category ( as shown)
3. to be able to hover over the category and the text becomes red

thats it :) and disable everything else.

[miles]

Does anyone have an example on how this mod really work?

I have installed it but not sure how to use it. I tried to modify the codes in the tpl_categories.php just to add another "Link Heading" to but nothings change.

Any step-by-step tips?

[gjh42]

Miles: Have you read the readme.html file? Open it in your browser for best results.

Post a link to your site and indicate exactly what you want to do and where, and I can give some pointers.

Mthem: You appear to have solved the Barbara Bui and Gucci problems (I don't see anything wrong in Firefox.)

For the dotted lines, there are a couple of ways to do it. You can find in stylesheet_categories_dressing.css this declaration

#categories a {
    background-repeat: no-repeat;
    display: block;
    }

and add
border-bottom: 1px dotted #6699aa;
to get

#categories a {
    background-repeat: no-repeat;
    display: block;
    border-bottom: 1px dotted #6699aa;
    }

This will put a dotted line beneath every category and subcategory. You would then want to turn off the "Categories Separator Between Links" in admin > Configuration > Layout Settings.

Or you could correctly add your list of categories (in the comment in your posted tpl_categories) to the explode() function. I'm not sure how your SEO mod will interact with these, but you probably need to use the actual cPath for each category, not just its id.

[mthem2003]

For the dotted lines, there are a couple of ways to do it. You can find in stylesheet_categories_dressing.css this declaration

#categories a {
    background-repeat: no-repeat;
    display: block;
    }

and add
border-bottom: 1px dotted #6699aa;
to get

#categories a {
    background-repeat: no-repeat;
    display: block;
    border-bottom: 1px dotted #6699aa;
    }

This will put a dotted line beneath every category and subcategory.

Thank you for your reply.

Is there a way to add an image of a dotted line instead of having it draw it for me. since IE and firefox give two different looking dotted lines.

[miles]

How to disable default 'cpath 3' category in tpl_categories.php from displaying as image (CAT 3 SAMPLE)?

[gjh42]

Delete the example image (catimg3.gif if I recall correctly) from your /includes/templates/your_template/images/ folder.

[gjh42]

Mthem:
If you have no other background image for the individual categories, you can make a dotted line image with transparent background and add it to the link:

#categories a {
    background: url(../images/dottedline.gif) bottom left repeat-y;
    display: block;
    }

[Sckwooral]

ran across this thread and I think it's exactly what I need but I can't seem to get the image rollover buttons to work for the TOP Category Navigation. It wasn't working at all until I turned ON a category sidebox and now the buttons and hovers show up but I want them to be only for the TOP - I intend to not have any sidebox categories for the homepage.

Here's my attempt:
http://www.infullfig.com/
I left the sidebox in just to prove the rollovers work.

I think I'll have to make the changes to the:
A.category-top
in the CSS but I'm not sure, following your example, how to do this.
Probably change the display "block" to display "inline"...

Will I need to add anything to the sidebox/tpl_categories.php

Thanks!