Customize Your Footer with a Heart Dashicon

If you take a look at the bottom of the page in my footer, you’ll notice that it does not display the default text that is output by Genesis.

Many sites display “Made with Love” or “Handcrafted with Love” in that space, and I wanted to do something similar with mine. In just a few quick steps it was easy to do.

Enqueuing Dashicons

Dashicons is the official icon font of the WordPress admin as of 3.8, and it’s very easy to load. Simply use the code below in your functions file:

Since dashicons are shipped with WordPress Core, this is all you need to do. You don’t have to load a custom icon font or to do anything else.

Customizing Your Footer

The next step in the process is quite simple as well. Download and install the Genesis Simple Edits plugin on your website.

For those of you who are unfamiliar, this plugin allows you edit the three most commonly modified areas in any Genesis theme: the entry meta in the entry header, the entry meta in the entry footer and the site footer.

After you’ve activated the plugin, go to the Genesis > Simple Edits screen and look for the Footer Output option box at the bottom of the screen.

(Be sure that the Modify Entire Footer Text option is selected.)

Here you should place the following code:

Obviously you can edit the HTML provided with your own name and links to other places. This is simply the code that I use on my own website.

Styling the Heart Dashicon

Depending on what size and color of fonts you have declared in your style sheet, you might need to tweak the CSS a bit for your heart dashicon.

Below is the CSS that I have used on my website to ensure the best look and placement of the heart dashicon in my site footer.

And that is it — you’ve customized your site footer with a heart dashicon!

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

Optimize Gravatars for Retina Display

As a designer and someone who pays close attention to detail, I’m continually searching for ways to make my website look the very best.

When Apple released the Retina display, they pioneered a flawless onscreen performance that remains unmatched. Currently this is available on select MacBook Pros, iPads and iPhones.

These devices pack twice as many pixels into the same space as older devices, giving us an opportunity to serve images that are amazingly crisp.

Spotting the Difference

This tutorial will cover the use of Gravatar images, which are often seen in multiple places on a Genesis-powered website.

The Author Box and Entry Comments are two examples of locations that you’d find a Gravatar being displayed. Below you will see how easy it is to optimize these images for Retina display.

Before we get there, I want to show you the difference in clarity between an unoptimized Gravatar and an optimized Gravatar.

Brian Gardner Gravatar
Normal resolution
Brian Gardner Gravatar
2x resolution

The image on the left is 150px by 150px in size, and being displayed at the same dimension. The image on the right is actually 300px by 300px in size, but resized with CSS and being displayed at 150px by 150px.

If you are viewing this tutorial on a non-Retina device, you won’t be able to see the difference. I highly suggest getting one, for what it’s worth.

Retina Display and Themes

Now that you’ve seen the difference in clarity, let’s move onto putting this into practice. As I mentioned above, the Author Box and Entry Comments are two locations where Gravatars are being displayed.

Thankfully Genesis offers separate filters for you to use in order to change the output in Gravatar size for each location respectively.

Below is the code to modify the Gravatar size in the Author Box:

Below is the code to modify the Gravatar size in the Entry Comments:

I’ve chosen to output both at 96px, which you can change to whatever size you wish. In order to optimize your Gravatar for Retina display, you’ll want to use some CSS to control the size they actually display on your website.

Since we’re choosing to output the Gravatars are 96px, we want to display them at half the size. In this case, that would be 48px.

Styling the Gravatars

By default, the Gravatars have the generic .avatar class applied, so we’ll target each by looking for the container they specifically reside in.

For the Author Box, the class would be .author-box and for the Entry Comments the class would be .entry-comments.

Below is the CSS that you should add to modify the Gravatar size in the Author Box and Entry Comments of your website:

There are other CSS declarations that you might want to add to style your Gravatars, such as 50% border radius for circles, but the code above shows how to control the height and the width of them.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

Why Sarah McLachlan

When you struggle with depression like I have, you have a tendency to cling to things that bring you hope.

The search for significance runs deep, and our yearning to be loved can bare some really devastating consequences when not handled properly.

The inspiration that I found in Sarah McLachlan’s songwriting helped me immensely, and her music carried me through some really tough times.

Sarah McLachlan

Fifteen years ago, Sarah McLachlan was my crutch.

I set myself up for being teased because I wear my fandom so visibly on my sleeve, but that doesn’t mean I’m embarrassed by it.

You may have wondered, “Why Sarah McLachlan?” and now you know.

She’s someone that I hold very close to my heart for reasons I never felt I had to justify. But I’ve finally chosen to.

In short, she’s a memento of a time I nearly said goodbye.

Why I Sold My 13″ Air for a Retina Display

Nearly 6 months ago I purchased a 15″ Macbook Pro with Retina Display, and after a few days of using it, I returned it to get a brand new 13″ Macbook Air.

At the time, I was madly in love with the Air’s lightweight design, and the portability that it had. To be honest with you, there was no doubt that I’d ever use another machine again. Here’s what I was thinking back then:

The Retina Display

One of the things I was most conflicted about was the pure beauty of the Retina Display. It was undeniable how much better the screen looked with it, and I tried my best to get over the weight different between the two.

Because I had purchased an iPad 3, I had some experience viewing on the Retina Display — which made the idea of having a 15″ Macbook Pro more appealing.

However, as you can clearly see, I just couldn’t let go of my Air:

So I brought back the machine and picked up a new 13″ Macbook Air. Life was back to normal, and I was a pretty happy guy.

Until Apple did the unthinkable.

The 15″ Macbook Pro with Retina Display felt heavy. Much heavier than the 13″ Air did. In the same way a 17″ PC laptop feels like a tank.

The Air Experience

A few weeks after the 13″ Macbook Pro came out with Retina Display I stopped by the Apple Store. I should have known better, because bad things happen when I do that. I brought my 13″ Air with me, just to do a comparison.

I walked into the store and went straight to the new Macbook Pro section. I pulled out my Air, and placed it next to the 13″ Macbook Pro with Retina Display.

I had to do a double take, because for they looked practically identical. In fact, I think the Macbook Pro is a bit smaller, even though it weighs more.

There were two things that mattered to me — weight and screen display.

The Macbook Pro vs. Macbook Air

I picked up the 13″ Pro with one hand, and was impressed at how light it was. Then I grabbed the 13″ Air in my other hand, and tried to feel the difference.

The fact of the matter is there is a weight difference between the two. The 13″ Macbook Air weighs 2.96 pounds and the 13″ Macbook Pro weighs 3.57 pounds.

However, with the 15″ Macbook Pro weighing in at 4.46 pounds, the 13″ Pro is much more comparable to the 13″ Air than it is the 15″ Pro.

After feeling a negligible weight difference between the two, I compared the displays. All I can say is that it literally took me 3 seconds before I asked the Apple employee to grab me the 13″ Macbook Pro.

The difference in display was outrageous. I knew the iPad 3 looked really good, but in the context of a laptop, and especially next to a non-Retina laptop, this was clearly a TKO.

The 13″ Macbook Pro Conclusion

The goal I had when I walked into the Apple store that day was to validate that I didn’t need (nor want) the 13″ Macbook Pro. I wanted to remind myself of the previous experience that I had so that I could put this one to rest as well.

I was blindsided by the fact that the 13″ Macbook Pro felt like a 13″ Macbook Air, with the only difference being the crisp viewing experience of the Retina Display.

I consider myself a display snob. Last week I went to the Apple store to check out the iPad Minis, and forgot that they weren’t retina when I went to buy it. Before I told the guy to get one, I picked it up and opened up Safari and nearly threw up when I saw how “horrible” the screen looked with it being non-retina.

Even though I dearly love my 13″ Macbook Pro with Retina Display, we have this agreement between us that it’s only a temporary thing.

I’m desperately hoping that the unveiling of the “perfect machine” will take place during the next Apple event. Please, please, please let it be so. I really don’t care if it’s a 13″ or a 15″, but the ultimate prize in my opinion will be an Air with Retina Display. I know that I’m not the only one holding out here.

And if for some reason it’s not in the cards, the 13″ Macbook Pro is a such a beautiful ride that I’ll be driving it for some time. Maybe even long enough to spin 100,000 miles on it.

Macbook Pro/Air Discussion Time

I’d love to know what you guys think about the 13″ Macbook Pro with Retina Display. Are you like me and had the 13″ Air and swore you’d never switch from it? Are you also like me and made the switch?