In this tutorial, I will walk you through Adding a larger header to the Modern Blogger Pro theme by Pretty Darn Cute Design, a modern, feminine WordPress theme.
The Modern Blogger Pro theme by Pretty Darn Cute Design allows you to upload a custom header. The header size recommended by the theme is 720px by 328px. This header image reduces in size by 50% in order to remain mobile responsive and retina ready.
I have received many requests for guidance on adding a larger header into the Modern Blogger Pro theme.
As always, making any adjustments to a theme beyond setting it up to look and function like the demo is beyond the scope of theme support. This includes adding in a larger header image.
I recommend using Firebug to help identify where you need to make adjustments.
To increase the header size, you will need to update the custom header size (to twice the size you wish to display your header at**) in your functions.php file, (look for this):
Replacing the width and height in that section with your new width and height.
and then update these areas in your stylesheet:
If you want to reduce the gap between the header and your navigation on a mobile device, add this to your media queries, under the 767 break-point:
Note that this will make your header no wider than 320px on any device smaller than 767px wide.
** The Modern Blogger Pro theme’s width is 1148px. This means that if you want a truly full-width header image, you should make your header image twice that width (2296px), so that it will remain retina ready.
So, in order to be able to upload a header image at 2296px, you will need to update the functions.php file to be 2296px.
(As a reminder, customizing the header to anything beyond what is in the theme’s demo is beyond the scope of theme support)
To center the header:
Open up your stylesheet, and look for this:
Replace it with this:
Leave a Reply