Main text area background versus page background

splendidafternoonteas · Member · Jan 26, 2013 at 10:43 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
thesacredpath · Member · Jan 26, 2013 at 11:03 pm
Copy link
Since your site is private, we volunteers cannot look at it. Can you at least tell us what theme you are using?
erickoch · Member · Jan 26, 2013 at 11:16 pm
Copy link
Sorry, yes, Coraline. Screen shot of the WordPress page is at http://www.splendidafternoonteas.com/images/SimplySplendidWordpress.jpg
thesacredpath · Member · Jan 26, 2013 at 11:32 pm
Copy link
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;
}
```
splendidafternoonteas · Member · Jan 27, 2013 at 12:10 am
Copy link
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
thesacredpath · Member · Jan 27, 2013 at 12:22 am
Copy link
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.
thesacredpath · Member · Jan 27, 2013 at 12:30 am
Copy link
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;
}
```
erickoch · Member · Jan 27, 2013 at 12:39 am
Copy link
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
splendidafternoonteas · Member · Jan 27, 2013 at 1:11 am
Copy link
#primary {
background: #FFFFF0;
padding: 0;
}

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

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

yields:

Will work on the padding tomorrow. Thanks…Tony
thesacredpath · Member · Jan 27, 2013 at 5:22 am
Copy link
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.

No items found.