Categories Dressing

Help Please: site: https://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_SUBCATEGORIES_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>'; ?>

==================

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 :wacko: 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! :hug:

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!

gjh42:

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.

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?:dontgetit

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

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.

gjh42:

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

> 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.

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

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

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

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!

Categories Dressing is intended only for the sidebox - it does not affect the categories-tabs menu in the header. The code could be transplanted from tpl_categories.php to the cat-tabs file (/includes/modules/your_template/categories_tabs.php), with some reconfiguration. Of course, not all of the features are applicable since the cat-tabs only deal with the top categories.

Hey Glenn-
First, thanks for the teriffic mods and all of your support. You have made a couple of projects very easy for me! A quick question about categories dressing / image titles. I need to have the main category in my sidebar as an image at the top of the sidebox as a link. If my main categories are:
Computers
Phones
Stereos
TVs

when I am in phones (cPath=2) the image at the top of the list would be for phones and would link back to the cat main page if I went to a sub cat within phones. Can this be accomplished with either mod? I don't want the cat names to be images within the nav list when I am in any other category.
Thanks again.

That's a tricky one. Neither of those mods will do what you want without additional coding. Smart Backgrounds can make a per-category background image in any element you desire, but it can't do anything about links.

Where exactly do you want the image to show? Replacing the box heading? Or below the heading at the top of the box contents? And do you still want all the regular top & subcat names to show?

I was hoping for the image to show above the categories (I don't have the title for the sidebox showing). I guess I will look at the smart backgrounds mod which I use for another site (Thanks!) for the headers. If I can't link them I won't sweat it - the main cat links will still be active.

If you add padding-top and the background-image to #categoriesContent in your stylesheet, you should get the per-category image at the top of the box area with the categories below it.

I also tried to use smart backgrounds to change the .leftBoxHeading by adding:

.smartBG_1 .leftBoxHeading {background-image: url(../images/smartbg_1.gif);}
.smartBG_2 .leftBoxHeading {background-image: url(../images/smartbg_2.gif);}

to your stylesheet while taking out the background image from the main stylesheet. That didn't work. Should it? Thanks.

It should work in the absense of any higher-priority declaration overriding it. I would have to see your stylesheet on your site to diagnose it.

Please have a look - your advice is very helpful:

http://209.85.34.212/index.php?main_page=index&cPath=2

http://209.85.34.212/index.php?main_page=index&cPath=1

Thanks!

I have to say I can't see any reason why it wouldn't work.
The image is in the right place with the right name to trigger the .smartBG_2 class tag, but it isn't doing it. The code is there, because you have a .smartBG tag. Can you post the relevant section of tpl_main_page.php? I have to leave now, but will check back when I get a chance.

Your last post helped me figure it out. I recreated the tpl_main_page.php and removed (not commented) the original code and it works now! Thanks for looking at this and pointing me in the right direction.