The Right Way To Add A Retina Ready Logo To Your Genesis Child-Theme

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.

Genesis default header image
Genesis default header image

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.

Header-settings
Genesis Header image setting

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.
}
Genesis-child-theme-logo-retina-ready-
Clickable Logo Set-up

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.

Posted In:

UX UI Front-end Development, Code Snippets, Genesis WordPress Theme Framework Child-Theme

Comment on The Right Way To Add A Retina Ready Logo To Your Genesis Child-Theme

Your email address will not be published. Required fields are marked *