addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1linklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

Arizona WordPress Group Message Board › Changing background Color

Changing background Color

A former member
Post #: 1
Can someone please tell me how to change the background color of a single page on our web site, leaving the colors on other pages the theme's default color?
Chuck R.
ChuckReynolds
San Francisco, CA
Post #: 127
well that completely depends on your theme and if you know how to edit your css file or not but here it goes...

Most themes allow wordpress to display a series of classes in the body tag... you'd be looking specifically for one on that page, typically "page-id-{ID}" where {ID} is the ID number of the page... (in admin when you click to edit that page, what's the id in the url.

Example... I edit a page on my site... the URL in the address bar in my admin panel when i click to edit it is
mysite.com/wp-admin/post.php?post=196&­action=edit

Therefore, given that's the page i want the new background color on, in my style sheet i'd add this:

.page-id-196 { background-color:red; }

And, well... that's that.
WP's documentation on body classes for reference: http://codex.wordpres...­
A former member
Post #: 2
Chuck -- Thanks so much for your quick and helpful reply. I haven't tried what you suggested yet, but I will this week.
A former member
Post #: 3
Hi Chuck....I have tried what you suggested a couple of different ways, with no results. Does this command have to go into a certain section of the Style Sheet?
Chuck R.
ChuckReynolds
San Francisco, CA
Post #: 130
why don't you share the URL and the page you want and I'll see if I can't help out better
A former member
Post #: 6
Thanks so much, Chuck, for being willing to help. My site's page I think I'd like to change background color to yellow, just to try it out, is this http://www.jackspetsi...­
Chuck R.
ChuckReynolds
San Francisco, CA
Post #: 133
So - it looks like you're already setting the main background color to that blue in your theme...

If you edit your style.css file (through ftp or the edit link under Appearance) you can add this to the stylesheet (style.css) and it should override that blue on that page for you.

body.page-id-143 { background-color: yellow; }


edit: Should have explained that. WP gives each page and post a custom class in the body tag for things just like this. I viewed your page source, saw that "page-id-143" is in your body tag which references this page ID... so adding body.page-id-143 is saying do this to class .page-id-143 in the body tag. That should do it.
Cheers
A former member
Post #: 7
Thanks so much, Chuck....I'll go give it a try.
Powered by mvnForum

Our Sponsors

  • Gangplank

    Thank you to Gangplank for allowing us to use their meeting space.

  • Skyhook Internet Marketing

    Special thanks to Skyhook for sponsoring the AZ WordPress Birthday Party

  • SiteLock

    SiteLock® is the global leader in website security solutions.

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy