PageLines theme: how to change the background color of the main content vs. entire page?

The question:

I use PageLines free version, with WordPress 3.3.1, for this website: http://new.teleosis.org/?page_id=76

I want the background color of the whole page to be light green, and the background color of my content area to be white (screenshot).

  • I configure the Page Background Color in the PageLines settings, which affects the whole page. Whereas Body Background Color affects what they call the “Page content areas” like the footer. (screenshot)

  • But I don’t find the setting to change the background of a page body, is it even available in PageLines?

I hope I don’t have to go into the CSS files for such a simple thing, but if I do, I appreciate any suggestions regarding which CSS file to modify and which properties to change/add. Thank you!

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Looking at your code, this is a very very VERY bloated theme. Seriously, there’s no reason a page that simple should take over 4 seconds to fully load.
In addition to the “way too many nested DIV’s” issue, areas above and below the header menu span the entire page, so you can’t actually change just that section of the header to white background.

From the looks of things, this theme creates its CSS dynamically on page load, so chances are it’s going to be a hassle to fix. I would really recommend you find a different theme that’s easier to CSS edit, because any time you want to change something that’s not in the “Theme Options” you’re going to run into issues.

I know this isn’t the answer you were hoping for, but you’ve kinda backed yourself into a corner with your theme choice.

Method 2

The easy CSS fix is this:

#pagelines_content{background:#0000ff;}

You can plug this into the custom code in your WP Dashboard at PageLines > Settings > Custom Code > CSS Rules.

This is NOT their recommended way, but a very straightforward way to do it.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment