Categories Dressing

There is a class to indicate that a category is active (selected, or the ancestor of a selected category). It would need to be combined in the stylesheet with the individual category id class, which is acceptable CSS practice, but which older versions of IE (IE6 at least) can't cope with.

You can add .cat-parent and .cat-selected to the rule like this:

#categories li a.catBg68.cat-parent, #categories li a.catBg68.cat-selected {
    background-image: url(../buttons/english/catbg68active.gif);
    }
```This covers the possibilities of cat 68 being selected itself, or being the parent of a selected category. If it has no subcats, you can skip the whole #categories li a.catBg68.cat-parent, part.

Hi
I dont think i have understood it correctly. So do i add this code to the cat dressing css or the template css? If cat dressing css i presume i add it in the same place as the other catbg#.gif codes but if its in the template css where about would i add it?

cheers and thank you ever so much for all the help

Ok i have managed to sort it. But it only worked when i saved the catbg#active.gif image in the images folder. Even when i had the image location set to /my_template/buttons/english the images would not work. So i changed the place of the images to the /my_template/images directory without changing the css code and it worked. So i went and changed the css code to match so i dont get confused when i go over it again.
cheers

Hello Glenn:

First my thanks for creating this mod, by the looks of this thread, it is very popular.

Second, I appreciate the speed and patience you have demonstrated throughout the thread. I've spent a lot of time trying to read through all these posts.

Here's my questions:
I'm using zc v1.3.8a. I've installed the relevant bugs for this site. I'm trying to keep the design clean and free of sideboxes so I'm using the default category tabs.

Before I make the decision to install Categories Dressing, I'm wondering if your mod can do what I need.

in essence, I want

• the 1st level categories, currently using tabs, to maintain their rollover state of white bg when navigating within that category - see image
• the 2nd level categories to be dynamic but plain text (not linked) and placed in Content area - see image
• list 3rd level categories as links below 2nd level.
• if possible, I'd also like to have the What's new and Specials added to the list of 1st level categories as it would naturally appear in a sidebox.
• lastly, and not at all related, but someone might know the answer to this question. I'm using wholesale (read brand) filter for the first time. i'm noticing that when one selections a brand option, it takes the user back to the home page. it seems the index.php part of the URL is missing. where can this be fixed?
  I have never used category tabs before or a sidebox free layout, and I'm finding it a little disconcerting. My skills are decent, as you can see from the site, this is my design and I did all the work in creating this template. Although I can move code and modify somewhat, I'm NO PHP coder :unsure:

Attached image.

Hi:

can anyone help with my questions? i posted 2 days ago and have not heard back. anyone?

Two days ago? I think less than 24 hours ago. I've been working on answers for you.

First, Categories Dressing by default does not affect the categories-tabs menu at all. Many of its styling rules could be applied by adding the cat-tabs selectors to the Cat Dressing rules.

The tricky part may be getting the categories sidebox (which is what Cat Dressing controls) to display without having a visible side column. It may work to set (Configuration > Layout Settings) Column Width Left and Column Width Boxes Left to 0. Then make #categoriesHeading {display: none;} and eliminate any border or bg color in #categories {} and #categoriesContent {}.

You can make the cat-tabs work as you want right now by changing your stylesheet like this (add parts in red):```
div#navCatTabs { height: 2.5em; position: relative; bottom: -0.3em;}

#navCatTabs ul
{
margin: 0;
padding: 0;
z-index: 10;
height: 2.5em;
}

#navCatTabs ul li
{
display: inline;
font-size: 1.1em;
float: left;
list-style: none;
color: #7597A6;
background-color: white;
margin-right: .25em;
}

#navCatTabs ul li a:link, #navCatTabs ul li a:visited
{
padding: .5em .75em;
color: #fff;
background-color: #7597A6;
border-color: #8FBAC9 #8FBAC9 white #8FBAC9;
border-width: 1px;
border-style: solid;
text-transform: uppercase;
display: block;
}

#navCatTabs ul li a:hover
{
color: #7597A6;
background-color: #fff;
text-decoration: none;
}

#navCatTabs a.category-top .category-subs-selected {
display: block;
padding: 0.5em 0.7em;
margin: -0.5em -0.8em -0.5em -0.7em;
color: #7597A6;
background-color: #fff;
text-decoration: none;
}

You will be able to hide top categories in the sidebox, and position the sidebox content, using the controls available with Cat Dressing. I don't think it will be possible to disable the first level subcat links without some code modification; there may be a workaround, but I would have to experiment to find it.

Glenn:

First, my apologies. I sometimes get impatient and forget that I'm not the center of the universe ;)

Second, I'll try your suggestions. I've been able to move some sidebox functionality into the content area, so I'll first move the categories sidebox where I want it, then I'll install and apply your mod. Adding mods can sometimes be overwhelming if you don't understand their full impact / purpose.

I'll keep you posted on my progress. if I make this work, i will share my solution.

thanks for taking the time to formulate an answer.

For the What's New and Specials, you would need to copy some code from tpl_categories.php to the cat-tabs code area. There are tests involved in making the correct display, so it's not just a matter of pasting in a couple of links.

Hi Glenn:

the css for tabs looks great! thank you.

as to adding the What's New and specials tabs, here's what I did:

I copied lines 63 to 83 inclusive from includes/templates/deault/sideboxes/tpl_categories.php and pasted it into includes/templates/custom/templates/tpl_module_categories_tabs.php

As mentioned, i'm no PHP coder, so I'm know my syntax and / or placement are the reasons it's not working.

So, for tabs the original code was:

  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
?>
<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?>
<div id="navCatTabsWrapper">
<div id="navCatTabs">
<ul>
<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li><?php echo $links_list[$i];?></li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
```the new code is:

include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
?>

<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?> <div id="navCatTabsWrapper"> <div id="navCatTabs"> <ul> <?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?> <li><?php echo $links_list[$i];?></li> <?php } 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) { ?> <li><?php $content .= '<a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>';?></li> <?php } } 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) { ?>
  <li><?php $content .= '<a href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>';?></li>

<?php } } ?> </ul> </div> </div> <?php } ?> ```is this something you can help me with or should I be posting elsewhere for this?

thanks again

gjh42:

The tricky part may be getting the categories sidebox (which is what Cat Dressing controls) to display without having a visible side column. It may work to set (Configuration > Layout Settings) Column Width Left and Column Width Boxes Left to 0. Then make #categoriesHeading {display: none;} and eliminate any border or bg color in #categories {} and #categoriesContent {}.

You will be able to hide top categories in the sidebox, and position the sidebox content, using the controls available with Cat Dressing. I don't think it will be possible to disable the first level subcat links without some code modification; there may be a workaround, but I would have to experiment to find it.

Glenn:
Thank you for taking the time to work with me. Sometimes I take on more than I can chew. I've installed your Mod and will attempt to make some sense of it.

in Configuration > Layout settings, i have the following:
Column Width - Left Boxes 130px
Column Left Status - Global 1 - my left column is being used for the binder rings image.
Column Width - Left 130px

Column Width - Right Boxes 0
Column Right Status - Global 0
Column Width - Right 0

so I only changed the following:
Column Right Status - Global 1

in Tool > Layout box controller, I don't currently have the categories turned on. if I turn on single column, it does nothing. So I turn on right column.

I have set
#categoriesHeading {display: none;)
#categories {} and #categoriesContent {}

The categories are now showing outside the centerContent area, but are not properly listing the sub categories.

I had created the level 3 categories before the level 2 for Books and Patterns, and then moved the level 3 under level 2. so the ID may be mixed up?

I'm not usually dense, but the instruction on grouping in your readme, well, is confusing.

I take it that there is no interface for the settings, they have to be manually coded into categories_dressing_defines.php?

  <li><?php $content .= '<a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>';?></li>
```The $content .= part is used in tpl_categories.php, where content is accumulated before being output. Here it is output directly, so you would want to change
$content .=
 to
echo ```php
  <li><?php echo '<a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>';?></li>
```Do the same for the other link.

For the sidebar, I didn't check to find that you were using the left sidebar already. That makes it easier; you can just enable the categories box in the left column, set its width and a negative margin-right if needed (it may well not be needed), and move the box to the right with position: relative; .

The category ids can't cause any problems. Just use the cPath if needed to specify a category. Your case is actually very simple, and you don't need to mess with groups at all. Setting the top cats to be hidden in categories_dressing_defines.php means that you will want to move the entire remaining content of the box to the right-side position.
You will also want to disable or hide the subcategory links on pages that are not subcat listings.

Hi Glenn
Ive been using the categorie dressing addon and it works a treat. Ive seen another add on called horizontal links with drop down or something like that. I would like the ezpages header function which comes under the header in a horizontal bar. I would like to customise this and was wondering if this can be done through the mod created by you.

Thought i'll ask before checking any other mod out

Categories Dressing only applies to the categories sidebox. Some of its styling methods could be modified to apply to other elements, but this would have to be done on a case-by-case basis.

gjh42:

Your case is actually very simple, and you don't need to mess with groups at all. Setting the top cats to be hidden in categories_dressing_defines.php means that you will want to move the entire remaining content of the box to the right-side position. You will also want to disable or hide the subcategory links on pages that are not subcat listings.

Hey Glenn:

Thanks so much for your help thus far. adding extra tabs is similar to adding sideboxes to the header - you just reference the FILENAME. I'll remember that.

Can I impose further? How do I make my vision come true? I've poured over your readme and the define lang file from your mod, I simply don't get it.

Here's what I envision:

• On the category index page, I want to hide the currently visible sub categories and position the side box next to some image. I want the side box to show all sub category levels. NOTE: i have layout Grid and column divider pro installed. So in Yarn, should show up like this:
  

  By Brand
  Be Sweet
  Chuckanut Bay
  Commonwealth Yarn
  etc.

By Fibre
Cotton
Mohair
Wool
etc.

• I don't want the box showing on the sub category pages or product pages
• the sub categories currently visible below the DIV box in Yarn category page should be hidden. If I comment out the code from tpl_index_categories.php, sub category pages are affected.
  My aim is to simplify the design, leave a lot of white space, but not sacrifice usability. it should be very intuitive. Any suggestions is much appreciated.

Thank again for your time.

You want the subcats of the current top cat all showing at once, so you will need to install the Uncollapsed Categories Tree mod, which works with Categories Dressing. See the discussion with Limelites above.

I also note that you have set the category links to float left. What was the intention here? The effect is to make them bunch up on one line where they are short enough to fit. Do you really want that?

#categories ul ul li { float: left;}

I'll address the subcat and other page display issues later.

gjh42:

You want the subcats of the current top cat all showing at once, so you will need to install the Uncollapsed Categories Tree mod, which works with Categories Dressing. See the discussion with Limelites above.

I also note that you have set the category links to float left. What was the intention here? The effect is to make them bunch up on one line where they are short enough to fit. Do you really want that?

#categories ul ul li { float: left;}

I'll address the subcat and other page display issues later.

sorry about the float left. I put it in when I was tinkering with another idea and forgot i had it in. I've removed it. I will check out Limelites' posts.

ok, im sure this has to do with my image proportions, and is prob. in the 68 pages before this, but could not locate anything with a thread search...

i know that ive gotten the categories dressing almost right, because it is showing a place for the image now, just not showing the actual image.

https://www.customk9design.com/catalogzen

to experiment, i have only changed the 1st category "edannas" so far.

my images are in the includes/templates/darkness/buttons/english folder, and are named:
catbg2.gif and
catbg2hover.gif (no uppercases)

the top of my css categories dressing file is:
(i have not changed anything, other than inserting your code... also, because my image is 27px high, i did change the 24px to 28, then 30... still no change

/**

• CSS Stylesheet for Categories Dressing examples
• @copyright Copyright 2009 Glenn Herbert
• @copyright Copyright 2003-2006 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.gnu.org/licenses/ GNU Public License V3.0
• Categories Dressing v2.6 Glenn Herbert (gjh42) - 20090128
  /
  /
  hr.catBoxDivider1 {
  color: #aabbcc;
  }
  */

/IE6 hacks/

• html #categories li, * html #categories li a {
  height: 1em;/fix IE6 whitespace bug/
  background-image: url(../images/pixel_trans.gif);/partially fix IE6 a block display bug/
  }
  #categories li a.catBg2 {
  background-image: url(../images/catbg2.gif);
  height: 30px;
  }

#categories li a.catBg2:hover {
background-image: url(../images/catbg2hover.gif);
}

.catBoxHeading1 {
font-family: georgia, serif;
font-weight: bold;
font-size: 1.4em;
color: #335511;
background-color: #ff66ff;
/*background-image: url(../images/catheadbg1.gif); */ /uncomment to use background image with or without coded text/
/*height: 23px; */ /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0;
}

The specific page rules you show are probably being overridden by the general rules, because you have put the specific rules at the top of the file. They should go after this line in stylesheet_categories_dressing.css:

/individual page rules go after the general rules/

moved, but still not showing the image...

i noticed some stuff near the top that mentions "uncomment to use"... am i supposed to do something there??

also, is the ".catCount {color: #000000;}" supposed to remain?
and why do the examples still remain after deleting them here...?

thanks. youre exceptionally patient!!

/**

• CSS Stylesheet for Categories Dressing examples
• @copyright Copyright 2009 Glenn Herbert
• @copyright Copyright 2003-2006 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.gnu.org/licenses/ GNU Public License V3.0
• Categories Dressing v2.6 Glenn Herbert (gjh42) - 20090128
  /
  /
  hr.catBoxDivider1 {
  color: #aabbcc;
  }
  */

/IE6 hacks/

• html #categories li, * html #categories li a {
  height: 1em;/fix IE6 whitespace bug/
  background-image: url(../images/pixel_trans.gif);/partially fix IE6 a block display bug/
  }

.catBoxHeading1 {
font-family: georgia, serif;
font-weight: bold;
font-size: 1.4em;
color: #335511;
background-color: #ff66ff;
/*background-image: url(../images/catheadbg1.gif); */ /uncomment to use background image with or without coded text/
/*height: 23px; */ /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0;
}

.catBoxHeading2 {
font-family: 'times new roman', serif;
font-weight: bold;
font-size: 1.4em;
color: #335544;
background-color: #ffaaff;
/*background-image: url(../images/catheadbg2.gif); */ /uncomment to use background image with or without coded text/
/*height: 23px; */ /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}

.catBoxHeading3 {
font-family: 'comic sans ms', sans-serif;
font-weight: bold;
font-size: 1.2em;
color: #336699;
background-color: #ffbbdd;
/*background-image: url(../images/catheadbg3.gif); */ /uncomment to use background image with or without coded text/
/*height: 23px; */ /uncomment to use background image without coded text/
padding: 0.3em 0.4em;
margin: 0 0 2px 0;
}

.catBoxHeadingImg {
padding: 0;
margin: 0;
}

.catBoxSubtext1 {
font-family: 'times new roman', serif;
font-weight: normal;
font-size: 1.2em;
color: #669911;
background-color: #ffddff;
padding: 0.1em 0.2em 0.1em 1.0em;
}

#categories ul {/top categories/
list-style: none;
background: none;
border: 1px solid #ffaa99;
margin: 0 0 0.4em 0;
padding: 0;
}

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

#categories ul ul {/subcategories/
list-style: none;
background: #ffeecc;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 1.3em;
}

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

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

/change bullet when a category w/o bg image is open to products:/
#categories li a.cat-selected-text {
list-style: square inside url(../images/bullet3.gif);/change to list-style: none; to remove bullet/
}

/disable bullet for cats w/ image or bg image/
#categories li a.cat-parent, #categories li a.cat-selected, #categories li a.cat-not-selected {
list-style: none;
display: block;/fix IE6 margin-left bug/
}

/different bullet for links if desired/
/*
#categories li a.category-links {
list-style: disc inside url(../images/bullet4.gif);
}
*/

/* 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);
}

/individual page rules go after the general rules/
#categories li a.catBg2 {
background-image: url(../images/catbg2.gif);
height: 30px;
}

#categories li a.catBg2:hover {
background-image: url(../images/catbg2hover.gif);
}
.catCount {color: #000000;}

There is a typo in the stylesheet - I forgot to change the example background image path from /images/ to /buttons/english/ when modifying the code to allow for multiple languages. So

/*individual page rules go after the general rules*/
#categories li a.catBg2 {
    background-image: url(../images/catbg2.gif);
    height: 30px;
    }

#categories li a.catBg2:hover {
    background-image: url(../images/catbg2hover.gif);
    }
```should be```
/*individual page rules go after the general rules*/
#categories li a.catBg2 {
    background-image: url(../buttons/english/catbg2.gif);
    height: 30px;
    }

#categories li a.catBg2:hover {
    background-image: url(../buttons/english/catbg2hover.gif);
    }
```See the revised stylesheet I posted above (post 658).