Main text area background versus page background

  • Author
    Posts
  • #1137068

    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.

    #1137188

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

    #1137191

    erickoch
    Member

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

    #1137196

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

    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

    #1137205

    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.

    #1137207

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

    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

    #1137215

    #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

    #1137231

    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.

The topic ‘Main text area background versus page background’ is closed to new replies.