Simple way to create a retina ready header / logo for Genesis themes

Simple way to create a retina ready header / logo for Genesis themesIn my pre-Macbook days I'd go about my online business with my head in the clouds thinking everything looked lovely. But then came the Mac... and retina display, super crisp sharp display, a real visual treat.... um except on my header images, which appeared a little fuzzy. Gah! This needed fixing, but how? Some themes come with retina logo display options in their theme settings, but not that many in the grand scheme of things. So I turned to Google and found a few ways of introducing retina images to my headers but the ways I found involved installing a new plugin or making changes to my theme functions file, which if I am totes honest is just a little scary for the likes of me. So I took things back to the old school...

Here's my simple way to create a retina ready header / logo for Genesis themes

I already have the Genesis Simple Hooks plugin installed on all my Genesis themed blogs and have had no issues, I love the way it works - and it turns out it's the simple key to making a header looks awesome for retina display.

Once installed, activate the plugin and head to Dashboard> Genesis> Simple Hooks and scroll down to the Header Hooks section. It's the second box down you need the one that says:

Genesis Header Hook This hook outputs the default header (the #header div)

All I did then was to place a simple align centered div in there, with a link to my homepage, a link to a larger version of my header (think at least twice as large) and set the width and height of how big I want it to display.

Simply modify this html to your needs add it to the box as described above and 'Save' (just change the site url, image url and the width and height values to suit):

<div align="center"><a href=""><img src="http://Your-Large-Image-Size-Here.png" alt="Your title here" width="150px" height="150px" /></a></div>

BritMums Live in Bullet Points

Kids Room Style File