Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to change individual page background colour
- This topic has 9 replies, 4 voices, and was last updated 9 years, 10 months ago by erolemed.
-
AuthorPosts
-
May 23, 2014 at 6:25 pm #106560erolemedMember
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.comMay 23, 2014 at 10:04 pm #106567Davinder Singh KainthMemberUse 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 ThemesMay 24, 2014 at 9:29 am #106609erolemedMemberthanks for this tip. the plugin changed header colour but not the entire page
May 24, 2014 at 9:46 am #106610bryanlewisMemberDo you want each page to be a different color?
Bryan Lewis • Ready Set Go! • Find me on Twitter • Google+ • Blog
May 24, 2014 at 8:13 pm #106641erolemedMemberHi 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.
May 25, 2014 at 2:27 pm #106706JanHoekParticipantYou 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.
May 25, 2014 at 4:30 pm #106721erolemedMemberHi 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
May 26, 2014 at 3:11 am #106792JanHoekParticipantI 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.
May 26, 2014 at 10:31 am #106829bryanlewisMemberIf 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
May 29, 2014 at 4:26 pm #107374erolemedMemberThanks 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.