While not everyone has made that big leap from standard display to retina, it’s the up and coming thing. Sooner, rather than later, everyone and everything will be on a sharper, clearer monitor. Today, we’re going to talk about how you can resize your logo within your theme files for the themes that come with a retina quality logo included.
First things first, always make sure that before you make any kind of changes to your sites files that you make a copy and save it as a backup.
How it works
In our theme, Dainty, the default dimensions for the header are set at 900 x 420 pixels. This seems large, doesn’t it? That’s because it’s geared to be sharper and appear more clearly on all retina display screens. While the upload size for this header is large, the actual display size is exactly half of what you’re uploading.
For example…if you’re uploading a 900 x 420 header, the display on your site is only going to show at 450 x 210. This allows for the image quality to appear in higher resolution while still shrinking the image down so that it doesn’t appear too large. For example, if you’re wanting to upload a square logo that is 200 x 200 pixels wide you will actually upload it at 400 x 400.
Keep in mind that you can not increase an image size without changing the entire size of the photo. A 200 x 200 pixel image can NOT be enlarged to 400 x 400 to “make it bigger.” This causes skewing and blurriness in the image which is the opposite of what we want. If you find that you need a larger file size, get with your designer and they can provide a larger file for you if needed.
Change the upload size for your logo
To change the upload size for your logo you’ll want to edit your Theme Functions file. Go to APPEARANCE > EDITOR > THEME FUNCTIONS. Then you’ll scroll down until you see a section of code that looks like this:
If you would like the logo/header image to appear on your site at 200×200, you would change the numerical value of both the width and the height to 400px, exactly double what you want to be shown, and hit save.
A few more changes
At this point, you could navigate back to the APPEARANCE > CUSTOMIZE option and click on the header image and see that your updated dimensions are there and it will let you upload your logo without cropping. However…until you make changes to your CSS file, your new logo/header image might look a little squashed.
Go back to APPEARANCE > EDITOR and you’ll land on the style.css file for your theme. You’ll need to adjust the settings in two places. First, you’ll for the section of your site that looks similar to this:
All you’ll want to do here is set the height to exactly half of whatever height you’ve changed your functions file to be.
You’ll also need to make some adjustments to the width of the title space to make sure everything stays proportionate. Look in your style.css file for this section of code:
Update the width here to be exactly half of your uploaded logos width.
Once you’re finished making those changes, click SAVE and you’re ready to go!
If you are using the Refined or Captivating theme, navigate to Appearance > Customize > Additional CSS, paste this code and publish:
Check out The Ultimate Resource Guide for more great resources!
If you’re more of a visual person, I’ve recorded this video that walks through this entire process as well.
Find this tutorial helpful? Spread the word