product background color change CSS HELP!!!

[moogvo]

Ok, so I have searched the web for days and have been able to find NOTHING that works here...

So if you go to my site at www.esmokersupply.com, notice that the products in the center column are in white boxes with a burgundy header.

If you click on any category, starter kits for example, the white boxes disappear and the products are shown on the main background.

What I want to have happen is for the product list in the categories to have the white boxes under them just like all of the other product listings on the site.

Thank you so much in advance for your help!!!

BTW: It is a template from TM.

Tom

[gjh42]

Try adding to one of your stylesheets

.centerBoxContentsProducts {background: #ffffff;}

That may not be a close enough match to the centerboxes, in which case you will probably need some more coding to hang styling on. It might be possible to achieve your desired display just by styling the inner elements of the product.

[moogvo]

that ALMOST worked!!!

Check it out now that I have done the coding...

www.esmokersupply.com and then click on any category... As soon as it comes across an item that is sold out, it breaks up the white box.

There still isn't a burgundy bar for the title... I might be asking too much...

[gjh42]

This set of rules will start to get the box and header the way you want:

.listingModel {
    background: #660011;
    line-height: 3.0em;
    margin: 0 5px;
    padding: 0 5px;
    }
.listingImage {
    background: #ffffff;
    margin: 0 5px;
    padding: 0 5px;
    }
.itemTitle {
    background: #ffffff;
    height: 2.5em;
    margin: 0 5px;
    padding: 0 5px;
    }
.listingPrice {
    background: #ffffff;
    margin: 0 5px;
    padding: 0 5px;
    }
.listingButtonGroup {
    background: #ffffff;
    height: 3.5em;
    margin: 0 5px 10px;
    padding: 0 5px;
    }
.listingButtonGroup a+br {
    display: none;
    }
.listingButtonGroup img {
    margin: 0 5px
    }

You still need to find the background images that are used for the heading and the bottom rounded corners of the white box.
Note that these rules are for the listing element layout as you have it (model, image, title, price, buttongroup). If you want the title at the top like the centerboxes, move the elements in Configuration > Product Listing and adjust the properties accordingly.

[moogvo]

Hmmm... I will give that a go... I have a bad feeling I am going to kill the template, but I will give er a shot! :) I will back it up so I can reverse it, of course!

Thank you for taking the time to help me. Is this in the same CSS sheet as the last edit?

[gjh42]

stylesheet_tm.css would probably be an appropriate place to put the new rules. The rules given will not affect anything outside the individual product listings.

[moogvo]

Thanks Glenn! If nothing else, it all looks better than it did B4. I don't know how to use the header image and rounded corners, but this is still miles ahead of where I was. Maybe soon I will be able to figure the rest out.

Thank you again!

[gjh42]

TM has used an insane amount of code just to output one centerbox product item on the homepage:

    <div class="centerBoxContentsNew centeredContent back" style="width:33%;">
			
<div style="margin-right:13px;">
  <table style="width:100%;">
    <tr>
      <td>
        <div class="box_head">
          <div class="topback">
            <div class="inner31">
              <div class="inner32">

                <div class="inner33"><img src="images/spacer.gif" alt="" width="1" height="1" /><br/>
                </div>
              </div>
            </div>
          </div>
          <div class="midback">
            <div class="inner31">
              <div class="inner32">
                <div class="inner33 product_box_name"><a href="http://www.esmokersupply.com/index.php?main_page=product_info&amp;cPath=0&amp;products_id=12">10 ml 555 (Medium)</a><br />

                </div>
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </table>
  <div class="product_box">

    <div class="bg_inner1">
      <div class="bg_inner2">
        <div class="bg_inner3">
          <table style="width:100%; margin-bottom:9px; margin-left:12px;">
            <tr>
              <td>
                <div class="img_box1"> <a href="http://www.esmokersupply.com/index.php?main_page=product_info&amp;cPath=0&amp;products_id=12"><img src="images/555Medium.png" alt="10 ml 555 (Medium)" title=" 10 ml 555 (Medium) " width="63" height="63" /></a><br />
                </div>

              </td>
			  
			  
			 
			  
			  
            </tr>
          </table>
          <table class="price_box" style="margin-left:0;">
            <tr>
              <td class="product_box_price">
                <div class="indent"> <strong>$9.95</strong><br />
                </div>

              </td>
            </tr>
            <tr>
              <td>
                <div style="margin-top:11px;"><a href="http://www.esmokersupply.com/index.php?main_page=product_info&amp;cPath=0&amp;products_id=12"><img src="includes/templates/theme204/buttons/english/button_goto_prod_details.gif" alt="Go To This Product's Detailed Information" title=" Go To This Product's Detailed Information " width="104" height="25" /></a> </div>
              </td>
            </tr>
          </table>

        </div>
      </div>
    </div>
  </div>
</div>

They think they need all of this just to output the product heading:

  <table style="width:100%;">
    <tr>
      <td>
        <div class="box_head">
          <div class="topback">
            <div class="inner31">
              <div class="inner32">

                <div class="inner33"><img src="images/spacer.gif" alt="" width="1" height="1" /><br/>
                </div>
              </div>
            </div>
          </div>
          <div class="midback">
            <div class="inner31">
              <div class="inner32">
                <div class="inner33 product_box_name"><a href="http://www.esmokersupply.com/index.php?main_page=product_info&amp;cPath=0&amp;products_id=12">10 ml 555 (Medium)</a><br />

                </div>
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </table>

Competently written code tailored for this heading application would have maybe two divs and an <h4> or something (and an <a>), which would allow for variable box width. So don't try to use their code as an example to make heading images for your product listings.