[Resolved] How to decrease the padding within the header image

[Roslyn]

I am customizing the Target theme, and I’d like to decrease the padding around my header image. Although I have activated “spacing” and followed the directions at https://docs.generatepress.com/article/header-padding/, this showed me the breakpoint size, not the padding.

And is there a way I can change the body’s background image on individual pages?

I am also wondering what my best options are for adding social media buttons – both to follow the site and to share pages from my site on social media.

Thank you!

[Leo]

Hi there

I’m not seeing a header image on the page you linked as you are using the site title.

Can you double check?

Let me know 🙂

[Roslyn]

I’m referring to the logo image I have in the header area of the home page at http://yooptopian.com. Sorry for any confusion with the vocabulary here!

[Leo]

Like the big Yooptopic logo in the middle of the page?

That excess padding is in the original image so you will need to re-crop the image better.

Let me know if this helps 🙂

[Roslyn]

Ah! Okay, great! That will be easy!

Can you also tell me if there’s a way I can change the body’s background image on individual pages?

And the best options for adding social media buttons -both for sharing pages and for following the site?

Thank you!

[Leo]

Different body background for each page requires CSS solution:

body.page-id-xx {
    background-image: url(http://IMAGE-URL-HERE);
}

As for media buttons, you will need to look for a social sharing plugin. There should be quite a few solutions out there.

Let me know 🙂

[Roslyn]

Thanks!

Okay, I cropped the Yooptopia logo that’s in the middle there, and replaced the featured image on the Home and Products pages with this, but would like to to have the same distance between the bottom of it and the content box on the Products page (and other pages) that there is on the Home page.

I checked in Customizing > Layout > Container, but all the values are the same for these pages as the Home page.

Thanks again for all your help!

[Leo]

Remove this CSS added in the Additional CSS field in the customizer:

body:not(.home):not(.woocommerce) .site.container {
        margin-top: -40px;
}

Let me know 🙂

[Roslyn]

Okay, I just removed that from the Additional CSS field in the customizer, published it and checked it in a different browser – no change.

[Leo]

Something already changed for sure.

Remove this block as well:

body:not(.home):not(.woocommerce).separate-containers .site-main {
    margin-top: 0;
}

[Roslyn]

Just to explain a little more, I’d like the background image to show up between the bottom of the featured image/logo as it does on the Home page on the other pages also.

Thanks!

[Leo]

Answered here:
https://generatepress.com/forums/topic/how-to-decrease-the-padding-within-the-header-image/#post-932844

[Roslyn]

Got it, thanks! (Looks like our replies are criss-crossing.) Have a great night!

[Leo]

No problem 🙂

You as well!

[Roslyn]

Hi Leo! I see now that the right sidebar has separate boxes (is container that correct word here?) for each of the widgets, so the site’s background is visible between them. Is there a way I can bring this back to being one continuous box/container while still keeping space/background visible between my featured image/logo and the content box/container on all my pages?

I would also like the left sidebar to take up less room vertically altogether, if possible. Is decreasing the top and bottom padding enough to take care of this, or are there any additional steps I can take.

Thanks!

[Author]

Posts