Border color as opposed to whole page color

When you get the time, learn to use a web developer tool like Firebug (for Firefox) or Chrome Developer Tools (automatically built in to Chrome). These types of tools allow you to inspect the guts of any web site, including your own. So if you are wondering what selectors to use for your CSS rules, or what color a particular web site is using on a certain element, you can easily find out how.

OK, so The Lodge at Orchard Cottage has #344970 as the background color for its body element. Remember from this thread, I showed you how to change the page color by adding a background-color property to the body selector? Go back and do the same thing, but instead of setting background-color to #FFFFB3, set it to #344970.

Now, you want to set your other page elements to have a white background. Look in your virtual layout.css file, and you’ll see sections for #banner (the header area) and #main (the main content area). Add a background-color property to each section so that they are white (or whatever other color you want:
Change this:

/* The header area */
#banner {
	position: 				relative;
}

To this:

/* The header area */
#banner {
	position: 				relative;
	background-color:			#fff;
}

Do the same thing for the #main section.

If you want to change the footer to the same color as the borders as well (like The Lodge does), then you should set the background-color of #footer-bg (the full width of the footer area) to #344970 as well (you’ll want to delete the border-top property to get rid of the white line at the top of the footer).

One thing you’ll notice is that the breadcrumbs bar stretches all the way across the width of the page, between your header and the main content area. The Lodge decided to delete the breadcrumbs bar altogether (and that’s easy to do), but you can make it look correct if you want to keep it. In your breadcrumbs.css virtual file, down at the bottom, change this:

#breadcrumbs1 {
	padding: 				5px 0 5px 30px;
}

#breadcrumbs1-bg {
	border-top: 			solid 1px #cccccc;
	border-bottom: 		solid 1px #cccccc;
	background: 			#f7f7f7;
	position:				relative;
}

to this:

#breadcrumbs1 {
	border-top: 			solid 1px #cccccc;
	border-bottom: 		solid 1px #cccccc;
	padding: 				5px 0 5px 0px;
	background: 			#f7f7f7;
}

#breadcrumbs1-bg {
	background: 			#344970;
	position:				relative;
}

Notice that I changed the last value for padding in #breadcrumbs1 from 30px to 0px.

I just looked at your website, and the header is totally messed up on my PC. Is it because you’re working on it, or you simply didn’t notice? The three items with the star (should this be a menu?) are over the header, hiding part of the text

I’d like to get the white space in the middle of my pages …

Well, you have the page the right color. To make the middle white, all you have to do is go to Appearances > Montezuma Options > CSS Files, click on layout.css, scroll down until you see the section for #main, and add a background-color property to it.
Change this:

/* The main row, with the #content column and perhaps sidebars left/right */
#main 	{
	padding: 				30px 0;
}

to this:

/* The main row, with the #content column and perhaps sidebars left/right */
#main 	{
	padding: 				30px 0;
	background-color: 			#fff;
}

That is SUCH a gift. I can’t thank you enough!!!!

I want to see this theme succeed, not because I have any personal investment in it, but I think it’s a great theme to use because of it’s flexibility, so I’ll lend a hand to solve problems with it whenever I can.

When I visit your website, over the header I can see this CSS instruction:
‘container_color’ = ‘#000033’,
This indicates that for some reason this instruction is not interpreted as CSS but as normal text.

The alignment of the elements in your code has no influence. Sometimes the CSS instructions that you add to your custom CSS are overridden by higher level CSS instructions. Without going into much details on how CSS works, you can try to add the !important directive, it usually works.

background color: #000033 !important;