A common modification made to Studio Press Genesis Framework powered themes is changing the size of the logo to fit a specifically sized image. The following example is based on the Streamline Pro theme, but the process can be applied to *any* Genesis theme by Studio Press.
The first step is to change the image size in functions.php. Find the following code block:
1 2 3 4 5 6 7 8 | //* Add support for custom header add_theme_support( 'custom-header', array( 'header_image' => '', 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 60, 'width' => 300, ) ); |
Change it to:
1 2 3 4 5 6 7 8 | //* Add support for custom header add_theme_support( 'custom-header', array( 'header_image' => '', 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 300, 'width' => 300, ) ); |
This change allows you to upload a 300×300 image through the theme customizer. Next you have to change the size of the image in the header in style.css. Find the following code:
1 2 3 4 5 | .header-image .site-title a { float: left; min-height: 60px; width: 100%; } |
Change it to:
1 2 3 4 5 | .header-image .site-title a { float: left; min-height: 300px; width: 100%; } |
Hi Victor,
I’m trying to change my header image size to 720px x 140px on the Monochrome Pro theme, and I think I’ve done the right things, as you’ve said, but it’s still showing as a small image.
I’d really appreciate it if you could take a peak at my site for me, and perhaps let me know where I’ve gone wrong.
Thanks so much!
You have the width of the title area fixed at 133px in the CSS for .header-image .title-area at line 1293 in style.css. The height of the area is also fixed at 50px.
To fix this, change the CSS to this:
.header-image .title-area {height: 140px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
padding: 0;
width: 720px;
}
If you haven’t done so already, I suggest you read this article: Learn How to Use Your Browser’s Inspect Tool
I’m using genesis sample and trying to get my friend’s website looking nice. He wants to use a B&W image with his business name as his header. This image at the site now is just a place holder.
Another site with a image that appears to work the way I’m looking for that I think also uses genesis sample is the home page for the cuyamungueinstitute.com
Additionally the image should run edge to edge or close to it. I can make the background color match if it doesn’t all sit perfect.
Hi Victor,
I am using Daily Dish Pro and still having issues with my logo. It is still constrained as a small centered image. I have tried different resizes and photos and still having the same issue. These are my php and css codes that I currently have for my logo sized at 800 x 340:
// Add support for custom header.
add_theme_support( ‘custom-header’, array(
‘flex-height’ => true,
‘header_image’ => ”,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false,
‘height’ => 340,
‘width’ => 800,
) );
.header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
display: block;
height: 340px;
margin: 10 auto;
max-width: 800px;
}
Please provide a link to the site so I can take a look. The code is not helpful in this case.
http://www.babemadeblog.com
I looked at your site and the image is displaying at 800×340. The image is very blurry and is not centered. You may want to add margin: 0 auto; to .header-image .site-title > a to center the image.
Hello! Thanks for the info! Im working on Foodie Pro, and though I change the dimensions of the header, my logo is still constrained to a small middle area of the header area! My site is http://www.micorazondearroz.com! Please help, I’m going crazy with this!
You have CSS that is forcing the width to be 1140px while reducing the height to 200px. You have to keep the height and width proportional. Change the CSS at line 1666 in style.css to the following and it will make your logo appear correct.
.header-image .site-header {background-position: center !important;
background-size: 472px 200px !important;
}
one thing to add – is that modifying the style sheet may not override what the theme is doing – so add the code directly into the css portion of the customizer. that takes care of the puzzling problem of the header not conforming to the min-height issue i was having. thanks, ed
I appreciate the comment, but the style sheet IS what the theme is doing. If you are having problems seeing changes in your style sheet it is likely due to caching or inserting code before the style sheet’s delivered CSS.
Thanks for this victor. Really appreciate it.
-dawn
Doing what you have shown how to do has always been a challenge with these, and other, themes. Thanks for the information. Got me pointed in the right direction and made it easy for me to make my client happy without spending hours trying to find the right CSS to change. By the way, I am using the Going Green theme. In that theme the parameters to change in style.css are in /* Title Area :
.title-area {
float: left;
padding: 0;
width: 360px;
}
.header-image .title-area {
height: 187px;
padding: 0;
}
Thanks Victor for this guide. It truly works pretty easy and smooth.
Hello, great information you have given, i try but it didn’t work on genesis child theme. Can you tell me why?
You must have changed the code in the wrong place. If you followed these directions, it does work on a Genesis child theme. This is the only way to change logo size in a custom header. Did you change the code to the child theme’s functions.php? Please post a link to your site.
I’ve had the same issue on my genesis child theme. I’ll post a link if you’re able to respond.