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

Re: Changing the background color based on Category
 

If you cant do something then you get paid?
Sorry bud, but I'm firing you and taking your job 8)

Re: Changing the background color based on Category
 

Lol!!!!!!!!!!!!!!!!!!!!!!:d/

Re: Changing the background color based on Category
 

If the code does not work for you - this probably why:

The css you provided is from a bestsellers list. The link you provided appears to be products on a category page.
I believe the $cat variable is the main category for a product on the product page. It appears you might need a category being passed inside an array of products - a category for each product.

To see if category variables exist for the products in a list (bestsellers, featured products, etc.) - Open webmaster mode and look for the array that holds all the products. You should be able to recognize it. I think the bestsellers array is called $bestsellers. On a category page, the products array is called $products.

Inside those arrays, if you see a variable that you recognize as the main category for that product - then you use that variable in the array - something like $bestsellers.category. If it is not there - then you have to add a query to the php file to get the category and pass it to the template so it is available to you.

Re: Changing the background color based on Category
 

Tal LOL Typo...

Gb2world, yeah I think that's the problem as well I'm trying to do this mod to the Bestsellers list first.

Tal, you suggestion did not work. The TPL treated it like now class had been assigned in the <ul> I removed the class="bestsellers-products-item" from the original tpl and got the same results.

$bestsellers.cat didn't work either.

Re: Changing the background color based on Category
 

I think the biggest problem is that Cat is not either established yet or I don't no with the call is for it.

Well I figured out that if I put in if $cat eq "Males" that it would change to blue, if the puppy is not a male, it doesn't go pink.

I have no idea, grr x-cart!

Re: Changing the background color based on Category
 

I think it needs to be setup in the <li> and not the <ul>

The <ul> is outside of the {foreach} so it's static.

Re: Changing the background color based on Category
 

Webmaster mode answers those questions. If you do not see it, you need to add a query to the php to retrieve it for the template. If you do see it - you know what it is called.