Category menu background help

[Techheads]

Hi,

This may belong in the CSS area but I am not sure so put it here. Basically I want to have a different background color for each level of the category menu but I cannot figure out how to do it. I don't even know what to search for to see if it has been answered before but basically I want the menu to look like this including the 1 px border around each "button".



But it currently looks like this



I would also like to know how to get rid of the |_ on the sub categories.

Is this possible without too much trouble?

[jgamio]

from the administrator go to

configuration->Layout Settings->Categories Separator between the Category Name and Count


configuration->Layout Settings->Categories Separator between the Category Name and Sub Categories


configuration->Layout Settings->Categories SubCategories Indent

[jgamio]

yes you nedd css look for


/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #008000;
text-decoration: none;
background-color: #E8E8E8;
}
A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #000000;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */



in the .includes/templates/YOURTEMPLATE/css/stylesheet.css

[Techheads]

yes you nedd css look for


/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #008000;
text-decoration: none;
background-color: #E8E8E8;
}
A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #000000;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */



in the .includes/templates/YOURTEMPLATE/css/stylesheet.css

I have tried using that but it only colors directly behind the text not the whole "button" and i also cant see how to make a 1px border around each "button".

[Techheads]

Ok, I have figured this out, for anyone who needs to know how to do this.

First I had to add this the my CSS.

A.category-top, A.category-top:visited{
    padding-left: 5px;
     color:#FFFFFF;
     background:#2e466c;
    font-weight: bold;
     text-decoration: none;
    border-style: solid;
    border-color: #e1e2e6;
    border-top-width: 0px;
    border-left-width: 1px ;
    border-right-width: 1px ;
    border-bottom-width: 1px ;
     display: block;
    width: auto;
     text-align:left;
    line-height: 1.4;
    padding:2 px;
    
}

A.category-top:hover, A.category-top:active {
     color:#FFFFFF;
     background:#1e2d45;
    font-weight: bold;
     text-decoration: none;
    border-style: solid;
    border-color: #e1e2e6;
    border-top-width: 0px;
    border-left-width: 1px ;
    border-right-width: 1px ;
    border-bottom-width: 1px ;
     display: block;
    width: auto;
     text-align:left;
    line-height: 1.4;
    padding:2 px;
}

A.category-subs, A.category-subs:visited{
     color:#FFFFFF;
     background:#46597a;
    font-weight: bold;
     text-decoration: none;
    border-style: solid;
    border-color: #e1e2e6;
    border-top-width: 0px;
    border-left-width: 1px ;
    border-right-width: 1px ;
    border-bottom-width: 1px ;
     display: block;
    width: auto;
     text-align:left;
    line-height: 1.4;
    padding:2 px;
    
}

A.category-subs:hover, A.category-subs:active {
     color:#FFFFFF;
     background:#303d54;
    font-weight: bold;
     text-decoration: none;
    border-style: solid;
    border-color: #e1e2e6;
    border-top-width: 0px;
    border-left-width: 1px ;
    border-right-width: 1px ;
    border-bottom-width: 1px ;
     display: block;
    width: auto;
     text-align:left;
    line-height: 1.4;
    padding:2 px;
}

A.category-products{
     color:#2e466c;
     background:#ffffff;
    font-weight: bold;
     text-decoration: none;
    border-style: solid;
    border-color: #e1e2e6;
    border-top-width: 0px;
    border-left-width: 1px ;
    border-right-width: 1px ;
    border-bottom-width: 1px ;
     display: block;
    width: auto;
     text-align:left;
    line-height: 1.4;
    padding:2 px;
    
}

A.category-products:hover, A.category-products:active {
     color:#2e466c;
     background:#ccd3df;
    font-weight: bold;
     text-decoration: none;
    border-style: solid;
    border-color: #e1e2e6;
    border-top-width: 0px;
    border-left-width: 1px ;
    border-right-width: 1px ;
    border-bottom-width: 1px ;
     display: block;
    width: auto;
     text-align:left;
    line-height: 1.4;
    padding:2 px;
}

The important bits being the " display: block; " declarations, this makes the background color you choose the full width but because the block declaration also adds line break before and after the element you will wind up with space between the buttons because there is already a line break added in the file tpl_categories.php at around line 57 which I changed from this

$content .= '<br />' . "\n";

to this

$content .= '' . "\n";

I am not sure this is technically the correct way to do this but it works. Just make sure your using the overrides system so your not changing the original file.

Hope this helps someone.