Add header photo (Penscratch theme)

  • Unknown's avatar
    majamalmcrona · Member ·

    Hiiii y’aaalll! I need your help (…..once more).

    I have the Penscratch theme, and I want to add a photo header. Right now I just have the page title as the header, but I would like it to look like this:
    https://majaelsas.files.wordpress.com/2016/06/screen-shot-2016-06-13-at-15-03-07-2.png
    (However probably with a different photo, this one was just a test)

    Anyone got any clue? Simply adding the photo in the CSS customization doesn’t work, then it ends up like this:
    https://majaelsas.files.wordpress.com/2016/06/screen-shot-2016-06-13-at-15-17-49.png

    Thank you so so so much in advance! Love love love

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    michaelvandenberg · Member ·

    Howdie!

    This should make the header look a bit like the header in you screenshot: 

    .main-navigation {
	margin-top: 0;
}

.site-branding {
	margin-bottom: 0;
	padding-top: 50px;
	padding-bottom: 150px;
	background-image: url(https://cldup.com/1voiUGdrFs.jpg);
}

.no-sidebar .site {
	padding: 0 0 54px 0;
}

.site-content {
	0 108px;
}

    Replace this:
    https://cldup.com/1voiUGdrFs.jpg
    With an image of your own. :)

    Let me know if this works!

    Best regards,

    Michael

  • Unknown's avatar
    embsaintcloud · Member ·

    Hi Michael,

    Your reply to Maja was exactly what I was after. Thks!

    Is it possible on top of the code you provided to add controls over the dimensions of the image specified in site-branding? ?

    I would like my image to be higher. Say 300px high. Is there a way to set that? At the moment, it is automatically cropping.

    Many thanks,
    Marie-Luce

  • Unknown's avatar
    thesacredpath · Member ·

    Marie-Luce, it looks like you have gotten this done by making the image 937 × 300 pixels. Please let me know if I am mistaken or if you need additional help with that.

  • Unknown's avatar
    mlbruyeron · Member ·

    Hi there,
    Thanks for your reply!

    What I had initially was just the Header Image you can select to display in Appearance > Customize > Header Image. But I wanted the header image on top of the tab menu, not under.

    So I tweaked things around a bit, disabled the header image, used the code above and I’m almost there. I changed the padding values and my image is the right size now.
    So I have this now:

    .site-branding {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 300px;
    background-image: url(‘https://cldup.com/1voiUGdrFs.jpg’);
    }

    However this background image is not responsive anymore. When I resize the screen, I see it getting cropped or tiled… Do you know if I can improve on this to make it as neat as the header image was?

    If not, I might revert to my original settings.

    Cheers!
    Marie-Luce

  • Unknown's avatar
    thesacredpath · Member ·

    Marie-Luce, this is a bit of a tricky thing to do on responsive designed themes such as Penscratch. Let’s start with this. First off, copy out your .site-branding CSS rule and paste it into a plain text file for safe-keeping and then replace it with this. I’ve added background-repeat and background-size declarations and also changed your bottom padding to 30% instead of 300px so that the height of the .site-branding div will adjust better on smaller screens. 

    .site-branding {
    background-image: url("https://embsaintcloud.files.wordpress.com/2016/06/cropped-img_8591-edit-2-2.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin-bottom: 0;
    padding-bottom: 30%;
    padding-top: 0;
}
  • Unknown's avatar
    mlbruyeron · Member ·

    It’s perfect, thank you so much!

  • Unknown's avatar
    thesacredpath · Member ·

    Hooray and you are welcome!

  • The topic ‘Add header photo (Penscratch theme)’ is closed to new replies.