This tutorial provides the CSS to separate each html container background present under Site Inner in the new Genesis Sample.
It will also work on other child themes with few changes.
Before:
After:
Here is the CSS, We use it for Desktop only having min-width 960px. Add the following CSS in child-theme/style.css
@media only screen and (min-width: 960px) { body { background-color: #f5f5f5; color: #333; } .content .entry { background-color: #fff; margin-bottom: 40px; padding: 40px 50px; } .sidebar .widget { background-color: #fff; margin-bottom: 50px; padding: 40px; } .author-box { background-color: #ffffff; padding: 30px; } .after-entry { background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); padding: 40px 50px; } .comment-respond, .entry-comments, .entry-pings { background-color: #fff; padding: 40px 50px; margin-bottom: 50px; } }
Minor Changes are Required.