- This topic has 15 replies, 4 voices, and was last updated 8 years, 5 months ago by
.
-
Posts
-
I have several pages that I want to make different colors for the background/content. What I mean by background/content is that if I make them both the same color, they become one solid color below the header in the content area. I’ve set the colors in the GP colors but of course the same colors show on every page. How can I change them to different colors in other pages.
Thanks in advance
Lead Developer
Hi there,
Use CSS to target the specific pages (there’s a page-id-xx class in the
<body>element) to remove the background color from the content area:body.page-id-xx { background-color: #FFFFFF; } .page-id-xx .inside-article { background-color: #FFFFFF; }Of course, change “xx” to the page ID.
Let me know if this helps 🙂
Dang, You are the best, did the trick. Do I use the same css for the bottom image that is nestled in the GPHooks “Before Footer” I wanted to show a different bottom image for each page.
Thanks in advance Tom!!!
Absolutely – just target the specific page and the element you wish to target, and you should be good to go 🙂
So I went with this css in my child theme and still does not render the image on page-id 46.
.page-id-46 .site-footer {
background-image: #ffffff url(http://provinciawebdesign.com/disruptup/wp-content/uploads/2015/04/bottom_home.png);
width:100%;
}or this
.page-id-46 .site-footer {
background: #ffffff url(http://provinciawebdesign.com/disruptup/wp-content/uploads/2015/04/bottom_home.png);
width:100%;
}The second block there should work (no -image in attribute name).
If not, can you link me to the page so I can see if any styles are overwriting it?
You can see the image behind the image that is nestled in GPHooks for the home page.
(http://provinciawebdesign.com/disruptup/?page_id=46). But just can’t get the GPHooks image to go away.Ah, so you’re trying to display a different image inside GP Hooks for each page?
If so, you’ll need to use PHP conditionals.
For example:
<?php if ( is_page( 'page-slug' ) ) : ?> Image for yourURL.com/page-slug <?php endif; ?> <?php if ( is_page( 'another-page' ) ) : ?> Image for yourURL.com/another-page <?php endif; ?>Then click “Execute PHP” for that hook.
For the purpose of the client changing out images, can I just use css in the Child Theme as below instead of PHP in GPHooks.
.page-id-46 .site-footer {
background: #ffffff url(http://provinciawebdesign.com/disruptup/wp-content/uploads/2015/04/internship_bottom.jpg);
width:100%;
}.page-id-2 .site-footer {
background: url(http://provinciawebdesign.com/disruptup/wp-content/uploads/2015/04/bottom_home.png);
width:100%;
}By the way I just converted an affiliate company of ours to use GP, great stuff!!!
Thanks!
CSS can only change out background images (which are set in the CSS) – not images added directly inside GP Hooks.
Anything in GP Hooks either has to be shown/removed using PHP if conditionals, or it will show up globally across the entire site.
Hello
I’m using GeneratePress and with the Modul Background Images i give the Body-BG an Image.
But, i want different Images for some Pages.
I tried to set different Background-Images with this Code in the CSS-File:body.page-id-96 {
background: url(‘images/pic_3.jpg’);
}
body.page-id-123 {
background: url(‘images/pic_3.jpg’);
}
body.page-id-130 {
background: url(‘images/pic_3.jpg’);
}
body.page-id-132 {
background: url(‘images/pic_3.jpg’);
}
body.page-id-82 {
background: url(‘images/pic_2.jpg’);
}
body.page-id-111 {
background: url(‘images/pic_2.jpg’);
}
body.page-id-114 {
background: url(‘images/pic_2.jpg’);
}The Pic from Page-ID 96 is visible, the other ones aren’t.
When i remove the Global Background Setting is it still the same.
Question: Is this wrong Code?Try changing “background” to “background-image”.
Also, make sure the path to the image is correct.
Other than that, I’m not seeing any issue with the above 🙂
I want to alternate the background color of posts. How do I do that should I use hook? Or, edit the CSS?
I am not a coder, is there any thread that teach how to use the hooks?
That’s actually possible with some simple CSS 🙂
For example:
.type-post:nth-child(even) .inside-article { background: #DDDDDD; color: #000000; }Or you can target odd posts:
.type-post:nth-child(odd) .inside-article { background: #DDDDDD; color: #000000; }Thanks Tom! Your theme and your support is admirable. No wonder generatepress is really popular! Keep up the good work!
- You must be logged in to reply to this topic.