OpenCart Community

Posted: **Fri Aug 20, 2010 5:30 am**

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.

Posted: **Fri Aug 20, 2010 8:23 am**

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

Posted: **Fri Aug 20, 2010 9:01 am**

good info Jay

Posted: **Fri Aug 20, 2010 10:11 pm**

Excellent!!!!

Posted: **Tue Aug 24, 2010 1:10 pm**

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

Posted: **Tue Aug 24, 2010 7:18 pm**

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.

Posted: **Tue Aug 24, 2010 8:44 pm**

not working on my end..

Posted: **Tue Aug 24, 2010 9:26 pm**

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

Posted: **Wed Aug 25, 2010 8:09 pm**

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

Posted: **Wed Aug 25, 2010 8:20 pm**

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

Posted: **Fri Mar 08, 2013 8:20 pm**

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

OpenCart Community

Color Single Category Text

Color Single Category Text

Re: Color Single Category Text

Re: Color Single Category Text

Re: Color Single Category Text

Re: Color Single Category Text

Re: Color Single Category Text

Re: Color Single Category Text

Re: Color Single Category Text

Re: Color Single Category Text

Re: Color Single Category Text

Re: Color Single Category Text