Categories Dressing

[gjh42]

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.

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



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

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



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

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.

[gjh42]

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

[wow11111]

Perfect, THX. Got it now.

[newagekat]

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

in the stylesheet when it says:

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

alter to read:

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

[miriam_t]

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.

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

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

[miriam_t]

Hello customk1!

I'm not Glenn, but ...

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?

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.

[customk1]

i added:
margin: 0 0 0 0;
padding: 0 0 0 0;

to the 1st four li items:
#categories li a.catBg1 {
background: url(../buttons/english/catbg1.gif) 0 0 no-repeat;
height: 27px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#categories li a.catBg1:hover {
background-position: -167px 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

etc....


no change to the padding in IE. still trying to find that pixel.gif file... will let u know if i have no luck.