Changing the background color based on Category
 

For example in my Product List we have male and female puppies.
http://littlepuppiesonline.msidesigns.com/All-Little-Puppies/

I'm not hung up on it, but it would be great to be able to change the background color of each dogs listing based on their member ship to the Male or Female Category. Cat 10 for Male and 8 for Female?

Is this possible to set it up in the template as well as the Css?

Re: Changing the background color based on Category
 

Find the background div and the proper variable and do something like:

{if $cat eq '10'}
<div id="special div for males">
{elseif $cat eq '8'}
<div id="special div for females">
{else}
<div id="standard div for the rest of the website">
{/if}

Re: Changing the background color based on Category
 

Thanks Tal. I figured it was something like that.

Thank question was a 2 part question, because I don't know the background variable.

Actually I think I just need to modify the background to the Table to a Transparent Pink or Blue. Dang if I know how to do that...

Re: Changing the background color based on Category
 

The variable for the category number.
I have no idea right now if its $cat.id or $cat.num or $cat or whatever. There is no variable for background color.

Re: Changing the background color based on Category
 

Back ground color goes in the ul.bestsellers-products-item

ul.bestsellers-products-item-m li {
margin: 10px 0px 10px 0px;
list-style: none;
background-color:#b0c4de;
border-color:#f06300;
border-style:solid;
border-width:3px 2px;
padding: 0px;

I'm not positive about the $cat stuff either, I'll keep looking.

Re: Changing the background color based on Category
 

Ok so in your .tpl you will find class="bestsellers-products-item-m"

this controls the background color.

you need to code the tpl to change this class based on category.

so in your .tpl you would have

{if $cat eq '8'}
class="bestsellers-products-item-m-blue"
{elseif $cat eq '10'}
class="bestsellers-products-item-m-pink"
{else}
class="bestsellers-products-item-m"
{/if}

then create appropriate class in your CSS

Re: Changing the background color based on Category
 

ARW,

Yup, already did that. Except the "-m" represents male in my css and "-f" female.

The code in the bestsellers.tpl that sets that class is:


Do I build the {if} formula inside the "<ul>" ?

I tried the following and that did work to well.
{if $cat eq '8'}
<ul class="bestsellers-products-item-m">
{elseif $cat eq '10'}
<ul class="bestsellers-products-item-f">
{else}
<ul class="bestsellers-products-item">
{/if}

It messed it up like it didn't have a Class at all.

Re: Changing the background color based on Category
 

try that.

Re: Changing the background color based on Category
 

tals version should work fine

Re: Changing the background color based on Category
 

Alright I will this weekend. If I can't nail this, I think I'll get paid :D