Hey,
Thanks, glad you like it!
Period Pro has a header image feature that lets you do exactly this.
Otherwise, it can be done with a child theme by customizing the header.php file a bit. If you’re comfortable making some changes to the code, I can walk you through that customization as well.
Oh can you? I know basic html I think I can follow. Thanks again!
Sure thing!
Here’s a link to a Period child theme you can download:
http://pics.competethemes.com/0w2Q1v0U0W1G
You can upload the zip file through the Appearance menu like an ordinary theme, and then activate it on the site.
Right away, you should see an image like this at the top: http://pics.competethemes.com/0h0H3f3l1W3D
To change the image, click on the “Editor” link under “Appearance” menu in your dashboard, and you should see the style.css file (screenshot). The part you’ll need to change is “http://i.imgur.com/8FMwA7f.jpg”. That link is currently for the waterfall image being used as a placeholder. You can use any image URL including one from your Media library.
Lastly, this part of the CSS loosely defines the height:
padding-bottom: 20%
If you want the image to be taller/shorter, increase/decrease the “20%” value. Sizing the image this way makes it responsive, so it doesn’t get really tall on mobile devices.
Oh thank you so much!!!
By the way, I’m planning to buy the Pro version, If I buy it, will the codes I added disappear? (Google analytics, Meta, etc)
One last question Ben, how can I put a link to the header image? Thanks!
No problem 🙂
You can upgrade to the Pro version without any issues. That said, if you do upgrade, I would recommend switching from the Period Child theme back to just the Period theme and using the Header Image feature Period Pro adds. This will make it easier to switch out the image and resize it, and there is an option for linking it to the homepage.
A link can be added to the header image with the child theme in a few steps.
First, update line 14 in header.php of the child theme from this:
<div class="custom-header-image"></div>
To this:
<div class="custom-header-image"><a href="http://google.com"></a></div>
Then replace the link to Google with the URL you want. Lastly, add the following CSS to child theme’s style.css file:
.custom-header-image {
position: relative;
}
.custom-header-image a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
thanks so much for the assistance!
