Keeping content area white, and background grey

Well –

When you speicfy a background color for the body tag and specify !important (which means – “hey, everyone, ignore any backgroud color specifications on all tags that are subordiante to the body – that is, everything) you will get pages with white backgrounds.

It’s as simple as that.

Please be specific as to what “content area” you are referring to.

Are you referring to the “area” which has the text starting with:

A Nationally Recognized Expert

If you are looking for an advisor who is on the cutting-edge of the latest trends in investing and financial planning, you have come to the right place. While many advisors boast about keeping up-to-date on the latest academic research, Dr. Lach creates it. He has multiple publications in peer-reviewed academic journals and has been sourced as a subject…

If you want only that element to have a white background, you have to code the CSS for the white background at a level which will affect only the one element.

What theme are you using?

Also – you have the text in that area centered – it is proven fact that large blocks of centered text are harder to read and look worse than left justified text.

Bob

Try the following:

Ditch your added CSS:

body.page-id-373 {
background-color: #FFF !important;
background-image: none;
}

Add, at the bottom of the theme’s style.css file:

.white {
    background-color: white;
}

Upload the changed copy of the style.css file, and the one where you had your addsed CSS (if it was in a file other than that style.css file), to the server and then go look at the page again.

Is that what you want?

The <div> tag containing the text I think you want with a white background is coded as:

<div class="white">

but there is no class rule named white defined, that I can find. So, the code I show, above, will add one.

Check other pages to see if this effects them.

Also – you have extraneous </p> tags on your page.

The first I noticed is on the line that defines the div I just showed you. The full line is:

<div class="white"><center></p>

When I look at the source with Firefox, that tag is in red, that indicates an error or exception, and if I hover over it the message: “No p element in scope, but p end tag seen” is displayed. That means the browser could not find the <p> tag to match the </p> tag.

That is not a fatal error, but it is the type of error which can cause screwy formatting that usually is hard to pin down.

Bob

Hi,

To do what you want, start by removing the CSS that you added previously.

Instead, add background-color: #FFF; to .singular #primary in style.css. This targets the element that contains just the content area, whereas the previous CSS selector targeted the entire body.

Thx.

Thank you! It worked!

I’m curious –

which change fixed the problem – the one I suggested or the one that Donna Peplinskie suggested?

Bob

Great to hear. Cheers!