Support » Fixing WordPress » Keeping content area white, and background grey

  • Resolved babussell2

    (@babussell2)


    I previously figured out a problem I had with this particular page.
    I wanted to make the content area white, so I inserted this code.

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

    The entire website has a grey background image that was blocking the white color I wanted which is the reason why I applied “background-image:none” to this page. However, I didn’t want the entire page to be white. Only the content area with the writing. The background I want to have the grey background image like the other pages. Below is a link to the page I’m working on.

    http://www.lachfinancial.com/educationcenter/

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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.

    Thread Starter babussell2

    (@babussell2)

    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Keeping content area white, and background grey’ is closed to new replies.