Need to change background of one specific page

Howdy!

Diana was helping me and I believe that she did but I underestimated my own abilities. She gave me code for changing the background on one specific page but I don't think I know where I need to place these specific code elements. I also do not know how to select the page I want to change (where in the code snippet did she give me do I enter the specific page?)

Here is the code exactly as she gave me in the chat session (i think the 'http://' might be accidental in what she was typing but I don't know):

for example, to change the homepage background you can use:

http://body.home {background-color:#999}

all pages will have a class that you use like:

body.single-post {}
http://body.archive {}

So if someone can help me understand this better I would be much appreciated. And again, I just did not get enough clarification from Diana. She was a great help.

Peace,
-Albert

  • Luís

    Hi Albert ,

    Hope you're doing well today!

    Firstly, the "http://" as you mentioned was a typing error.

    You will need to add the code given by my teammate Diana in the left panel, Theme Settings -> Global Theme CSS. When you click in this link, it will open a CSS editor, where you can add the CSS code.

    I.E: If you want to change the background for the home page:

    body.home {background-color:#999}

    Also, if you want to change the background color of a certain region, you can do that without changing the CSS:

    1) Click in Edit Region (pencil icon);

    2) Click in the Regions Settings (green button) ;

    3) Change the color in the color selector;

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Albert

    Luís,

    Thanks for getting back to me. That does give me a little clarification. But the home page is not the page that needs a different background.

    How do I specify a different page? For example, I create a page that is located at URL:
    http://www.weareonebodyradio.org/great-stuff (this does not exist, I just made it up)

    How do I identify that page in the code provided?
    body.great-stuff {background-color: #999} ????

    Thanks Luís!

    Peace,
    -Albert

  • Luís

    Hi Albert ,

    Hope you're doing well today!

    In that case you will need to use the page ID to change the background just in that page.

    1) You can hover the page title in the WordPress Dashboard (menu item Pages) and check the url;

    2) You can use a tool provided by the browser. If you use Chrome, you can use the Developer Tools (View > Developer > Developer Tools).

    Then, your code should include the page ID:

    body.page-id-220 {background-color: #999}

    Also, I think this article may interest you:

    https://premium.wpmudev.org/blog/chrome-developer-tools/

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.