category sidebox styling

[AfterHouR]

Hi

Please see http://www.allgoodideas.co.uk/Walking_Sticks

I am trying to make the category links in the categories sidebox have a background the full width of the sidebox not just the text and a border, so they look like buttons.

I want the top category link to say walking sticks in a brown text with an orange background and then to have a space between the next category down stickmaking supplies

I don't want any background to appear on the subcategories though when the top link is expanded...

i hope that makes sense..

I have been trying for ages and looking through the forum too but cannot find the answer... had enough for now need to get something to eat maybe after that a fresh look might help...

Regards
AfterHouR

[stevesh]

The easiest way is to install this mod, then style the ul li items:

http://www.zen-cart.com/index.php?ma...oducts_id=1307

I don't know what happens with subcategories, though.

[gjh42]

I believe the "Categories menu - replace with ul/li" mod only creates one level of ul; subcats are not distinguished by it, though they may still be distinguishable with the standard styling tags.

For many properties, subcats in Categories Dressing will have the same values as top cats by default. You can set different values for subcats (and still other values for sub-subcats) by styling #categories ul ul {} and #categories ul ul a {} (#categories ul ul ul {} and #categories ul ul ul a {}).

[gjh42]

Just checked the "Categories menu - replace with ul/li" file, and it does make only one <ul> for the entire categories list, and another <ul> for the new/all/featured/specials, if any of them are enabled.

[AfterHouR]

Hi Stevesh

I have installed the mod but I am still doing something wrong/can't get my head around borders and full width of the background to the menu...

see http://www.allgoodideas.co.uk/Walking_Sticks

[AfterHouR]

Hi gjh42

I tried category dressing mod to do what I wanted and got it working with graphical links instead of text but it slowed down the website too much, even with small gifs on low resolution, so I un installed it...

All I want is the cpath category to be full width of the sidebox with an orange background and brown text and a definate white space/border between the next cpath category

no bullets and sub categories just plain..

Hehehe, it's just one of those days, where I should have stayed in bed..

Thanks for you assistance guys

Regards
AfterHouR
www.allgoodideas.co.uk
walking sticks and canes for the discerning customer

[stevesh]

I can't help with the subcategories, but if you want styling the width of the box on all the categories,

#categories ul li {
text-decoration:none;
list-style-type:none;
border-bottom:1px dotted;
margin-left:-35px;
line-height:2em;
margin-right:7px;
}

That's an example from one of my sites.

[AfterHouR]

Stevesh Brilliant! thanks for your help

I used this from your example

#categories ul li {
text-decoration:none;
list-style-type:none;
border-bottom:solid 2px #ffffff;
margin-left:-35px;
line-height:2em;
margin-right:7px;
background-image: url(../images/category-buttons.gif);
}

Now how do I take off the effect on subcategories?

is it

#categories ul ul

or

#categories ul ul a

or..... something else...?

[AfterHouR]

Just tried this

#categories ul li {
text-decoration:none;
list-style-type:none;
border-bottom:solid 2px #ffffff;
margin-left:-35px;
line-height:2em;
margin-right:7px;
background:#ffcc33;
}

#categories ul ul li {
text-decoration:none;
list-style-type:none;
margin-left:-35px;
line-height:2em;
margin-right:7px;
background:none;
}

but it doesn't alter subcategories

see link in above post

where am I going wrong?

Regards
AfterHouR

[AfterHouR]

I have now changed it to this

#categories ul li {
text-decoration:none;
list-style-type:none;
text-align : center;
font-size: 1.1em;
font-weight: bold;
border-bottom:solid 2px #ffffff;
margin-left:-35px;
line-height:2em;
margin-right:7px;
background:#ffcc33;
}

with this too

A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #ffffff;
text-decoration: none;
background:none;
}

and I am quite happy with the overall effect...

http://www.allgoodideas.co.uk/Walking-Sticks

what do you think...?

Regards
AfterHouR