Changing background color in style sheet

Hello,

I am new to zen cart, and trying to figure out a few things in my template.

I can change the background of my page, put the inner part of the page it turns out like the picture below

I go into my stylesheet.css and change the color where the gray is...

/*bof header*/
#headerWrapper {background-color:#3e4147;margin-top:0px;}
#header-curr-lang {float:right;margin-top:50px;color:#b5b5b6;}
#header-curr-lang img{vertical-align:middle;} 
#currency_header {float:right;margin-right:35px;margin-top:3px;}
#lang_header {float:right;margin-right:15px;margin-top:5px;}
.header-checkout {color:#fffede;font-weight:normal;}
.header-checkout:hover {color:#dfba68;}
#navMainWrapper {margin: 0em;font-weight: normal;color: #fffede;background-image:url(../images/top-nav-bk.jpg);height: 54px;width: 950px;}
#navMain ul  {margin: 0;padding:  0.5em 0em;list-style-type: none;text-align: center;line-height: 1.5em;margin-left:15px;margin-top:7px;font-size:130%;}
#navMain ul li {display: inline;}
#navMain ul li a {text-decoration: none;padding: 0em 0.5em;margin: 0;color: #fffede;white-space: nowrap;}
#navMain ul li a:hover{color:#dfba68;} 
#navCatTabsWrapper {margin: 0em;background-color: #fff;font-weight: bold;color: #181818;height: 1%;width: 100%;display:none;}
#navCatTabs ul  {margin: 0;padding:  0.5em 0em;list-style-type: none;text-align: center;line-height: 1.5em;}
#navCatTabs ul li {display: inline;}
#navCatTabs ul li a {text-decoration: none;padding: 0em 0.5em;margin: 0;color: #181818;white-space: nowrap;}
#navEZPagesTop {background-color: #fff;display:none;}
#navEZPagesTop {font-size: 0.95em;font-weight: bold;margin: 0em;padding: 0.5em;color:#181818;}
#navEZPagesTop a{color:#181818;}
#navEZPagesTop a:hover {color:#67cadf;}
#navMainSearch {float: right;padding-top:15px;margin-right:20px;}
#navMainSearch input[type=image]{margin-top:-10px;vertical-align:bottom;}
.search-header-button {vertical-align:middle;}
.search-header-box {border:1px solid #000;width:100px;height:18px;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.cart-image {vertical-align:middle;}

The background (in the first line) color instead of #3e417, I have changed to #000
When I make the change... here is the results

I have basically lost my top bars, and my background goes away.
I am trying to figure out how to get rid of the gray part, and keep the black background and my top and side bars.

please advice.

Thanks!

Drago!

Post a link to this site
A safe link like
zen-cartdotcom

gifts-martdotcom

OK so your link shows the nav bar as blue not as your pictures show it

What exactly do you want to change?? and to what?

Thanks.

I am sorry I changed my template due to some other issues.

All that I am trying do to is to change the background. I am trying to make it black, but when I change it, my nav bar turns color and the other bars disappear.

All that I am trying do to is to change the background. I am trying to make it black, but when I change it, my nav bar turns color and the other bars disappear.
Well you have an image as a background defined(see red highlited)
You can't also define in the same statement a background color as it appears you are attempting

body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size: 62.5%;color: #888787;background: #6a6b6f url(../images/bk.jpg) repeat-x center top;}

Thanks,

So here is the outcome...

Current code

body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size: 62.5%;color: #888787;background: #6a6b6f url(../images/bk.jpg) repeat-x center top;}

Changed to:

body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size: 62.5%;color: #888787;background: #000 repeat-x center top;}

I just don't understand what is going wrong.

Thanks!

What I am really trying to get rid of it that gray around my logo. But I don't seem to get it.

In that case, what would be the best solution for me to have a completely black background? including the gray around the logo.

Thanks

You have in stylesheet.css, line 61:```
#headerWrapper {
background-color: #3E4147;
margin-top: 0;
}

Also, you are missing the closing </div> for the logo div:```html
<div id="logo"><a href="http://gifts- mart.com/"><img src="includes/templates/andover_modern/images/logo.jpg" alt="All Business :: Gifts-M art is a Tradewind Solutions USA company" title=" All Business :: Gifts-M art is a Tradewind Solutions USA company " width="970" height="243" /></a>      <div id="tagline"></div>
``` should be ```html
height="243" /></a></div>      <div id="tagline"></div>

The missing closing tag causes the logo, logoWrapper and headerWrapper containers to extend farther than they should, which might cause display anomalies and will cause validation errors.

background: #6a6b6f url(../images/bk.jpg) repeat-x center top;

is a valid "shorthand" declaration; if the background image does not cover the whole container, the background color will be visible around it.

Thank you so much gjh42

I have tried to change the code in line 61 and still does not work.

As far as the latter one, I cannot find the exact code anywhere. The only place I can find it similar is at includes/languages/english/andover_modern/header.php which the code is as follows

define('HEADER_ALT_TEXT', 'All Business :: Gifts-Mart is a Tradewind Solutions USA company');
  define('HEADER_SALES_TEXT', ''); 
  define('HEADER_LOGO_WIDTH', '970px');
  define('HEADER_LOGO_HEIGHT', '243px');
  define('HEADER_LOGO_IMAGE', 'logo.jpg');

Thanks again!

The missing </div> should be located in /includes/templates/andover_modern/common/tpl_header.php, shortly before the "tagline" div.

/*bof header*/
#headerWrapper {background-color:#000;margin-top:0;}
```When I test this on your site in Firebug, it turns the header background black.

Thank you so much gjh42

That finally did work. I appreciate all the help!!!