two tone box versus background

I have read a ton of posts on this but have not found the right combination yet and I have been up all night trying :)

I have the darkness template. I want to make the zen cart look like my website (https://www.mooncavecrystals.com). Purple on the sides and black in the actual box in the middle. I can get it go to ALL purple or ALL black, but cannot figure out for the life of me how to get a purple background and a black main area. Suggestions? thoughts? help?:blush:

need a link to your test site please... don't need the http://www.

mooncavecrystals.com/zen is where i am playing at the moment :)

Well you have changed the original from when I first saw it..
You have changed the width...

The new site is too wide..

change the bannerpurplemedium.jpg to 950px

#logoWrapper {
background-color: #9999CC;
background-image: url("../images/bannerpurplemedium.jpg");
background-repeat: repeat-x;
height: 223px;
}

change the red font below to 950px

#mainWrapper { background-color: #9999CC;
border: 1px solid #000000;
height: 223px;
text-align: left;
vertical-align: top;
width: 1000px;
}

Those numbers are for the logo. The box (shopping cart area with side boxes is about the same size. Changing it to 950 did nothing but cut off some of my banner. The two inches or so on each side is a different color on the original template, that is what I wanted to be purple.

I will keep playing and see what I can come up with, thanks for your help -- truly appreciated!

Ok, lets start over again...
First I am trying to correct the width of your site... :smile:
The reason I changed the width was because it was too wide..
You logo is too wide which makes a scroll bar on the bottom...

You can make it the width of the screen but you have to make a logo like 950 px then change background-color: #000000;

Tell me again what color you would like center to be..

First make a back copy of darkness/css/stylesheet.css

Locate this:
zen/includes/templates/darkness/css/stylesheet.css

Change the red font below to #3F4B7F;

body {
background-color: #000000;
color: #9999CC;
font-family: verdana,arial,helvetica,sans-serif;
font-size: 62.5%;
margin: 0;
}

Find this in the stylesheet.css

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0;
padding: 0;
}Change to this:

#headerWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0;
padding: 0;

#contentMainWrapper {
margin: 0;
padding: 0;
background-color: #000000;
}

LOL! Ok, it took me a minute to process what you were saying! :oops:

I have decreased the size of my logo (which is where I got the 1000 and 225 from) and changed the numbers in question to accommodate that. I went 750 and 175 instead of 1000 and 225 :)

Did i understand right?

I want the sides (the two or so inches on either side of the middle main shopping cart area to be #9999CC) and the actual shopping area to be black, like it looks like on my website (https://www.mooncavecrystals.com).

gotcha! thanks so much!