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

[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.

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[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;
}

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jusung]

Thank you millions!!!!!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts