vary center column background by page

I'm trying to change the background color of the center column. I'd like it to be different for the index page and the product pages. In experimenting on my own, it seems that what I need to do is assign a class to the "<td>" containing the center column content. The problem is making it dynamic, so that the index page is different from the product pages. The line I'm trying to edit in "tpl_main_page.php" is:
<td class="center<?php echo ($xxxx); ?>" valign="top">
Hopefully, the class will then read something like: "centerindex" or "centercategory".

I have tried various definitions for the "$xxxx" above. My thought is that I need whichever variable tells the system which file to put in the center column, but being a newcomer to both php and zencart, I can't figure out which variable that is. I don't need any specific name, I just need to vary between the index and product pages and be something consistent which I can style.

I'd be very appreciative of any ideas or of any better ways to go about this.
-Jessica

kika_6:

I'm trying to change the background color of the center column. I'd like it to be different for the index page and the product pages. In experimenting on my own, it seems that what I need to do is assign a class to the "<td>" containing the center column content. The problem is making it dynamic, so that the index page is different from the product pages. The line I'm trying to edit in "tpl_main_page.php" is:
<td class="center<?php echo ($xxxx); ?>" valign="top">
Hopefully, the class will then read something like: "centerindex" or "centercategory".

I have tried various definitions for the "$xxxx" above. My thought is that I need whichever variable tells the system which file to put in the center column, but being a newcomer to both php and zencart, I can't figure out which variable that is. I don't need any specific name, I just need to vary between the index and product pages and be something consistent which I can style.

I'd be very appreciative of any ideas or of any better ways to go about this.
-Jessica

Create two new stylesheets named as follows:

**index_home.css

product_info.css**

Now in each one add the following declaration:

.centerColumn {
background: #fff;
}

change the background to the color you want (for each stylesheet.)

You are a gem. Thank you so much. This is exactly what I was overlooking. I only needed to change the background color on the index page, so I made the suggested index_home.css file and made a declaration for #contentMainWrapper, as there was no .centercolumn for the index page. It may not be the solution for anyone else since #contentMainWrapper contains more than just the center column, but it did just what I needed. Thanks again!

The per-page stylesheet capability is a wonderful thing, though not the only possibility here.

Another way to approach this would be to add your code like this:

Something like this should be standard in Zen Cart, because there is presently no way to reference that cell as you can reference the #navColumnOne & #navColumnTwo cells.

Then you can use the body id which varies by page in combination with .mainColumn:

#indexHomeBody .mainColumn {background-color: #aabbcc;}