I have tried everything--change color

I can't figure out how to get rid of the white that is behind these products, I have searched and searched the toolkit and changed everything I can find. It is still white. Can you help please

http://familyhospice.org/cart/

Hi,

On your stylesheet go to line 732 and change the current current line to .zm12 { text-align: left; padding: 5px; background-color: #83c472;}

Change the colour code to what ever you want I have highlighted in red for ease of use

The page you need to go to is includes/templates/ZT002/css/stylesheet.css

Hope this helps

Sweet thank you so much, two more questions.

1. how did you figure that out? What tool are you using?

2. how did I change the white on this page?
   http://familyhospice.org/cart/index.php?main_page=product_info&cPath=1&products_id=1

thank you very much

tim.....looks like brom signed off. On the page you're wanting to change, I assume you're wanting to get rid of the white there as well, right?

In the stylesheet that brom lead you to, find these:

.zmpi01 (image background)
.zmpi03 (Add to Cart box background)
.zmpi05 (Description box background)

These, you won't even have to change the colors.......just remove the:

background-color: #fff

and you'll be all set.

Also, I noticed that you haven't closed a lot of your code, like the one above, and a few more I saw in your stylesheet.

your should ALWAYS close each one with a semicolon. Like the one above should be:

background-color: #fff;

Hope this helps.

Oh.......and your breadcrumb background color doesn't have the pound sign before it:

background-color: d9d4b0;

Should be:

background-color: #d9d4b0;

Thought you might want to know that.

And to your other question:

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

Wow, that is so cool. thank you very much. So all that info shows up at the top, any way to tell specifically which item is the one causing the change (for example if I scroll over a black box) 15 possibilities show up. Not a big deal, just curious

What you see are all the divs (and table elements) the thing you're hovering over is contained in, outer to inner, left to right.

The first (leftmost) will usually be body #indexBody #mainWrapper. The element you want to change the styling of will usually be the rightmost, but some trial and error (using CTRL - SHIFT - E) will let you see for sure.

timhersh:

Wow, that is so cool. thank you very much. So all that info shows up at the top, any way to tell specifically which item is the one causing the change (for example if I scroll over a black box) 15 possibilities show up. Not a big deal, just curious

Tim, also try Ctrl+Shift+F......then hover over the spot you want to find out something about then click it. That will give you the exact element ID along with it's parents and children.

Another nice little add-on for FireFox is the View Source Chart. This handy little tool lets you see EXACTLY how each div is 'put together' on the page. Very nice tool! And very good for learning how Zen-Carts' divs are put together.

And for some very complicated styling cases, where there could be several elements that control the final appearance, using Firefox's Firebug extension (right-click, Inspect Element) will show you all of the style rules that apply and the stylesheet line where they are located.