There are several ways to add a logo to your Genesis child-theme. However what’s the right way to do it? It’s the era of retina ready screens and you don’t need a MacBook, even the more common cellphones flaunt a retina ready screen. Do you want the logo to look blurry on these screens?
A logo is (usually) not the same as a header image
Well, most of the times the header image does it. It allows you to upload your graphic and that graphic is set as a clickable header image that stretches across the entire header. The problem with this approach is that the entire header becomes clickable.
Secondly header-image functionality is non-standardized. It’s a free-for-all for every child-theme. Also, most code snippets just style the .site-title to show a background image. However the clickable element semantically is the anchor (.site-title > a) and that is what should get the clickable logo graphic.
Here’s an elegant solution to implementing a retina-ready logo to your site.
1. Set the site to show a header-image (such that logo controls still work)
The Genesis header settings don’t do much except for adding a class to the body which acts as a selector to help CSS style the header with a logo. Just head on to Genesis > Theme Settings > Header and set the site-title to show an image logo. This will add a body class .header-image which we will use in our CSS selector in the following steps.
2. Upload the logo graphic
Upload your logo graphic. You can use the media uploader or S/FTP for this one. The important part is that in order to make the logo retina-ready, upload a logo size that’s at least twice the required size. Eg. If you want a logo 100px wide by 50px tall, then your logo graphic should be at least 200px wide and 100px tall.
3. Implement the CSS
.header-image .site-title a {
display: block; // Display block so that we can set width, height and other attributes.
width: 100px; // Set the required width (Should be half the graphic width to be retina ready)
height: 50px; // Set the required height (Should be half the graphic height to be retina ready)
text-indent: -9999px; // Push the text off screen so that it doesn't overlap/duplicate over the logo graphic
background-image: url(images/logo.png); // Set the logo graphich as the background image
background-size: cover; // Make sure that the logo graphic covers the dimensions of the site-title (Must for retina ready)
}
// Want to hide the site-description/tagline also?
.header-image .site-description {
text-indent: -9999px; // Push the text off the screen so that it is not visible.
height: 0; // Make the height 0 so that no extra vertical space is seen.
margin: 0 0 0 0; // Kill margins to eliminate vertical margin space.
}
What we’ve just done is implement a logo that is not only clickable but is also confined to the size of the logo graphic and is retina-ready. This code is implemented such that the Genesis > Theme Settings > Header image controls still work and you can just set it to disable the logo just with a single click.
