Full-Width Template: Content background color

[Michelle]

Hi Bill,
I’m trying to change the content background of my portfolio pages to #333333 from white. How can I do this? I’d love to know how to do it in the style sheets “across the board” as well as for individual pages using the page ID if possible. Here’s a link for reference http://www.griffgirl.com/woof/portfolio/

Thanks!

[Bill Robbins]

Michelle,

Great question. The background color is set in the #page-wrap div so you can change the color there and that should make it work across the full-width, blog and default page types. Something like this:

#page-wrap {
background-color: #333333;
}

If you run into any trouble or questions, just let me know.

Have a great weekend,
Bill

[Michelle]

I’m assuming I’m supposed to enter that in the custom CSS box under Styling… it didn’t change the pages though. Is it because I have a slide show on those pages?
http://www.griffgirl.com/woof/portfolio/

[Bill Robbins]

Michelle,

You’ve got it in the right spot. You’ll probably need to clean out the WP Super Cache cache to see the changes though.

Also this style will override the one I gave you since it sits on top of the wrapper:

.page-template-page-full-php #page-wrap {
	background-color: #333333;
}

You should be able to remove that now.

Thanks,
Bill

[Michelle]

I appreciate your quick replies, thank you!

I did read on the forum last night while searching for the answer that WP Super Cache could affect what I see for results, so I’ve had it disabled since last night. Still not having luck on that background though.

Now something appears to have happened though where the text is black against the dark gray?!?
http://www.griffgirl.com/woof/resume/

Here’s what I had in my CSS beforehand; I changed it back, and now this is happening.
#content.full {
background-color: #333333;
color: #FFFFFF;
}

#page-wrap {
background-color: #333333;
}

[Bill Robbins]

You can add the color to the #page-wrap too. It could look like this:

#page-wrap {
	background-color: #333333;
	color: #ffffff;
}

That should keep the color white and the background dark gray for you.

Let me know if that doesn’t work for you.

[Author]

Posts