Categories Dressing

You got the image, though there are a couple of other things to fix in your posted line.
You can add an alt tag to the title image in the next field after the filename:
,'1|1|cathead2.gif|Guys||1');

and you should not have fields after the tag field if you don't want text headings:
,'1|1|cathead2.gif|Guys');

If you want no alt tag, you can leave the tag field empty:
,'1|1|cathead2.gif|');

I just tried to use CategoriesDressing 2.6 for those nested ul / li constructs i would prefer. But i do not get a nested list with my top and sub categories. The top-category ends with /li and the sub-categories under it are a separated ul. It should be:

<ul>
  <li> Top Category1</li>
  <li> Top Category2 
     <ul>
        <li>Sub Category</li>
     </ul>
  </li>
</ul> 
```How can I get this nested list?

What I currently get is this:
```html
<ul>
   <li> Top Category1</li>
   <li> Top Category2 </li>
      <ul>
         <li>Sub Category</li>
      </ul>
 </ul> 

I am currently testing the revised code to make the lists nest correctly. The updated version should be ready for public testing in a few days.

Glenn - Thank you so much! That is a great message. I will wait for that.

Is there a version I could contribute to? One where you started from?

Miriam

Hi Glenn

I'm on v1.3.8, site is www.tessellatedesign.com

I installed the categories dressing mod (all files in custom folders) and it's all fine except I cannot get rid of the bullet points before the category links.

I've put list-style: none; everywhere I should have (I've checked and double checked this).

I've commented out the code for using other bullets.

The only change that happens is when I comment out this section:
/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/
}

when I do that the bullets move from the far left of the sidebox to the left of the image links...which is where I've left it.

Today I started afresh with the clean stylesheet_categories_dressing.php, put list-style: none; in all of the places indicated and the buggers won't go. ...I have a feeling it's something very simple to rectify this but I'm now so zenned out I'm almost cross eyed!

and thank you for a great mod, other than my never disappearing bullets it's great...!

OK I have installed categories dressing with no problems EXCEPT now in my categories list I have "Major Heading" and "Minor Heading" within the list and I can't for the life of me figure out how to remove this text. I've done many searches and still can't find an answer. Any help would be greatly appreciated.

my site is Chrissie's Custom Creations

On the left hand side you see my list of categories where I am having the problem.

TIA for any help :hug:

:oops: Duh, I figured it out! I'm sorry

fizmo:

Hi Glenn

I'm on v1.3.8, site is www.tessellatedesign.com
I've put list-style: none; everywhere I should have (I've checked and double checked this).

No, you didn't ;-) When I put it in your stylesheet at the part for the definition of the sidebox:

stylesheet.css (Linie 604)
.sideBoxContent {
line-height:1.8em;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:center;}

the list-bullets are gone.

fizmo:

I've commented out the code for using other bullets.
The only change that happens is when I comment out this section:
/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/
}

And here you are: list-style: none for the div which is holding the categories. If you leave this they should be gone too, but your categories are named li class="cat-top". You can apply that class additionally to the definition above like #categories li.cat-top and should get the same result.

What I am wondering is: where is gone your <ul> ? You have only <li> around the cat-image, without <ul>, which should be there if you didn't change the tpl_categories.php.

By the way: do you use Firefox with the firebug extension? That is helpful and useful to find those little tweaks quickly.

all sorted, thanks for the help Glenn (and for the tip on Firebug)...and I'll check on the missing <ul>

cheers!

Thanks for your assistance, Miriam. I've been away for a couple of days and had no time to look in here.

The v2.7.1 revision for correctly nested lists, and some additional active/level controls, is ready for public beta testing. Please try it and let me know if you find any problems. If I don't hear of anything in a couple of days, I'll submit the update to Free Addons.

I just installed the Mod (2.6) and I have problems with long category names which do not fit in one line. The problem is that the second line starts just underneath the bullet and not under the first line text.... any hints on what to change that text is lined up correctly :wacko:

Changing the list-style to outside and giving the anchors some left margin will do it, but that will also cut off the left edge of the background color if you have one. If the background is not differentiated you should be fine. Gotta run.

Thx for quick reply. Got that "outside" working changing these two parts:

#categories ul a {/top categories/
display: list-item;
list-style: disc outside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: no-repeat;
border: none;
margin: 0;
padding: 0;
}

#categories ul ul a {/subcategories/
display: list-item;
list-style: circle outside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: none;
border: none;
margin: 0;
padding: 0;
}

:clap:

However cannot find the place where to specify the margin you mentioned. Background is no problem. :no:

wow11111:

Thx for quick reply. Got that "outside" working changing these two parts:

#categories ul a {/top categories/
display: list-item;
list-style: disc outside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: no-repeat;
border: none;
margin: 0;
padding: 0;
}

#categories ul ul a {/subcategories/
display: list-item;
list-style: circle outside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: none;
border: none;
margin: 0;
padding: 0;
}

:clap:

However cannot find the place where to specify the margin you mentioned. Background is no problem. :no:

Got it... was just here:

#categories ul a {/top categories/
display: list-item;
list-style: disc outside url(../images/bullet1.gif);/change to list-style: none; to remove bullet/
background: no-repeat;
border: none;
margin: 0 0 0 1.7em;
padding: 0;
}

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

The last level shown in the menu are products. Is there a way to get them a bit more left ? All I could adjust only affects categories and subcategories and always moves the products too.

There are no products in the categories menu unless you have some mod installed. What do you have that does that? Clyde Jones' Expanded Categories? That one shows products too, but I wasn't aware that it could be used with Cat Dressing.

To affect sub-subcategories, repeat the ul ul rule for #categories ul...

#categories ul ul ul {/sub-subcategory list/
and
#categories ul ul ul a{/sub-subcategories/

Perfect, THX. Got it now. :clap:

wow11111:

I just installed the Mod (2.6) and I have problems with long category names which do not fit in one line. The problem is that the second line starts just underneath the bullet and not under the first line text.... any hints on what to change that text is lined up correctly :wacko:

in the stylesheet when it says:

list-style: disc inside url(../images/bullet1.gif);

alter to read: ```html
list-style: disc url(../images/bullet1.gif);

gjh42:

The v2.7.1 revision for correctly nested lists, and some additional active/level controls, is ready for public beta testing. Please try it and let me know if you find any problems. If I don't hear of anything in a couple of days, I'll submit the update to Free Addons.

Thanks again for that! I just tried out your files and they work in my installation just as they should - every list is standard conform to w3c - now we ready as Standardistas! Thanks a lot! Three little greens in my browser window at the right now! I'm happy.

hey Glenn,

got hopefully a quick one for ya...

https://www.customk9design.com/catalogzen

in FF, Opera, Safari and Google:
have SMALL space between "harnesses" and "saddlebags" that isnt anywhere else...

in IE:
have a larger space between each category...

any solutions?

here is my pertinent css, let me know if you need additional info:

/**
 * 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: 0px solid #ffaa99;
	margin: 0 0 0 0;
	padding: 0;
	}
	
#categories ul a {/*top categories*/
    display: list-item;
    list-style: none;/*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 0;
	padding: 0 0 0 0;
	}
	
#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 {
    background:  #000000 url(../images/catbghover.gif);
    } */

/* subcategory hover effects*/
/* #categories li li.cat-subs a:hover, #categories li li.cat-products a:hover {
    color: #aa9966; 
    background: #000000 url(../images/catbghover.gif);
    } */

/*individual page rules go after the general rules*/
#categories li a.catBg1 {
background: url(../buttons/english/catbg1.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg1:hover {
background-position: -167px 0;
}

#categories li a.catBg2 {
background: url(../buttons/english/catbg2.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg2:hover {
background-position: -167px 0;
}

#categories li a.catBg3 {
background: url(../buttons/english/catbg3.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg3:hover {
background-position: -167px 0;
}

#categories li a.catBg4 {
background: url(../buttons/english/catbg4.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg4:hover {
background-position: -167px 0;
}

#categories li a.catBg5 {
background: url(../buttons/english/catbg5.gif) 0 0 no-repeat;
height: 28px;
}
#categories li a.catBg5:hover {
background-position: -167px 0;
}

#categories li a.catBg6 {
background: url(../buttons/english/catbg6.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg6:hover {
background-position: -167px 0;
}

#categories li a.catBg7 {
background: url(../buttons/english/catbg7.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg7:hover {
background-position: -167px 0;
}

#categories li a.catBg8 {
background: url(../buttons/english/catbg8.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg8:hover {
background-position: -167px 0;
}

#categories li a.catBg9 {
background: url(../buttons/english/catbg9.gif) 0 0 no-repeat;
height: 27px;
}
#categories li a.catBg9:hover {
background-position: -167px 0;
}

.catCount {color: #000000;}

Hello customk1!

I'm not Glenn, but ...

customk1:

hey Glenn,
got hopefully a quick one for ya...
www.customk9design.com/catalogzen

in FF, Opera, Safari and Google:
have SMALL space between "harnesses" and "saddlebags" that isnt anywhere else...
I can see, that there IS indeed a small transparent image between these categories:
<img height="100%" width="100%" title="Harnesses" alt="" src="includes/templates/template_default/images/pixel_trans.gif"/>

Perhaps you can check that?

customk1:

hey Glenn,
in IE:
have a larger space between each category...

Also perhaps: I cannot try this but I know that margin and padding must be set to 0 for <li>, to achieve a consistent appearance throughout all browsers. Otherwise every browser makes his own margins/paddings to block elements.