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%; } |
Hello,
The reason for this comment is to ask you for advice on a topic that is delaying the launch of my website. It turns out that in the mobile and responsive version of the web (that use the Streamline theme), when you open the pull-down menus the letters appear in a light grey on orange background, something very difficult to read. I’ve tried to find the CSS to modify it and nothing. I don’t know where the CSS of the mobile version is, apparently in the main block of code of the web is not. I have tried with more than ten plugins to modify the appearance of my web in mobile devices and tablets with a resounding failure (I would also like the logo of the mobile version to be another).
In short, the topic is devouring my hours, delaying the launch of the site and bringing me frustration. Any advice you can give to me is welcome. Thank you so much for your time and attention.
Greetings.
Responsive CSS is contained in the style sheet’s media queries. The fastest way to solve your problems is to learn how to use your browser’s built-in inspection and mobile simulation tools. You will be able to see all of the CSS that is rendered for the various displays and experiment with changing things non-destructively. Perhaps this will help: How to Use Your Browser’s Inspect Tool
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.