White area between background and text.

  • Unknown's avatar

    Hi!
    I’m using Book Lite theme with Custom Design and I’m trying to put the same background color in all pages. The problem is that I did change the background color and the color behind the body text, but there is a white area around the page title and around the text areas that I just can’t change.

    I already tried many css codes I found in many WordPress forums, but they don’t work: border, wrapper, #page, etc. Besides, to edit my css the hole stylesheet is blank for this theme and I should write everything there. I don’t know if I’m using the code at the wrong place.

    Everything I have in my stylesheet editor right now is this:

    p {
    background-color: #fffaf0;

    }

    body {
    color: #71cebb;
    }

    h1 {
    color: #ef3e00;
    }

    h2 {
    color: #71cebb;
    }

    (I want all the background to be the color #fffaf0)

    I wish someone can help me. Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Try getting rid of the background for the elements that currently have it set to #fff, like this:

    .custom-background #main,
    .custom-background #colophon {
    	background: none;
    }

    I already tried many css codes I found in many WordPress forums, but they don’t work: border, wrapper, #page, etc.

    If you were looking at forum posts about different themes, those wouldn’t work because CSS is theme-specific.

    The best thing to do is to right-click the element (i.e. the white parts in this case) and select the “Inspect Element” option to open a viewer that will show you the HTML so you can see what identifiers and class names the HTML has because those are what you need to use in your CSS code.

    Besides, to edit my css the hole stylesheet is blank for this theme and I should write everything there

    This is expected. The WordPress.com CSS editor is for adding new CSS, and you should use your built-in browser tools to see the current CSS.

  • Unknown's avatar

    Great, designsimply!

    By right clicking the white area I can see the CSS codes and it’s very easy to do everything I want my changing some elements on “Matched CSS Rules”, at the bottom right.
    For example, I can change the background color and it’s shown instantly on the blog image above, but it doesn’t work for real. If I open another tab and access my blog, the white area is still there.

    I also tried copying the codes I changed on “Matched CSS Rules” on my Stylesheet editor, but it’s not working.

    How can I apply theses changes that seem so easy on “Inspect Element”?

  • Unknown's avatar

    I also tried copying the codes I changed on “Matched CSS Rules” on my Stylesheet editor, but it’s not working.

    Ah, yes. You should be able to copy them! If you can’t, maybe try re-typing them. Once you’ve done that, you can put the updated rules into the Appearance → Themes → Customize → CSS panel in your WordPress.com blog dashboard.

    Make sure to copy each updated rule with the proper formatting.

    This help page has a diagram showing what a complete rule looks like:
    http://en.support.wordpress.com/css-basics/

  • Unknown's avatar

    It worked perfectly with the right click tip + the help page you sent!
    Thank you very, very much!!

  • Unknown's avatar
  • The topic ‘White area between background and text.’ is closed to new replies.