Post by smorelli » 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.
Last edited by i2Paq on Fri Aug 20, 2010 4:21 pm, edited 1 time in total.
Reason: Topic moved

New member

Posts

Joined
Wed Jan 27, 2010 6:28 am

Post by JAY6390 » 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 */
}

Image


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by Maansy » Fri Aug 20, 2010 9:01 am

good info Jay :)

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am


Post by smorelli » Fri Aug 20, 2010 10:11 pm

Excellent!!!!

New member

Posts

Joined
Wed Jan 27, 2010 6:28 am

Post by dramony » 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!

Active Member

Posts

Joined
Sat Oct 24, 2009 12:34 pm

Post by JAY6390 » 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.

Image


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by dramony » Tue Aug 24, 2010 8:44 pm

not working on my end..

Active Member

Posts

Joined
Sat Oct 24, 2009 12:34 pm

Post by JAY6390 » 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

Image


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by dramony » 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;
}

Active Member

Posts

Joined
Sat Oct 24, 2009 12:34 pm

Post by JAY6390 » Wed Aug 25, 2010 8:20 pm

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

Image


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by k2tec » 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

User avatar
Active Member

Posts

Joined
Mon Apr 12, 2010 8:06 pm
Who is online

Users browsing this forum: No registered users and 15 guests