WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change body color of just one page? (8 posts)

  1. gbelcher1
    Member
    Posted 1 year ago #

    Hey guys,

    I have searched for hours all over the internet and can't figure this out.

    I want the body background (the color behind the text) on a particular one of my pages to change to black. I want all of the rest to stay white.

    I've found various codings such as this:

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

    But where in the heck do I plug that in at? Somewhere in the style.css? I've tried it in a ton of different spots and it doesn't seem to do anything no matter where I put it.

    What am I missing here? Thanks.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, generally you are on the right track, and you'd put it in the style.css file -- at the end. Though really, if you are making changes, you should be using a child theme or custom CSS option or plug in. Otherwise you'll lose all your changes when the theme is updated.

    If you post a link to your site, someone can look at it and see what's going on.

  3. gbelcher1
    Member
    Posted 1 year ago #

    Sorry I might have used the wrong terminology - the "container" might be the better word for it.

    I have a custom background - the image that displays behind all the containers.

    But right now I am working on a full-width page container, and I want the background of the container itself to be black instead of white. Is there a way to do that?

    And as far as showing my site, I have a maintenance mode plugin active right now so that our web visitors can't see the construction in progress as they go to our site...

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, but to target a specific element for the background, you'll need to use the id or class of the element as a CSS selector. So you might have:

    body.page-id-143 #content {
       background-color: #xxxxxx;
    }

    Firebug is great tool for working with CSS -- you can use it to see exactly what CSS is affecting an element on the page, and you can test changes in the browser before making them in the code.

    This is a good CSS resource page that might also be helpful:

    http://www.w3schools.com/css/css_intro.asp

    As I said, it's really hard to be very specific without seeing the site.

  5. gbelcher1
    Member
    Posted 1 year ago #

    Is there a way to show you the site without making it available for the general public to see if they so happen to type in the site?

    We are supposed to have a surprise unveiling of the new site next month and I'm afraid if the link was made live, lots of people would see the in-progress construction before it was ready to go.

    Here is a picture if it helps. This is just your basic full-width page with a featured image stretched across the top and then a normal body of text underneath it. I want to change the white background behind the text to black, but only on this page, not on any of the other full-width pages.

    http://imageshack.us/a/img717/9476/formsapps.png

    I do have Firebug and inspected the element. This is the part of the style.css that seemed to govern that particular background:

    "pagecontent {
    margin: 0px 0px 0px 0px;
    padding: 15px 20px;
    background: #FFFFFF;"

    Changing this background hex code to black does what I want on the page, but unfortunately because it is the style.css, it does it to all of the other pages as well.

    I tried the little code you suggested:

    body.page-id-143 #content {
    background-color: #000000;

    and tried plugging it in both under that pagecontent section, and at the end of the style.css itself, and neither seemed to do the trick.

    Thanks for your responses so far.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No way for just me to see it. And images are useless when it comes to CSS coding. What theme are you using?

    Is the "pagecontent" an ID or a class?

  7. gbelcher1
    Member
    Posted 1 year ago #

    WPyogi, I actually was looking through some other posts on this forum, and one of your other responses in that topic actually solved this for me.

    Someone asked how to change the post title color of just one page, and you responded with this:

    .page-id-265 #content .entry-title {
    display: none;
    }

    So I changed that to:

    .page-id-143 #content .pagecontent {
    background: 000000;
    }

    Thanks for all your help!

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Cool, glad you found it and fixed it!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.