Different Picture in Header on each Page

[Andreas Gerber]

Hi… is it possible to place an individual image on each page in the place marked red?

Thank you in advance!

[Sushil Adhikari]

Absolutely…I just realized I did not do a tutorial for that on this theme, but the Celestial Reloaded one will be the same” and will show how that is done:
https://www.styledthemes.com/celestial-reloaded-setup/82-how-to-show-any-widget-on-specific-pages

[Andreas Gerber]

Ok… got that… works fine … 🙂

but… ahm… how do I cut the distance between top and content of the picture/banner?

[Sushil Adhikari]

Please send me a link and I will see what is creating the space.

[Andreas Gerber]

Just take a look at http://blog.galactic-retriever.de/?page_id=10

Thank you VERY MUCH indeed!!! :blush:

[Anonymous]

Thanks for the link… much easier 🙂

Below the header image you have is done from the container lum-banner which has a bottom margin. The styling is line 980 of the style.css file:

#lum-wpheader, #lum-banner {
margin-bottom: 3.125em;
}

The top part is the content-inner with a padding. Styling is found line 119

#content-right .content-inner {
padding: 4.25em 2.25em 4.25em 0;
}

I use em units for measurement but you can use pixels if you prefer. EM’s are relative which works better for a responsive website, but and px are fixed dimensions. You can use http://www.pxtoem.com to convert px to em and vice versa.

Don’t forget to read up about WordPress child themes because if you plan to make core theme file modifications, and then make theme updates later, your changes will be lost. Also, please note that changes to the above containers may affect other parts of your website on other pages.

Oops! I just realized I posted this with my other user account instead of my Admin. Still, my answers would be the same B)

[Andreas Gerber]

Please take another look… i just changed the measurements to zero, but nothing happened… – what i´m doing wrong? stupid me… :blush:

[Sushil Adhikari]

I’m not sure where you made changes to the second css, but when I looked at the source code, it still showed the default sizing:

#content-right .content-inner {
padding: 4.25em 2.25em 4.25em 0;
}

To reduce the top padding space, the code should be like this to make it zero for the top area above your banner:

#content-right .content-inner {
padding: 0 2.25em 4.25em 0;
}

Then below the banner, your image is wrapped in a

paragraph tag set which has a bottom margin (adds space below it). I would remove the

from the widget you are using for your banner image and just have the image there only. But, add a class=”alignright” or class=”pull-right” to your tag.

[Andreas Gerber]

Isn´t both in the style.css?

[Andreas Gerber]

Ok… i now changed the paragraph tags and set the content padding to zero… but… still not really doing anything… i think…

EDIT: Oh well the top space has melted ( I didnt reduce it complete by now) … but the lower one is still a gap… 🙁

[Sushil Adhikari]

The other container that has space is this around line 116

#content {
padding-top: 1.875em;
}

IMPORTANT: But be careful how much space you remove because other pages will also be affected that do not have a banner header image.

[Author]

Posts