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.

Hi CrouchingBruin,
I can’t wait to try this.

I know how to use Chrome to see the source elements of a page. I thought I could figure out how to change background color that way. I looked at the source for a LOT of the showcase sites.

Since your help with the color, that worked, I have a better sense of it.

I’m going to go try this NOW.

Thank you for another page to my WordPress Montezuma notebook.

Hi again,
Okay, I think that I didn’t write clearly so the answer is harder to follow.

I like how the Cottage page looks with the white middle. I want to get the white middle with my yellow border that you helped me create.

So… to do that I… Oh, oh. I’m really unclear. I don’t what the banner to be white, nor the footer, and I think the breadcrumbs are all right, though to be truthful although I read about breadcrumbs both here and via Google searches, I didn’t know it was the bar.

I remind myself of a girl in grade school who had robins and sparrows totally confused.

Ah, OK, I thought you liked the color of The Lodge page, not just the effect. Well, just follow the same instructions, but set the background-color of body back to #FFFFB3. And just change #main to #fff, if you don’t want to change the color of the header & footer:

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

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

Hi daprela,
Thank you for looking at my website. Yes, totally messed up. I’m trying to move my Yahoo site here. I built my site using their program, so I can’t move my site, I have to recreate it.

Getting the page color right was a priority. I don’t think anyone’s coming here to see my pages because I … Well, I don’t really know how that works.

I’d like to get the white space in the middle of my pages, but I’m SO SLOW. It takes me forever to Get things.

Sigh.

Karen

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;
}

Oh WOW ~~~ That is SO Cool~~~ I was stuck in Content.css

Thank you SO MUCH~~~~!!!!!!!

Karen

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

I was stuck in Content.css

As I mentioned in the other thread, sometimes it can be difficult trying to figure out which virtual CSS file to use. When in doubt, however, you can always stick your CSS in the various.css file, and it will override any other CSS because various.css gets included at the end.

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.

This is excellent to know, about various.css

The help manual I’m building myself is making me feel a lot more confident. And, it’s making my site much lovelier. Happiness!!!!

}
*/

/* The header area full width background */
#banner-bg 	{
}

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

#logo-area {
	margin-left: 			0px;
}

I’ve never used back ticks before, so I hope I have them right…

I thought that change would change the color… but… No.

That’s weird, on my computer screen the color and “relative” beneath it are lined up… Could that be the problem????

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;