Can I have different background colors on different pages?

gnocchicat · Member · Oct 20, 2014 at 10:06 pm
Copy link

Add topic to favorites
Hi,
I’d like to have different background colors on different page (using Ubud theme) – is this possible? If so how do I do it?
Thanks, Emma

The blog I need help with is: (visible only to logged in users)
timethief · Member · Oct 20, 2014 at 10:12 pm
Copy link
No. When you upload an image or change the color of a background on any theme here it applies to every page in the blog.
timethief · Member · Oct 20, 2014 at 10:14 pm
Copy link
OH no! I did it again. I apologize. This is a CSS thread and I apologize for not noticing that. Please ignore what I posted and wait for Staff or another volunteer to help with your CSS editing.
gnocchicat · Member · Oct 20, 2014 at 10:14 pm
Copy link
Thanks
thesacredpath · Member · Oct 21, 2014 at 2:49 am
Copy link
Hi @gnocchicat, this can be done with CSS by using specific page id body class selectors to target individual pages.

Using your about page as an example, I used the web inspector in my browser and found the opening body tag in the HTML for your about page and see this
<body class="page page-id-1 page-template-default...
page-id-1 is the unique body class CSS selector for your about page. We can then use that and target your about page and change the background color like this
```
body.page-id-1.custom-background {
    background-color: #66dd33;
}
```
Give that a try, and excuse my obnoxious green demo color. :)
gnocchicat · Member · Oct 21, 2014 at 6:04 am
Copy link
Thank you very much for your help, I’ll give it a go.
thesacredpath · Member · Oct 21, 2014 at 5:13 pm
Copy link
You are welcome, and if you run into problems, please let us know.

No items found.