Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Main text area background versus page background

  1. splendidafternoonteas
    Member

    I want to replicate, as best I can, the basic color pallette at http://www.splendidafternoonteas.com/ on the WordPress blog – the main text columns with a lighter background over a darker page background. Possible? No problem defining the page background but the other areas? Thanks.

    The blog I need help with is splendidafternoonteas.wordpress.com.

  2. thesacredpath
    Member

    Since your site is private, we volunteers cannot look at it. Can you at least tell us what theme you are using?

  3. erickoch
    Member

    Sorry, yes, Coraline. Screen shot of the WordPress page is at http://www.splendidafternoonteas.com/images/SimplySplendidWordpress.jpg

  4. thesacredpath
    Member

    You can set the overall background color under customization and then add the following to the end of your custom CSS to see what you think.

    #content-container {
background: #FFFFF1;
}

  5. splendidafternoonteas
    Member

    Giant step forward but wrinkles, of course. Will have to mate the two columns somehow. See http://www.splendidafternoonteas.com/images/InsideColor1.jpg

    And applying some padding to bring in the text from the edge forces the second column down and pushes the first column right edge out. See http://www.splendidafternoonteas.com/images/Padding1.jpg

    Thanks...Tony

  6. thesacredpath
    Member

    Ah, it only extends down to the bottom of the content. Let me work on this a bit and see what I can come up with for you. Thanks for the screenshot.

  7. thesacredpath
    Member

    Add this to the end of your CSS and see what you think. Change the background header color to the same as the overall background color. We may have to shift things around a little, but see if this basically works for you.

    #header {
background: #FFFFFF;
}

#container {
background: #FFFFF1;
}

  8. erickoch
    Member

    The header seems to control the background behind the menu bar but the problem is that the first column and second column are different heights. If I can assign a background just to the left-hand column, I can leave the right-hand column the page colour because the two columns will always be different heights.

    "container" does not seem to recognize the column boundaries. The right-hand column is composed of widgets, but they must sit within a "column", no?

    Thanks...Tony

  9. splendidafternoonteas
    Member

    #primary {
    background: #FFFFF0;
    padding: 0;
    }

    #container {
    background: #FFFFF0;
    padding: 0;
    }

    #header {
    background: #faf0e6;
    padding: 0;
    }

    yields:

    http://www.splendidafternoonteas.com/images/ScreenShot1.jpg

    Will work on the padding tomorrow. Thanks...Tony

  10. thesacredpath
    Member

    You are welcome. It would be easier if I could see your site, but from the screenshot it looks like you are on the right track. I knew there would be some adjustments to the padding in a place or two to get things to look right.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags