Add Logo To Lifestyle Theme & Change Header Image Size

In this beginners guide, i’ll show you the easiest way to add your logo or any header image to the Lifestyle theme by StudioPress.

There’s at least 2 ways to add your header image or logo to this theme:

1. You can upload the image to your child themes images folder.
2. Or go to Appearance > Header and upload your image there.

The default size for the Lifestyle themes header image is 920px width by 150px height.

If your header image is exactly the same height as the default, 150px and 920px or less in width, the easiest way to add it is to simply upload the image to your child themes images folder.

You will need to name the image header.png and remove the default image from the folder.

You can also use the custom header uploader under Appearance > Header.

Note the header dimensions highlighted in pink in the above screenshot.

If you try and upload an image which isn’t exactly the same size as those dimensions, you will be forced to crop the image which isn’t what you want.

Lets look at how to fix that when uploading an image which isn’t the default size of 920px x 150px.

In this example, we’ll add a header image which is 200px width by 200px height and see what happens.

Using the first method, we”ll simply upload the new image to the child themes images folder and see what it looks like on the front end.

Its cutoff at the bottom so we need to fix that by changing the value for the height on Line 175 of your child themes style.css file.

Change the value for the height from 150px:

#header {
	background: url(images/header.png) no-repeat top left;
	height: 150px;
	margin: 0 auto;
	width: 920px;
}

To 200px:

#header {
	background: url(images/header.png) no-repeat top left;
	height: 200px;
	margin: 0 auto;
	width: 920px;
}

Now it fits perfectly on the front end:

But how about if you prefer to use the Custom Header uploader under Appearance > Header in your WordPress Dashboard?

Note the default header dimensions highlighted in green in the above screenshot.

If you try and upload the image which is a different size to the default dimensions, this is what happens:

The Custom Header uploader forces you to crop the image because its a different size to whats been programmed into the code.

To change this, you will need to change the dimensions on Line 24 of your child themes functions.php file from this:

add_theme_support( 'genesis-custom-header', array( 'width' => 920, 'height' => 150 ) );

To this:

add_theme_support( 'genesis-custom-header', array( 'width' => 200, 'height' => 200 ) );

Note the dimensions highlighted in purple in the below screenshot.

Now you’ll find the dimensions have changed and you can upload your image:

If your image is still cutoff at the bottom, you will need to change the value for the height on Line 175 of your child themes style.css file from 150px to 200px as shown previously in this post.

If you get stuck, fire away in the comments and i will help you fix the problem.

Using Header Images In Other Themes

• http://wpsites.net/wordpress-themes/add-logo-to-lifestyle-theme-change-header-image-size/
• http://wpsites.net/web-design/using-header-images-in-the-magazine-theme/
• http://wpsites.net/wordpress-themes/how-to-fix-outreach-theme-header-problem-add-different-sized-images/
• http://wpsites.net/web-design/add-logo-or-full-width-header-image-to-generate-theme/
• http://wpsites.net/web-design/add-header-image-logo-to-genesis-2-0-sample-theme/
• http://wpsites.net/web-design/customize-header-logo-banner-images-in-metro-theme/
• http://wpsites.net/web-design/change-logo-header-image-size-in-genesis/