The Fun theme by Pretty Darn Cute Design is a very versatile theme, which comes with the header upload function, making it easy to upload a header which is both mobile responsive and retina ready. The demo uses a header size which is 640px by 200px; this size is reduced in the stylesheet, so that the header displays at 320px by 100px – the perfect size for viewing on a mobile device.
As part of providing theme support, I have been asked a number of times about how to add a larger header in the Fun theme. Since this question is outside the scope of theme support*, I thought it appropriate to write a post, and tell you how to do just that.
Increasing the header size beyond the demo’s size is beyond the scope of theme support. I am happy to point you in the right direction, but we cannot guarantee the results. You may need to make further adjustments to CSS, particularly in the media queries, as this will cause a gap between your header and your navigation.
For a larger header, you will need to update your functions.php file, and then your stylesheet. Adjust your custom header size in your functions.php. (To access your functions.php file through your Dashboard, go to Dashboard > Appearance > Editor > Theme Functions. Look for this:
//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘width’ => 640,
‘height’ => 200,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false,
) );
The custom header size should be twice the size of how you wish to display the header on your site, in order to remain retina ready.
The theme’s demo displays a 640px by 200px header at 320px by 100px.
Once you have updated your functions.php file, you will need to update your stylesheet in two locations. To access your stylesheet, you can do it via your Dashboard by going to Dashboard > Appearance > Editor > Stylesheet.
.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 100px;
margin: 10px auto;
text-indent: -9999px;
max-width: 320px;
}
You will need to adjust the height and max-width here to match the size at which you want your header to display. For example, if you have loaded a header image to your site at 1000px by 400px, change the height here to 200px, and the max-width to 500px.
.site-title {
align: center;
font-family: ‘Source Sans Pro’, sans-serif;
font-size: 48px;
font-weight: 300;
letter-spacing: 4px;
line-height: 1;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
max-width: 320px;
}
As above, changing the max-width to your desired width.
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:
.header-image .site-title > a {
float: none;
height: 100px;
width: 320px;
}
As always, be careful when adjusting anything in your functions.php file. Any mistake here will crash your site. For this reason, you should have a fresh functions.php file available to upload to your hosting site via either FTP or cPanel.
* Why is this outside the scope of theme support you may ask?
Theme support for any of the Pretty Darn Cute Design themes is limited to setting up the site to look and function like the demo; changing the header size is customization.
Have you purchased the Fun theme, but not yet installed it? Did you know I offer a theme setup service? I can have your site set up to match the theme’s demo settings in under 24 hours. You can learn more here: (24 hour theme setup)
If you’ve already installed the theme, and just want assistance with adding a larger header, I’m available to do that, too! Just ask here: (talk to Susan!)
Leave a Reply