Magazine Pro: Adding Larger Header Image

[MJG108]

Frustrated fellow here. Please help!

For hours I've been trying to figure out a way to add a header image larger than 380 x 90 to the left header area with no luck.

How do I add a logo image that is 450 x 194 to the left header area without WP mandating I crop my image?

I don't understand the header cropping mechanism in WordPress. Even when I shrink the image to the recommended size, WP always seems to want me to crop it. Love to hear some tips on dealing with this issue.

Your advice will be much appreciated.

http://www.flashbombfiction.com

[Nick]

All Genesis themes that support custom header images enforce the header size as a safety mechanism to prevent the theme layout from breaking. But you can still use your own header size if you want to by modifying the theme to alter the header layout. (Sometimes it can be easier just to rework your logo to fit the 380px x 90px size, but that isn't always possible.)

Changing the header size requires that you first edit the theme's functions.php file to specify the new header size that WordPress expects you to upload, and then add some CSS styles to modify the header layout itself.

Here are the changes you'd need to make to Magazine Pro:

Step 1: Edit the theme's functions.php file to change the expected header image size

You can make these changes in a free text editor such as Notepad++ (Windows) or TextWrangler (Mac) on your local machine, then re-upload the functions.php file to your server. (It's best to avoid editing the functions.php file on the server directly if you can because it's easier to make mistakes that take the site down.)

Find the following code in functions.php, modify it with your new header image height and width values, and save and re-upload the file:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'default-text-color'     => '000000',
	'header-selector'        => '.site-title a',
	'header-text'            => false,
	'height'                 => 194,
	'width'                  => 450,
) );

This will change the upload prompt under Appearance > Header to say, “Images below 450 x 194 will be cropped” instead of “Images below 380 x 90” will be cropped”.

Step 2: Add CSS styles to change the header layout

You could edit the theme's style.css file directly to change these, but then future updates to Magazine Pro will require you to find all of the lines you changed and make the same CSS modifications again, which can be a pain. Instead, I recommend copying and pasting the code below into the Genesis > Theme Settings > Header and Footer Scripts box. Doing it this way means that your custom CSS will survive any theme updates; the only thing you'll have to re-edit if Magazine Pro has an update is the functions.php file we changed in step one.

Add this code to the Genesis > Theme Settings > Header and Footer Scripts box:

<style>
.title-area {
  float: left;
  padding-top: 30px;
  width: 450px;
}

.site-header .widget-area {
  float: right;
  text-align: right;
  width: 628px;
}

@media only screen and (max-width: 1139px) {
    .title-area {
        width: 450px;
    }

    .site-header .widget-area {
         width: 500px;
    }
}

@media only screen and (max-width: 1023px) {
  .site-header .title-area, 
  .site-header .widget-area {
    text-align: center;
    width: 100%;
  }
    
}
</style>

Step 3: Upload your image at exactly 450px wide by 194px high.

You should not be prompted to crop the image unless you upload one that's different to that exact size. (If you find you're still prompted to crop it and you're sure it's that size, try cropping the image at 100% of it's size, if you can?)

Once you've completed these three steps, you should find your new header image in place at the wonderful new size. If you find that there's too much space above your logo, you may wish to edit the CSS to reduce the padding-top: 30px; value in the .title-area style. (Change it to a value such as 10px or 0.)

When Magazine Pro updates in the future, you'd just need to complete step one again.

[Nick]

(Oh – the CSS code should go in the first of the two boxes under “Header and Footer Scripts”, where it says, “Enter scripts or code you would like output to wp_head()”.)

[bepitt]

I tried to do the same operation and gat an image to appear but it is too small. Used another method before I found this one so that may be the problem but would someone please help me!!!

http://www.aneveningofmotown.com

Thank you very very much,

Ben

[Nick]

@bepitt: To get your image to fill the full width of the page, add this code to the Genesis > Theme Settings > Header and Footer Settings box where it says "Enter scripts or code you would like output to wp_head()" (the first box):

<style>
.header-image .site-title a {
  min-height: 400px;
}

@media only screen and (max-width: 1139px) {
    .header-image .site-title a {
        min-height: 350px; 
    }
}

@media only screen and (max-width: 1023px) {
    .header-image .site-title a {
        min-height: 300px; 
    }
}

@media only screen and (max-width: 910px) {
    .header-image .site-title a {
        min-height: 280px; 
    }
}

@media only screen and (max-width: 710px) {
    .header-image .site-title a {
        min-height: 270px; 
    }
}

@media only screen and (max-width: 500px) {
    .header-image .site-title a {
        min-height: 200px; 
    }
}

@media only screen and (max-width: 480px) {
    .header-image .site-title a {
        min-height: 160px; 
    }
}
</style>

The header graphic code you need is dependent on the theme, the size of your header graphic, and whether or not you're using a full-width graphic or not, which is why you need specific code for your situation. Hopefully the above CSS will help, though.

[Brad Dalton]

Try this http://wpsites.net/web-design/add-full-width-header-image-to-the-magazine-pro-theme/

---

Tutorials for StudioPress Themes.

[MJG108]

Thanks, Nick! I'm going to go try that right now.

[MJG108]

Nick - I implemented the code you shared and continue to have the same header cropping issue as before.

[MJG108]

Okay, I added the code inside the fucntion.php and style.css files and it worked. Thank you, Nick and Brad!

But there are a couple issues.

1. The logo is in the center not the right.

2. There is a lot of white space above the logo.

I'd really like to fix number 2. I'm not going to worry to much about issue 1. I'm just happy the logo is finally up.

[Nick]

Are you able to share a link to the site? It's a little tricky to debug it blind without knowing which fix above you've applied and how it currently looks. (You're welcome to send the reply as a private message if you'd like to by ticking “Set as private reply”; I'll take a look and reply here.)

[bepitt]

This reply has been marked as private.

[MJG108]

Sorry for the delayed reply, Nick.

I became frustrated and stopped working with the site for awhile. I deleted the site and will be starting from scratch. My plan is to use another Genesis Theme that will hopefully give me less problems with the header image.

I simply do not understand the cropping mechanism for header images.

Any Genesis Theme suggestions would be much appreciated? I have access to all the non-third party themes. I purchased the Pro Plus All-Theme Package awhile back, because I wanted to teach myself and become a Genesis Developer. But after this ordeal, I don't think that's going to happen.

Thanks for all the advice.

[MJG108]

That last post was a bit cynical. I'm not going to give up on learning web development using Genesis. Time to jump back on the horse.

[Nick]

Good for you for sticking with it! I think everyone has days (weeks? months?) when they feel like throwing in the towel. Once you get your head around Genesis, though, it's a good way to get WordPress sites up and running pretty quickly.

In regards to theme recommendations – if I were starting a site to showcase short fiction (and it just so happens that I am!), I'd consider Daily Dish or Foodie if the site was blog-orientated, and Centric Pro, Epik, or Modern Portfolio if I wanted to push my products first and foremost and include a blog as a subpage (like Chuck Wendig now does).

Of the four themes I list, it sounds like Daily Dish or Modern Portfolio might work for what you're planning – both are clean, have space for a custom header, and room for calls to action and ads – but these things are very personal.

It's a shame that WordPress' custom header enforces a fixed height and width, because it makes it more fiddly for WordPress users to add a header that's different to the prescribed size. Do feel free to shout up if you get stuck, though.

[Author]

Posts