Categories Dressing

gjh42,
when will you release the new version?

Is it possible to do the following:

On the top level I will have a vehicles category and and under this a list of makes and models.

I would like to display only makes or models (not decided yet) on this sidebox and keep the standard one with all categories. I can copy the required standard one so that shouldnt be an issue.

It's just the required config to display only x that i'm struggling with.

Any help much appreciated.

I have managed to get the original category working under the normal Categories heading as shown here:
http://www.rstuning.co.uk/zentest/index.php

The Vehicles sidebox is the Categories Dressing sidebox with pretty much default config.

Fingers crossed this will work :smile:

I am having a very odd problem that is driving me NUTS!

http://www.allforyourwedding.com/

bullet1.gif will not go away!

I changed

bullet2.gif to blank, bullet3 and as you can see cathover is now
white...

I tried clearing my browsers cache,
I searched the entire directory for other instances of bullet1

I re-wrote, deleted the file....

I cant get my head around this...

Your Template Monster template used a background image for the list marker, and its rule still applies to the Cat Dressing items regardless of list-item styling:

stylesheet_boxes.css (line 83)

#categories li {
background: url("../images/list_background1.gif") no-repeat scroll 0 7px transparent;
color: #0562A9;
font-size: 12px;
font-weight: normal;
line-height: 16px;
padding-left: 0;
text-decoration: none;
}

pmurray - Sorry, didn't see your post earlier. For the "Vehicles" sidebox, you can define a category group for category 75 (Vehicles), and add to your stylesheet

#vehicles #catGroup67 {display: none;}

to hide all other top categories.
There is no such ability with the other sidebox, but if you install the ch_categories option bundled with Categories Dressing, you can enable the chcategories sidebox and use a rule

#chcategories #catGroup75 {display: none;}

to hide the Vehicles top cat in that box.

It's not entirely clear from looking at your site which elements you are currently using, so this advice may need a little tweaking.

Hello,

I'm using the CSS flyout menu for my sidebox categories.

I'm trying to style individual categories. For example, one category is "flame-resistant". I'd like to give it an orange background.

I've tried the instructions in the tpl_categories.php about styling individual categories, but I didn't see any changes. I assume it's because of the CSS flyout menu in place?
Here is my tpl_categories.php :
##########################################################################################_

<?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 $ */ $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=4'): $new_style = 'category-flame'; 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'; } 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 { $content .= '<a class="' . $new_style . '" 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">' . $box_categories_array[$i]['name'] . '</span>'; } else { $content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>'; } } else { $content .= $box_categories_array[$i]['name']; } if ($box_categories_array[$i]['has_sub_cat']) { $content .= CATEGORIES_SEPARATOR; } $content .= '</a>'; 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 .= '<br />' . "\n"; } } 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 .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />' . "\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 .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />' . "\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 .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />' . "\n"; } } if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') { $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n"; } } $content .= '</div>'; ?>

##########################################################################################____

And here is my tpl_categories_css.php for the flyout menu:

##########################################################################################_

<?php // // +----------------------------------------------------------------------+ // |zen-cart Open Source E-commerce | // +----------------------------------------------------------------------+ // | Copyright (c) 2003 The zen-cart developers | // | | // | <http://www.zen-cart.com/index.php> | // | | // | Portions Copyright (c) 2003 osCommerce | // +----------------------------------------------------------------------+ // | This source file is subject to version 2.0 of the GPL license, | // | that is bundled with this package in the file LICENSE, and is | // | available through the world-wide-web at the following url: | // | <http://www.zen-cart.com/license/2_0.txt>. | // | If you did not receive a copy of the zen-cart license and are unable | // | to obtain it through the world-wide-web, please send a note to | // | [email protected] so we can mail you a copy immediately. | // +----------------------------------------------------------------------+ // $Id: tpl_categories_css.php 2004/06/23 00:00:00 DrByteZen Exp $ // $content = ""; $content .= '<div id="nav-cat">'; $content .= $menulist; // see the modules/sideboxes/YOURTEMPLATE/categories_css.php for this if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true'){ $content .= ''; // insert a blank line/box in the menu if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') { $content .= '<ul class="level1"><li><a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a></li></ul>'; } if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') { $content .= '<ul class="level1"><li><a href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a></li></ul>'; } 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 .= '<ul class="level1"><li><a href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a></li></ul>'; } } if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') { $content .= '<ul class="level1"><li><a href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a></li></ul>'; } } $content .= '</div>'; // May want to add ............onfocus="this.blur()"...... to each A HREF to get rid of the dotted-box around links when they're clicked. // just parse the $content string and insert it into each A HREF tag ?>

##########################################################################################___

I'm wondering whether it's possible to incorporate code from tpl_categories.php into tpl_categories_css.php to allow for individual styles for categories.

If so, could anybody show me how to do so? Am I even on the right track?

I hope I'm making sense, I'm still very new to zencart but am loving it!

By the way, I'm using zencart 1.3.9 and my website is imuniforms.com.

Thanks!

This question as stated is not related to Categories Dressing in any way, as you are trying to put code from the stock categories sidebox into the flyout categories sidebox.

However, Categories Dressing can be styled as a flyout menu, and can be given a unique background for one category, by following directions in its readme and in more recent posts in this support thread.

Woops. OK.

Thanks for your reply.

Hello Glenn,

I have installed the categories dressing module.

I've been able to make my menu fly out. However, I've tried modifying the CSS to reflect at least the font colors and backgrounds of my previous flyout menu.

I don't really know what I'm doing because these changes didn't do anything. Am I missing something simple?

Here is my website: http://n13967.com/imjen/

My goal is to make the bottom menu (the categories dressing menu) look as close as possible to the flyout menu above it. Except, of course, I'd like to have the Flame Resistant category and others to come beneath it, to be separated from the top categories and having a different background color. Essentially, two different menus.

Is it possible to achieve the look I want, and could you point me in the right direction?

Thanks for all the replies and help you've given throughout this forum.

Any advice you can give me is greatly appreciated!

Thanks,

StillANewZenner

The first problem you have is that your stylesheet_chcategories_dressing.css is actually a personalized copy of stylesheet_categories_dressing.css renamed, and because all of the rules start with #categories instead of #chcategories, none of them apply to your sidebox. I'm not sure where that file came from, but you need the correct standard version to start with. The correct stylesheet_chcategories_dressing.css is packaged in the Categories Dressing zip (ch_category folder).

I see that you have started to define the category group for category 4 Flame Resistant and following; you need to correct the define for that, as there are unwanted heading elements showing.

You can definitely replicate the style of the flyout menu. Once you have the basics in place, some of the flyout stylesheet rule declarations can be adapted to Categories Dressing.

Hello,

Wow, this is a very useful module-- too bad my knowledge of CSS isn't really enough to make full use of it!

However, I've gotten what I wanted except for one thing. I'd like to have the flame resistant top category to have a background image.

I made my image, named it catBg4.png and saved it into the buttons/english folder with the other cat images. The only thing I did in defines was change the image extension from .gif to .png.

This is what I did in CSS:

#chcategories li a.catBg4 {
background-image: url(../buttons/english/catBg4.png);
background-repeat:no-repeat;
}

The result is no image for my category although its background color is changed as well as the background color of its subcategories when hovering (although I did give them their own defines and styles).

I'm learning that things don't just work at times and then not at others--there's always a reason. I know there's a simple mistake or rule that in the code that I'm missing, I just don't know what!

If you could just quickly point out what I'm doing wrong, I'd be very grateful, thanks a whole bunch for already have taken the time to help me.

Thanks again!

catBg4.pngImage filename lookups are configured to be lowercase, so you would need to change this to catbg4.png if you want the background image to be substituted for the text. Only stylesheet tags use camel case.

If you just want the background behind the standard text, don't give it a keyword name, just something like fr-bg.png.
You can get the distinct styling without making "special categories", by making a define for catGroup4 (as you had originally, but with some incorrect heading tags). Use this as your model:php define ('CAT_BOX_HEADING_1','1|0||');//new list - no headings php define ('CAT_BOX_HEADING_4','1|0||');//new list - no headings Now you can add rules for #catGroup4 {}, like```
#catGroup4 li {background-image: url("../images/fr-bg.png");}

gjh42:

pmurray - Sorry, didn't see your post earlier. For the "Vehicles" sidebox, you can define a category group for category 75 (Vehicles), and add to your stylesheet

#vehicles #catGroup67 {display: none;}

to hide all other top categories.
There is no such ability with the other sidebox, but if you install the ch_categories option bundled with Categories Dressing, you can enable the chcategories sidebox and use a rule

#chcategories #catGroup75 {display: none;}

to hide the Vehicles top cat in that box.

It's not entirely clear from looking at your site which elements you are currently using, so this advice may need a little tweaking.

Basically I am using your version of tpl_categories.php

I would like to select a sub cat with my vehicle list to show under vehicles if possible?

I see this in the php file
$skip_cat = 0;
$skip_cat = cat_active_level_manage($current_path);
if ($skip_cat or 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)) {

Is there any way to edit that to select a certain sub cat folder?

Trying to figure out how it all works but not getting very far :unsure:

I have not really added my categories as such, only test ones so if i need to re-do all that it's not an issue.

Also my original categories is still pointing to the original tpl_categories but a renamed version to make the two sideboxes totally seperate.

Hope you can help.

Paul

to select a certain sub cat folder? What do you mean by this? Do you want a certain subcat of Vehicles open all the time, but not others??
If you have the chcategories option installed, and the display settings for only certain subcats (like "active tree") to show, you could add a test in the function file switch for the appropriate case to show that subcat regardless of other circumstances.

To show the different top cat groups in different boxes, the easiest way is as I described above. If you want the boxes in the same column, you can also just make the appearance of two boxes in the one sidebox using "category groups" and hiding the outer sidebox container - see the readme for details.

Hi Glen.

I've just noticed an odd effect in IE in compatibility view on the categories:

http://www.silkblooms.co.uk/

Do you see the excessive gaps between "coming soon", "Hire Products", "All Wedding Flowers" and "Colour Filter"? All the bold ones that is.

Weird. It's not happening in any other browser, just IE in compatibility view. Can you see what might be causing it?

gjh42:

Image filename lookups are configured to be lowercase, so you would need to change this to catbg4.png if you want the background image to be substituted for the text. Only stylesheet tags use camel case.

If you just want the background behind the standard text, don't give it a keyword name, just something like fr-bg.png.
You can get the distinct styling without making "special categories", by making a define for catGroup4 (as you had originally, but with some incorrect heading tags). Use this as your model:php define ('CAT_BOX_HEADING_1','1|0||');//new list - no headings php define ('CAT_BOX_HEADING_4','1|0||');//new list - no headings Now you can add rules for #catGroup4 {}, like```
#catGroup4 li {background-image: url("../images/fr-bg.png");}

Thank you much!

I have the images in place...now just one more thing.
I would like to move the text for the Flame Resistant category a little to the right so that it's not sitting on top of the image. I'm thinking this might be done by giving it some left padding or margin.

I can't figure out how to make this margin apply to the text only. Currently, I'm trying this in my CSS:

#chcategories li.cat-special_style2 a.cat-not-selected {margin-left: 10px;}

It's not taking affect.

Please excuse my ignorance, I think this will be the last thing :blush:

jenchord:

I have the images in place...now just one more thing.
I would like to move the text for the Flame Resistant category a little to the right so that it's not sitting on top of the image. I'm thinking this might be done by giving it some left padding or margin.

I can't figure out how to make this margin apply to the text only. Currently, I'm trying this in my CSS:

#chcategories li.cat-special_style2 a.cat-not-selected {margin-left: 10px;}

It's not taking affect.

Please excuse my ignorance, I think this will be the last thing :blush:

Sorry, I don't know how I got this .cat-not-selected.

This is how the CSS looks:

#chcategories li.cat-special_style2 a {margin-left: 10px;}

And it is taking affect, just not the one I wanted.

I suppose I actually have to define a heading for category Flame Resistant to apply positioning rules to its text?

Use padding instead of margin to get the text moved in from the edge of the background.