Color Single Category Text

[i2Paq]

Does anyone know how I can get a specific category to be styled? For instance, I have a CLEARANCE category that I would like in bold red. I don't see how I can add a style to that category.

[JAY6390]

Open

Code: Select all

/catalog/controller/module/category.php

find

Code: Select all

$output .= '<li>'; 

around line 50 and change it to

Code: Select all

$output .= '<li id="category-'.$result['category_id'].'">'; 

then for say category 20, in your stylesheet use the selector

Code: Select all

#category-20 {
    /* STYLE INFO HERE */
}

[Maansy]

good info Jay

[smorelli]

Excellent!!!!

[dramony]

is there a way where only the main category will be styled and not the sub-categories under it?
thanks!

[JAY6390]

Just use a child selector via css
http://www.w3.org/TR/CSS2/selector.html#child-selectors
for example, in the default theme, use

Code: Select all

#category > ul > li

which will only style the first level category list items, not their descendants.

[dramony]

not working on my end..

[JAY6390]

Not sure then with your stuff, but for example, on the category you can use

Code: Select all

#category > ul > li {
    border: 1px solid black;
}

and get this result
http://screenshots.jaygilford.com/2010-08-24_1425.png

If you want to edit the link tags, you need to use

Code: Select all

#category > ul > li > a

[dramony]

Thank you Jay!

I used this code to make the parent category text to bold:

Code: Select all

#category > ul > li > a {
   font-weight:bold;
}

[JAY6390]

Ah, figured it was the link not the li you wanted

[k2tec]

I editted this line in my controller

Code: Select all

$output .= '<li id="category-'. $result['category_id'].'">';

and build in my CSS

Code: Select all

#category-21 {
   list-style: url('../image/twee.png');
   list-style-position:outside;
}

#category-21 li {
    background:#e9b447;
}

ect, etc. for the next categories

but my problem is that the image in front of my text is not centered
I also tried

Code: Select all

#category-20   {
   background: url('../image/een.png') center left no-repeat;   
}

but then the image is in my text.

does anyone have a solution to this problem