Site logo

[Resolved] Add A Border To PageHeader Image

Home Forums Support [Resolved] Add A Border To PageHeader Image

Home Forums Support Add A Border To PageHeader Image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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/tKEsn

    #128111
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a shot:

    .single .page-header-image-single {
          border: 20px solid #FFF;
    }
    #128144
    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

    #128149
    Tom
    Lead Developer
    Lead Developer

    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.

    #128158
    Sean

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

    #128160
    Tom
    Lead Developer
    Lead Developer

    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/

    #128165
    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/

    #128177
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #128201
    Sean

    Magnificent. That worked beautifully.

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

    #128203
    Tom
    Lead Developer
    Lead Developer

    As a hard-core Canucks fan, I really hope he isn’t haha

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.