[Resolved] Want to change the background color on a single page.

Home Forums Support [Resolved] Want to change the background color on a single page.

Home Forums Support Want to change the background color on a single page.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2339842
    Jusung

    Hello.

    I want to change a single page’s background color while not changing the background-colors on other pages.

    I know the code for that, but I don’t know the specific ID for a page.
    Is there a way to know the ID or do I need to set the ID? if so, how I can give an id to a page?

    I want to change only the front page’s background color to white.

    #2339884
    Matthew

    There are a couple easy ways to do this:

    1. Use a body class to target your CSS: Each page/post in wordpress has a unique class added to the body tag which includes the ID of the page. You can target that CSS class to change the background color on only that page.

    2. Use Inline CSS (recommended): Use the HTML block to add inline CSS to the page/post itself. Simply add your CSS between <style></style> tags. Like this:

    <style>
    body {
       background-color: #fafafa;
    }
    </style>

    By pure luck, I’ve actually written a tutorial on this on my site: https://www.buildthatwebsite.com/change-background-color-specific-page

    #2339891
    David
    Staff
    Customer Support

    Thanks for sharing that Matthew.
    Jusung – let us know how you get on 🙂

    #2340152
    Jusung

    Thank you Matthew and I read your article.

    on our article, you explained how to find the ID well and I was able to resolve this now!

    Thank you!

    #2340284
    Jusung

    an issue has occured.

    I was able to change the background color of a single page.
    but on mobile, it has been changed. I don’t know why.

    Can you help me to change the background color to white on mobile device
    (front page)

    This is what I added
    body.page-id-766 {
    background-color: white;
    }

    #2340327
    David
    Staff
    Customer Support

    Ok, so you have the Customizer > Color > Body, which is now white on that page.
    But you also have the Customizer > Color > Content, which is the other color you see due to the padding on mobile.

    You can use this CSS to target both elements:

    
    body.page-id-766 .inside-article,
    body.page-id-766 {
        background-color: white;
    }
    #2340330
    Jusung

    Thank you millions!!!!!

    #2340439
    David
    Staff
    Customer Support

    You’re welcome

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.