WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Resize Foodie Pro Header Image

This beginners tutorial, enables you to change the code in Foodie Pro so it displays your header image or logo perfectly.

You’ll need to change both the PHP code & CSS which are located in different files.

If you don’t modify the PHP code in the Foodie Pro themes functions.php file, WordPress will crop your image based on the default image dimensions coded into the Foodie Pro’s functions.php file.

Step 1 : In the Foodie Pro theme folder, open the functions.php file using a code editor and change the values on lines 81 & 82 to match your images width and height.

Change the size in the following PHP code to 800px width by 150px height.

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

Note: For retina images, you need to modify the PHP code so the values are twice that of your image. If your image is 800 x 150, you’ll need to use a width of 1600px and a height of 300px. The width and height in the CSS should match your image 800 x 150 regardless.

Step 2 : Save the changes to the file and go to Appearance > Header in your WordPress dashboard where you’ll see this:

header

Step 3 : You can now upload your new image and skip cropping so your full size image is displayed in your header.

skip-cropping

Step 4 : In the Foodie Pro themes style.css file, go to line 1666 where you’ll find the following 2 CSS rules.

.header-image .site-header {
	background-position: center !important;
	background-size: 800px 150px !important;
}

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

The above CSS rules have been modified to match the exact width and height of the header image which is 800 by 150.

Final Result:

site-header

The actual size of your image is determined by the values in the CSS regardless of the values in the PHP code.

Note: You can move the image to the left simply by changing the value for the background-position property from center to left in the 1st CSS rule above.

Site Title & Tagline

You can add, remove or modify your site title and tagline using these settings.

In your WordPress dashboard, go to Appearance > Header > Site Identity and you’ll see the following settings for your title and tagline.

site-identity

This tutorial has been written based on the following questions from a member of the StudioPress community forums.

1) The first is that I’d like to resize the header image placeholder to accommodate our current logo size which is 850 x 150.

2) I tried to add the image in and crop (which didn’t work) but, when I did the text header didn’t disappear.

Reader Interactions

Comments

    • You can modify these CSS rules, add more and wrap them in a media query so they render at specific screen widths.

      @media only screen and (max-width: 940px) {

    .header-image .site-header {
	    background-position: center !important;
	    background-size: 800px 150px !important;
    }

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

}

Leave a Reply