Change Logo Size In Customize Header Image

This tutorial shows you how to change the image size in the Beautiful Pro child theme by StudioPress.

This is the standard method used in most Genesis child themes to change the image size in the site header area.

Video Guide #

Shows the steps required to modify the code to match the same dimensions as your logo ( header image ) in the Beautiful Pro child theme.

Installation Steps #

There’s 2 steps :

Step 1 – Modify the PHP code in your child themes functions.php file.

In the Beautiful Pro theme, the PHP code for the header image is located between lines 37 – 38.

add_theme_support( 'custom-header', array(
    'default-text-color'     => '000000',
    'header-selector'        => '.site-title a',
    'header-text'            => false,
    'height'                 => 66,
    'width'                  => 400,
) );

We’ll change the dimensions to 400 x 66.

Step 2 – Modify the CSS values for 2 different CSS rules in your child themes style.css file to match the same dimensions as in step 1.

In the Beautiful Pro theme, the CSS is located on line 934

.title-area {
    float: left;
    padding-top: 10px;
    width: 400px;
}

And line 970

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

Clear caching and you’re done.