- This topic has 9 replies, 2 voices, and was last updated 5 years, 6 months ago by
Tom.
-
AuthorPosts
-
August 10, 2015 at 6:46 am #128072
Sean
I’m trying to add a 20px white border to my pageheader image on the post page(not the index).
See in detail here:
http://imgur.com/a/tKEsnAugust 10, 2015 at 9:17 am #128111Tom
Lead DeveloperLead DeveloperGive this CSS a shot:
.single .page-header-image-single { border: 20px solid #FFF; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 10, 2015 at 10:18 am #128144Sean
Or maybe another thought, I know this doesn’t exactly relate to the original purpose of me opening this thread. However, I was thinking maybe like a parallax effect.
This is currently how my website looks: http://sj3.me
August 10, 2015 at 10:40 am #128149Tom
Lead DeveloperLead DeveloperYou can use a parallax effect if you choose to set the image as a background image through the “Content” tab of the Page Header. In this case, you’ll have to add some sort of content to the content textarea, even if it’s an empty HTML tag.
You’ll also want to use top/bottom padding to add height to the content area.
BTW – McDavid is a beast.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 10, 2015 at 11:11 am #128158Sean
So I’m trying to play around with that, but it takes the image away from the index page.
August 10, 2015 at 11:17 am #128160Tom
Lead DeveloperLead DeveloperDo you have the checkbox set to the use the page header on the blog page? If so, uncheck it.
Then add a regular image to the “Featured Image” metabox: https://en.support.wordpress.com/featured-images/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 10, 2015 at 11:47 am #128165Sean
I gave up on that idea, because I would need to make two separate images every time(because the featured image is always different with the height.
So I went back to square one, with the white 20px border. My image is 920px wide. Doing the math, it should add up to my layout width(960px). However, there seems to be a gap: http://sj3.me/sports/edmonton-getting-away-with-robbery/
August 10, 2015 at 12:02 pm #128177Tom
Lead DeveloperLead DeveloperTry this instead:
.single .page-header-image-single { padding: 20px; background-color: #FFF; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 10, 2015 at 12:56 pm #128201Sean
Magnificent. That worked beautifully.
Thank you so much, and we will see soon if McDavid really will be the next great one 😛
August 10, 2015 at 1:09 pm #128203Tom
Lead DeveloperLead DeveloperAs a hard-core Canucks fan, I really hope he isn’t haha
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.