How To Change The Default Logo Size In Genesis Framework

Is your blog running an official StudioPress theme and you are finding it hard to upload your original logo image from your previous theme without cropping a lot of it? This can easily be fixed by editing the image dimensions. Check out what happened in the image above when I tried to upload WPOutcast’s logo using the Genesis Framework sample theme. Notice how the upload completely cropped off the T.

You’re in luck because this is an easy fix.

Before making any changes to your theme files, it is recommended that you make a complete full backup of your blog. Almost all web hosts provide an option to make a backup in your account panel

Navigate to your “appearance –> editor” tab in your blog’s admin dashboard and select the “functions.php” file. All you have to do in here is change the size and save the file. Since we are using the sample theme the code might not look exactly like the one below. Remember, making a backup of your blog before messing with code can prevent any huge mistakes.

Find:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 600,
	'height'          => 160,
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'flex-height'     => true,
) );

Change the “600” and “160” size dimensions to enlarge and expand the width of your logo image. Note that you might have to edit this code a few times to fit the dimensions of your logo.

After editing the code provided above on my test blog, I was able to capture the original logo size without having to crop the image or losing out on its originality. My image is transparent which makes it blend in with any background.

Here is what I changed the size to:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 800,
	'height'          => 170,
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'flex-height'     => true,
) );

Make the following changes in your styles.css file. Find the following line below:

If this blog post has helped you, please consider sharing it online with your followers.

.header-image .site-title a {
    float: left;
    min-height: 160px;
    width: 100%;
}

Change the min-height to whatever height you specified in the very first code.

.header-image .site-title a {
    float: left;
    min-height: 170px;
    width: 100%;
}

Save this file and After emptying out your blogs cache and even your browser cache, the final version of your logo will be perfect and you won’t need to crop it that will ruin the images quality.

• Bonus Tutorial: How To Set Up The a3 Lazy Load Plugin

Did you find what you was looking for?

If this blog post has been helpful, consider sharing it online with your follower.