How to change individual page background colour

[erolemed]

Hi there, I would like to change the background colour to my individual pages. I use executive pro, how can I do that? thanks

http://www.engjigyotenkai.com

[Davinder Singh Kainth]

Use this plugin - https://wordpress.org/plugins/custom-background-extended/ to set individual background color / image from post editor screen.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[erolemed]

thanks for this tip. the plugin changed header colour but not the entire page

[bryanlewis]

Do you want each page to be a different color?

---

Bryan Lewis • Ready Set Go! • Find me on Twitter • Google+ • Blog

[erolemed]

Hi Bryanlewis, not each page but only few pages, for example there was a mining accident and I wanted to have an all black page(http://engjigyotenkai.com/?page_id=707). No luck. For this particular page I don't want any header either, and no menus. I heard you could assign colours based on page id's at style.css and I tried one but I was not successful. Thanks for helping.

[JanHoek]

You can do this with some extra style in your CSS:

Example

body.page-id-11 {
        background: #000;
}

body.page-id-22 {
        background-image: url("background.jpg");
}

Change the page ID number with the page number you like to change. Preview the page in the dashboard. Then you`ll see the ID in the url

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[erolemed]

Hi JanHoek, thanks for the tip. I tried it for the colour but no luck. I put the code arbitrarily from line 290 I suppose where it is written do not matter. It is in the child theme style. css (executive pro) not in the Genesis

[JanHoek]

I see the line

body.page-id-707 {
background: #000;
}

but 707 is not an ID number on your website.

I tried ID 65 (your service page ) and worked perfect

body.page-id-65 {
background: #333;
}

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[bryanlewis]

If it were me, I wouldn't use the page ID. I like to keep things clean so I'd add a custom body class to the page that I want to have the custom background. This is easy to do in Genesis. There is a "Layout Settings" where you can add a "Custom Body Class" on any page. This is where you can add your custom body class.

For example, if your page title was "Services" I'd add "services-page" to the "Custom Body Class" field in the "Layout Settings". This way if the ID is to change down the road somehow you are future proof and the "Custom Body Class" (services-page) will remain the same.

Then you can add the following CSS to your stylesheet.

body.services-page {
background: #333; /* Any CSS color here */
}

See if that works at all.

---

Bryan Lewis • Ready Set Go! • Find me on Twitter • Google+ • Blog

[erolemed]

Thanks for this Bryan, I could not quite figure out how to use page names. For example the page I had originally in mind (page id 707) has a long name ("TJT Mourns Soma Mine Accident Deaths"), and I don't know how to define this as a name. Also there is no Layout section, but a structures and layout, and when I added the code in that section it gave some messages (overqualified). Bests

[Author]

Posts