Add A Border To PageHeader Image

[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/tKEsn

[Tom]

Give 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-development

[Sean]

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

[Tom]

You 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-development

[Sean]

So I’m trying to play around with that, but it takes the image away from the index page.

[Tom]

Do 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-development

[Sean]

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/

[Tom]

Try 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-development

[Sean]

Magnificent. That worked beautifully.

Thank you so much, and we will see soon if McDavid really will be the next great one 😛

[Tom]

As 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

[Author]

Posts