• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

Retina Logo on Genisis

Add Retina Logo to a Genesis Template

April 22, 2014 by Pat Fortino

Retina or high definition screens are pretty common now. Making your whole site Retina compatible is a major project, but at minimum, your logo and header area should be Retina ready. Genesis Framework templates do not have a function for adding a retina logo.  The following tutorial explains how to add a Retina logo to a Genesis template (Works with WordPress Templates too but you have to find to correct css rules to modify).

Difficulty Level: Intermediate

This tutorial requires that you edit two template files: functions.php and style.css. In addition, you need to provide a Retina and Standard logo image.

Step 1: Create a Retina and Standard Logo Image

The Retina logo must be twice as big as your standard logo. For example, if your custom header logo is 250px by 110px, then your Retina logo must be 500px by 220px (See Step 2 to determine your custom header image size).

It’s important that you create the logo at the Retina size and then reduce that image for the standard logo, not the other way around.

Also, I use the following convention for naming the logo files. You can use whatever you want, but this helps you avoid confusion about which image is which:

  • Standard Display Logo: logo.png
  • Retina Display Logo: logo@2x.png

Step 2: Upload Standard Display Logo

Go the Appearance > Header and upload the standard logo image you created.
IMPORTANT: This is not the Retina image.

If you don’t have a Header link under Appearance, you can add this function to your theme by pasting the following code into the theme’s functions.php file:

inspect-element

You can adjust the width and height of the logo in the code above. Note that WordPress will crop the image if it’s bigger than the Custom Header width and height.

Upload the Retina Logo

Upload the Retina image to /wp-content/themes/your-template/images

Add CSS Rules for the Retina Logo Image

Add the following CSS rules to the end of your style.css file
/wp-content/themes/your-template/style.css 

You can adjust the min-height and background-size rules to fit your logo size.

Also, you might have to adjust the min-height and width rule on the title-area and site-title rule: set the min-height to the same height as your standard logo height.

For example, the standard logo height in this tutorial for min-height is 110px. Search for the rule below and change it to match your standard logo width and height.

Testing Standard and Retina Logo

In order to test your standard and Retina logo, you will need a device with a standard display and a device with a Retina display. If you don’t have a Retina laptop, you can use an iPhone or iPad with Retina display. If you don’t have a standard display, you can test it using a browser testing service like http://browserstack.com.

Filed Under: Genesis, Wordpress How To 2 Comments

Previous Post: « Create a Category Template in WordPress Genesis
Next Post: Change WordPress Default Image Alignment and Link Type »

Reader Interactions

Comments

  1. Bruce Rawles says

    April 27, 2019 at 10:32 pm

    Thanks for the great tutorial! Works well… Is there something I need to add to center the logo on mobile devices? I can narrow the screen width on laptop/desktop and the logo centers, but not on mobile. I tried a nested media query, but that doesn’t seem to work. Any suggestions?

    Reply
    • taponitrof says

      April 29, 2019 at 3:54 pm

      Send me a url so I can look at your site. I need to see the code to determine how to center it.

      Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...