How to resize the header logo in a Restored316 WordPress theme

One of the most common questions I see over at the Restored316designs.com help desk is about resizing the header or logo area.

Stuck wondering how to resize the header logo in a Restored316 WordPress theme?

I will demonstrate the process in a 7.5 min video so you can work along with me if you would like.  I will also add written instructions below the video.

Before I begin, I would like to mention a bit about the retina quality displays.  Retina is proprietary to Apple and really is just referring to the pixel density of the display.  Here is what Apple says about the retina display, “Mac computers with a Retina display have a pixel density that is so high, your eyes can’t discern individual pixels at a normal viewing distance. The Retina display packs four times the pixels of the standard . . .”.

So because we want our header or logo to look great on any device or display it’s viewed on, the newest Restored316 themes are coded to accommodate the higher density of pixels.

So here is what you are going to do:

1. Determine the size you would like your logo to be.  For example, 600 x 300.
2. Create your logo at double that size.  So you would create your logo file at 1200 x 600.
3. Navigate to Appearance > editor and open your functions file.  You will locate the code that begins with: add support for custom header.  This is where you will add the dimensions for your new logo at twice the size you would like it to actually be displayed at.  In our example, 1200 x 600.  Then click update to save your changes.
4. Now you will navigate to the style.css file.  You can call a search bar by using your keyboard, command F on a Mac and control F on a PC.  Search for the title area.  We are going to adjust the code that has the old dimensions and add in our new final logo dimensions.

So in this code:

.title-area {
background: #596922;
border: 1px solid #fff;
float: left;
margin: 5px;
overflow: hidden;
outline: 5px solid #596922;
padding: 20px 10px;
text-align: center;
   width: 600px;
}

And in this code:

.header-image .site-title > a {
background-position: center !important;
background-size: 600px 300px !important;
display: block;
margin: 0 auto;
height: 300px;
width: 600px;
}

We will change the bolded areas to the dimensions of how we would like our new logo to actually display.  Update to save your changes.

Our final step

is to navigate to Appearance > Header where we will upload our new logo at twice the size we actually want it to display at.