Change default size for header image in Pro theme

[eastsidekeith]

I have run into this before and my question is to change the default setting of 320px x 80px for header image. I have an old code snippet that doesn't seem to work anymore. you can see where I changed the size:

//* Add new image sizes
add_image_size( 'featured-image', 358, 200, TRUE );
add_image_size( 'home-top', 750, 600, TRUE );

Is this written correctly or does there need to be more code written give the results I am looking for?

http://milwaukeeguitarschool.com

[William]

By header image, are you referring to the logo ?

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[eastsidekeith]

There is currently no logo in header. I couldn't get the one I wanted installed. What you see is the site title.

[William]

In your functions.php file, you should see something like this :

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

Adjust it there 🙂

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[eastsidekeith]

I used your code and got a new default in the customize section but not the size I specified in the functions.php created a similar problem.

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

I used an image that was 429px x 150 that should fit. You can see what happened http://milwaukeeguitarschool.com I measured the area created using a screen shot in Photoshop which measures 401px x 81px. Any idea what is going on?
I measure the

[eastsidekeith]

Since this is a live site I can't leave the site with half a logo. The logo you see is 234px x 80px which is much smaller than I wanted. I would still like to see if any of you have an idea what might be happening. http://milwaukeeguitarschool.com
Thanks, Keith

[JPJP9]

You need to change the size in the CSS also. Under site header

[eastsidekeith]

JPJP9 thanks for your post. I have the functions.php set at 400px x 120px as well as the .header-image css. The customize site header image shows these attributes in the suggested size and the cropping function but when you have done the task the logo is still at roughly 80px. Is there some other attribute that I have missed? I have gone back to the logo I had before because the site is live.

[JPJP9]

Hi Keith,

The image shows up as 234 x 80 (http://milwaukeeguitarschool.com/wp-content/uploads/2016/11/mgs-logo-long-80.png) so maybe you are using the wrong image from the media library or you need to upload a version that this 400 x 120

JP

[JPJP9]

oh but maybe that because its the original image. Check this css:

.header-image .title-area {
	max-width: $logo-width;
}

.title-area {
	width: $logo-width;
}

[eastsidekeith]

Thanks JPJP9, I am not familiar with this attribute. What does max-width: $logo-width; and width: $logo-width; mean? Does this represent a percentage of width? If I remove this attribute will that fix the problem and how with the logo work in mobile mode?

[JPJP9]

Sorry Keith, in your css, make sure that these widths are in your CSS:

.header-image .title-area {
max-width: 400px;
}

.title-area {
width: 400px;
}

[JPJP9]

Although it looks to me like the box the logo is in is the right size - what is happening when you put a logo in that is 400px x 120px?

Perhaps try .site-title {margin: 0; padding: 0;} and .header-image .site-title > a {background-position: 0% 0%;}

Hard to tell without seeing the image in there.

[eastsidekeith]

Hey JPJP9, it worked. Check it out. Thanks much. eastsidekeith

[JPJP9]

Glad to hear it.

[ToniSchulke]

This is a general question about sizes:
I am new to WordPress. I am a graphic designer turned web designer, and now learning WP. My question has to do with the optimal sizes to work with in my photoshop native files for:
1. Hero images
2. blog images
3. general images (which might go into clickable circles, etc.)
4. gallery images (which seem to size themselves automatically for thumb, preview and fullsize)
5. starter photoshop layout (storyboards). (previously I have preferred a 900 px width for websites - I notice that hero images are sometimes 1500px, and I have seen recommendations to use images that are 2x the size needed for retina screens. I do not know how to gauge the sizes I need for my native psd files for use with WordPress)

I am using the Genesis sample theme - but changing everything with Beaverbuilder.

---

Toni Schulke
Principal, Call Toni Graphics and Web

[eastsidekeith]

Dear ToniSchulk, speaking as an ex-graphic designer and art director I would not use standard sizes as you have asked about for a number of reasons. I used to eye ball everything and go with my gut instincts. Image sizes to me depend on what your website's mission will be. Retail requires big explosive images your corporate/BB site uses more understated image sizes as well as composition. Don't paint yourself into a corner with a rigid preprogramed sizes allow for flexibility. Think of your monitor's aspect ratio and go from there.

[ToniSchulke]

Hi eastsidekeith, thank you for your response. Sounds like good advice. It seems like each theme should have a "key" where image sizes best for that theme would be so I could set up one .psd file and be done with it. I am a graphic designer and have been an art director for many years until 2007 - freelance now. I have been designing and building websites in Dreamweaver for several years and just moving on to WP now. The learning curve is steep for me because of the .php aspect. I haven't learned .php - and had hoped to avoid that if possible, so I have been using themes.

I am using Genesis Sample in the hope that it is the most stripped down in the bunch - however, I cannot seem to make the changes to the top navigation bar. I want it to be much narrower. Also, I want to be able to style post pages and category pages. Is that just not possible with WP? It seems that Beaverbuilder has some options for those pages - but I haven't been able to locate the magic spot to change the category pages... any ideas? Are you doing WP websites instead of graphic design now?

---

Toni Schulke
Principal, Call Toni Graphics and Web

[eastsidekeith]

There are many things you can change on the StudioPress themes. You can change the item you are talking about editing the style.css file. You will need to learn CSS probably more than PHP. A little PHP would be helpful though. You can also learn a lot form this blog where I have found many solutions for helpful individuals.
To also help a couple of programs to edit CSS and PHP would be Sublime Text which will let you know if you are writing incorrect code. It works with CSS and PHP. Also get the developer tool for Chrome that will show the source code and let you try out edits to find out what you need to change to achieve the results you are looking for. With those programs you will be able to test edits of your sites source files and apply what you have found to your site to get the look you want.
Lastly be very careful when you edit files. You can crash the site if you make syntax errors. Always have a back up and FTP access to your site to restore what you did.
Category pages? Do you mean blog pages Category? It you should be in the tool bar on the right of the dashboard.
I don't do much graphic design print anymore. I use the skills I learned in 40 years of graphic design to use in websites. I started creating websites using Dreamweaver and learning basic HTML. It was a steep learning curve. When WordPress came along I jumped on the band wagon. It allowed me the freedom to spend more time creating and less time trying to deal with coding problems and also allow me to create the sites that I have always wanted.
Lastly, my business site is written in .asp and I have yet to turn it into a WordPress site. Crazy how that works.
Good luck.

Keith Watling
Watling Design

[ToniSchulke]

Do people still use .asp? Thanks for your responses - I am just getting used to this blog (or really any blog) and it is promising. It sounds like we have similar backgrounds - except I am just starting the WP adventure.

---

Toni Schulke
Principal, Call Toni Graphics and Web

[Author]

Posts