how to have a different stylesheet per category

[nineten]

Hi,

if anyone could help that would be great.

 

I want to style categories differently. How can i include a different style sheet depneding on the main category the product is in?

 

So category_id = 6 show style sheet cat6.css for example.

 

And all products in category 6 would use the same style sheet.

 

And so on for other category ids, eg cat id 7 links to cat7.css etc etc.

 

Thanks.

Edited August 2, 2012 by nineten (see edit history)

[shacker]

you can use something like this

 

{if $category->id_category eq "1"}

 

<link href="yourcssurl" rel="stylesheet" type="text/css" media="all" />

{/if}

 

and add same line to each category

[Whispar1]

Hello Shacker,

Would this also apply to 1.5.3.1?

I am assuming you are editing the category.tpl file?

 

I too would like some slight modification to one section of my category pages.

Thank You for any clarification you can offer.

[tomerg3]

Yes, you could use the same syntax in PS 1.5.x

 

However, a cleaner solution would be to add a new class with the category id in the name.

 

IE

<div class="category_{$category->id_category}">

 

Then you can add specific styling in 1 CSS file, and have it reference the specific category

IE

.category_34 { some code }
.category_20 {some other code}

[Whispar1]

Tomerg3

Thanks for the reply - It's nice to see experienced people trying to help the rest of us out.

I wish I understood better php better and how to implement the first part of what you said.... the css part I got.

 

Hopefully someone will get some good use out of your suggestion. It really is useful.

Edited February 19, 2013 by Whispar1 (see edit history)

[tomerg3]

The first example is the smarty code that you would put in category.tpl

It is meant to create a unique class for each category, so you could add specific CSS code for it.

[shacker]

Hello Shacker,

Would this also apply to 1.5.3.1?

I am assuming you are editing the category.tpl file?

 

I too would like some slight modification to one section of my category pages.

Thank You for any clarification you can offer.

works on thius version, and is in the header.tpl file in the head section

[Whispar1]

Thank you guys for the clarification - its a big help.

The section that I want to change and make unique for each category is the three boxes seen here:

http://69.36.191.225/index.php?id_category=16&controller=category

 

The three boxes at the top of the category that say (shop / style / sale) are what I want to be different for each category.

Changing the content of these three boxes is handled in the BO through the module supplied by the developer.

 

Looking at it, maybe it's more complicated than simply adding smarty code and then creating classes for each category because

the content is changes through the module. Maybe I just need to put something generic in them or just comment out the block all together if what I want to do is too complicated.

[Whispar1]

If someone wouldn't mind helping me understand this, here is the section of code in category.tpl that calls the three boxes I want

to be unique for each category.

 

 

<!-- cart baner -->

<div class="category-description std">

<div class="row">

{$sccop.trendy_category_page_markup|html_entity_decode}

</div>

</div>

<!-- end the cart baner -->

 

Is this the best place to add the smarty code then add the specific css as stated above to say category.css?

[tomerg3]

Does is get called 3 times, or does {$sccop.trendy_category_page_markup|html_entity_decode} contain the 3 blocks?

[Whispar1]

I believe only once. The module in the back office has a custom HTML field where I can put whatever I want, but it repeats for all categories. An example can be seen here: http://69.36.191.225/index.php?id_category=7&controller=category

[tomerg3]

See http://screencast.com/t/yoyF2wGX

 

While I don't see a simple way to add a class the each of the 3, you can add a class to their container.

 

[color=#343943][font=Arial, Helvetica, sans-serif][size=3]<div class="category-description std category_{$category->id_category}">[/size][/font][/color]

 

This will add a new class categoy_xx where xx is the category id