Different Picture in Header on each Page

Home Forums WordPress Themes – Premium Luminescence Different Picture in Header on each Page

This topic contains 10 replies, has 40 voices, and was last updated by  Andreas Gerber 5 years, 9 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #14368

    Andreas Gerber
    Participant

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

    Thank you in advance!

    #18666

    Sushil Adhikari
    Moderator

    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

    #18668

    Andreas Gerber
    Participant

    Ok… got that… works fine … 🙂

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

    #18669

    Sushil Adhikari
    Moderator

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

    #18670

    Andreas Gerber
    Participant

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

    Thank you VERY MUCH indeed!!! :blush:

    #18671

    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)

    #18710

    Andreas Gerber
    Participant

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

    #18712

    Sushil Adhikari
    Moderator

    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.

    #18714

    Andreas Gerber
    Participant

    Isn´t both in the style.css?

    #18715

    Andreas Gerber
    Participant

    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… 🙁

    #14369

    Sushil Adhikari
    Moderator

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.