change the logo area background color

I have been able to change the background so that only the two side panels show the background image.
I have lost the brown background that was under the Sierra Sweets logo.
I have looked all over the stylesheets.php file and the header.php file but I don't see where it is controlled.
I am trying to get back some background color in the logo area.
The store address is http://www.sierrasweets.com/horse_cookie_store/index.php?main_page=
k1

There's a few reasons, you are looking to add: background-color #888787**;**
to the #logo or #headerWrapper yet the other template div's are either transparent or not being used.

If you are using FireFox and right click the screen, select 'inspect element' and use the navigation tool 'select element with mouse' on the left of the 'inspector' tab. You can then hover over the various CSS elements and see what I mean.

You have a white background on the mainWrapper, which hides the body background. Find in stylesheet.css```
/bof wrappers - page or section containers/
#mainWrapper {background-color: #ffffff;text-align: left;width: 980px;vertical-align: top;}

background-color: #ffffff;

That will leave the rest of the page brown too, so look a dozen lines down and find ```
#contentMainWrapper{padding-bottom:20px;padding-top:0px;background:transparent;}

background:transparent;
to
background:#ffffff;

gjh42

I followed your last 2 posts and changed the code. I'm right back where I started.
The background is now all cluttered with horseshoes and impossible to follow.
I wish I knew more about coding but right now I'm at a loss.
I want to keep the center area, white and readable, and the area on top of the
scrolling pictures a different color, plain brown maybe.

Go to http://www.sierrasweets.com/horse_cookie_store/index.php?main_page= and you can see what I'm talking about.

Can the top center area be controlled differently than the lower center area or is that not possible.
k1

ken1:

gjh42

I followed your last 2 posts and changed the code. I'm right back where I started.
The background is now all cluttered with horseshoes and impossible to follow.
I wish I knew more about coding but right now I'm at a loss.
I want to keep the center area, white and readable, and the area on top of the
scrolling pictures a different color, plain brown maybe.

Go to http://www.sierrasweets.com/horse_cookie_store/index.php?main_page= and you can see what I'm talking about.

Can the top center area be controlled differently than the lower center area or is that not possible.
k1

In your stylesheet.css file, use #contentMainWrapper to add a background to the main section and #headerWrapper for the top. You will also probably want to add a background color to #mega-wrapper in stylesheet_mega_menu.css

Thanks,

Anne

OK I will try.
Is there anywhere that has a diagram or something showing what and where each area
of Zen Cart is. I'm confused as to what area I'm even trying to change.
k1

The main top section of the page is controlled by #headerWrapper. That is what you want plain brown.

A good way to see the major elements of the page for styling is to use Firefox and its Firebug extension (there are similar things in other browsers). Right-click on the outer background and select "Inspect element with Firebug"; this will open a pane with a view of the HTML. Each main element can be toggled open and closed to see the heirarchy of parts, and the CSS styling tag (class or id) of each part is right there.

Also, when you mouse over a section in the HTML view, the part of the page it controls is highlighted. There is your diagram of what's what. :)

Firebug, very cool tool I didn't know about. Now I can id the various areas.

I still don't see a place to change the color of the different fields though.
I'm using notepad++ to search the different keywords #contentMainWrapper, #headerWrapper, and #mega-wrapper.
In #contentMainWrapper I changed the color to FF9900 and it didn't seem to make a change.
I don't see any place to add or change color to the #headerWrapper.
Same with #mega-wrapper in stylesheet_mega_menu.css, no obvious place to change the color.
I thought I could learn as I was also building a Zen Cart to replace my current website. Should I be
working on a more basic template to learn.
k1

Using your FTP locate this file:

includes/templates/YOUR_TEMPLATE/css/stylesheet.css

This is where you will be able to make the changes you seek :)

<p> > **ken1:** > > Firebug, very cool tool I didn't know about. Now I can id the various areas. I still don't see a place to change the color of the different fields though. I'm using notepad++ to search the different keywords #contentMainWrapper, #headerWrapper, and #mega-wrapper. In #contentMainWrapper I changed the color to FF9900 and it didn't seem to make a change. I don't see any place to add or change color to the #headerWrapper. Same with #mega-wrapper in stylesheet_mega_menu.css, no obvious place to change the color. I thought I could learn as I was also building a Zen Cart to replace my current website. Should I be working on a more basic template to learn. k1</p> <p>  </p> <p> If you don't see the color line in the stylesheet, add it to the container.  #headerWrapper where # - is for the div id=, .logo where . - is for the div class=</p> <p>  </p>

This sure isn't Dreamweaver.
Thanks to everyone for all the help you've given.
One last cry for help before I concede defeat and start over.
I have ID'd the area I want to change as the mega-menu.
Can someone tell me why my icons for Quick Links, Shop, Brands, About Us, etc don't show up until you hover over them.
My site is w w w .s i e r r a s w e e t s . c o m /horse_cookie_store/index.php?main_page=
k1

I don't see any icons when hovering or not. What are these supposed to be?