WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Customize Header Logo & Banner Images In Metro Theme

In this tutorial, we’ll look at how to add different images in the header of the Metro child theme by StudioPress.

By default, here’s what the header looks like with a title entered in the General Settings.

default header title text - Metro theme

Looks o.k however there’s a margin for white space above and below which you may want to remove.

You may also want to add a full length header image or a logo and image in the header right widget which we’ll also cover in this post.

Here’s what we’ll do in this post:

result after adding logo and image banner

Here’s the new demo logo, header right widget image and full length header image we’ll be adding in this tutorial.

Logo 300 width x 120 height

header logo example

Header Right Widget Image 750 width x 120 height

header right widget image demo

Full Width Header Image 1080 width x 120 height

full width header image sample

Note: Its best to copy and paste the code which needs modifying to the end of your file before making changes as this way you can easily manage your customization.

Getting the Logo Right First

All 3 images above are exactly the same height.

The default settings for this themes custom header can be found on line 64 of the themes functions.php file.

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

If you go to Appearance > Header and simply uploaded an image without matching the size to these settings, this is what it may look like.

logo cropped

Because of the settings in the code above, our logo demo which is 300 x 120 will be cropped and not displayed properly on the front end.

cropped logo

To fix this, we firstly change the values in the PHP code above to match the exact same size of the logo.

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

And then re-upload our logo image in the backend of WordPress:

new logo size

Here’s what it now looks like in the front end:

logo frontend

It looks better and the whole logo has been added without being forced to be cropped first, however its still not perfect.

To make it display fully, we’ll need to modify the values in the child themes style.css file.

On Line 867 we change the height from 87 to 120px

.site-header {
	min-height: 120px;
	overflow: hidden;
}

That now makes the full logo image display however the margin & padding below the logo isn’t being displayed. You can keep it like that or change more CSS in your style sheet.

logo flush nav-menu

On Line 926, add some values to the margin and/or padding to add whitespace between your logo and the nav menu:

.header-image .site-title {
	margin: 20;
	padding: 0;
}

And here’s what it looks like now:

logo with margin

Next step is to fill up that white space on the right side of the header with an image.

Perfect Alignment For Header Right Widget Image

You can upload and insert a new image in a post draft and then copy and paste the HTML for the image into a text widget which you then drag into the header right widget area.

This is what it will look like:

header image to small

Ahmmmm its shunk.

To fix this, simply go back into your style.css file and change some values for the header widget on Line 942.

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar,
.subnav-left,
.site-header .widget-area {
	width: 31.111111111%; /* 336px / 1080px */
}

If you change the above value from 31.1% to something else, it will also effect the other classes you can see which use this same value in the declaration.

The reason the code has been consolidated like this is for efficiency however, we will need to separate the header widget code or your site will be messed up. So please leave that code untouched.

The best way to do this is to take the CSS for the site-header . widget-area and paste it at the end of the file, then change the value from a percentage to a pixel value like this:

.site-header .widget-area {
	width: 750px; /* 750px / 1080px */
}

Still with me?

Here’s what your header images look like now:

header images messed up

The width and height is right but the alignment needs one final adjustment.

Go to Line 881 and copy this code below which needs to be pasted at the end of your file and modified:

.title-area {
	width: 300px; /* 300px / 1080px */
}

Looking good now:

perfect header image alignment

You’ve done well and must have a smile on your face now?

But wait! There’s more that can be done.

Lets remove some of that white space above the header images as you already know how to remove whats below them.

On line 401, copy the CSS code for the site-container and paste it at the end of your file removing the 2.25rem value for the padding.

.site-container {
    clear: both;
    padding: 0;
}

Here’s the result which is pretty much perfect except for the color matching which you may find help for using these color tools.

perfect header image align

Full Width Header

Simply change the values in your functions file to match the full width header with and height. Then you simply upload your header banner which is exactly the same size.

add_theme_support( 'custom-header', array(
	'flex-height'	=> true,
	'height'		=> 120,
	'width'			=> 1080
) );

Here’s how easy it is:

full header banner

This way you can still use the header right widget for a search box, social follow buttons and some text.

You may need to modify the CSS code for the search box width in your style sheet.

Here’s more about how to change different logo & header image sizes in themes using the Genesis framework.

Reader Interactions

Comments

  1. Hi Brad,

    I am using Metro Pro theme. The css and function line references you give in your instructions don’t match with the theme files. I tried to put the one long 1080×120 logo in place but wasn’t sure which steps from the first part of your tutorial (with 2 logos) I should use. I tried using all the steps and it didn’t display and have since played around with it but still can’t get it to display properly. Any advice?

    http://4d9.f48.myftpupload.com/

    • There’s 2 steps which apply to the functions.php and style.css files.

      1. Match the values in the PHP code for custom_header to the size of your image.
      2. Match the values in the CSS for the width and height to the size of your image. These values will be included in the CSS rules under the Site Header section of your style.css file so check ALL the CSS rules under the entire site header section and change any values for the width and height to match your image size.

      If you are using a code editor which adds spaces to the code in a style.css or functions.php file like some do, the line numbers will NOT match what i have referenced in this tutorial.

      • The function.php file has the correct file size:
        //* Add support for custom header
        add_theme_support( ‘custom-header’, array(
        ‘width’ => 1080,
        ‘height’ => 120,
        ‘header-selector’ => ‘.site-title a’,
        ‘header-text’ => false
        ) );

        The css file has the following code. I added the last two declarations.

        .site-container {
        background-color: #fff;
        margin: 32px auto;
        max-width: 1140px;
        overflow: hidden;
        padding: 36px;
        clear:both;
        padding:0;
        }

        Any advice?

        • I am not sure which site-container in the css file I need to modify. Below are all instances:

          ~/Desktop/style.css:109: .site-container:before,
          ~/Desktop/style.css:127: .site-container:after,
          ~/Desktop/style.css:439: .site-container button:disabled,
          ~/Desktop/style.css:440: .site-container button:disabled:hover,
          ~/Desktop/style.css:441: .site-container input:disabled,
          ~/Desktop/style.css:442: .site-container input:disabled:hover,
          ~/Desktop/style.css:443: .site-container input[type=”button”]:disabled,
          ~/Desktop/style.css:444: .site-container input[type=”button”]:disabled:hover,
          ~/Desktop/style.css:445: .site-container input[type=”reset”]:disabled,
          ~/Desktop/style.css:446: .site-container input[type=”reset”]:disabled:hover,
          ~/Desktop/style.css:447: .site-container input[type=”submit”]:disabled,
          ~/Desktop/style.css:448: .site-container input[type=”submit”]:disabled:hover {
          ~/Desktop/style.css:503: .site-container {
          ~/Desktop/style.css:566: .metro-pro-landing .site-container {
          ~/Desktop/style.css:1951: .site-container,
          ~/Desktop/style.css:1991: .site-container,
          ~/Desktop/style.css:2086: .site-container {
          ~/Desktop/style.css:2090: .site-container {

          • But your instructions above say:

            On line 401, copy the CSS code for the site-container and paste it at the end of your file removing the 2.25rem value for the padding.

            .site-container {
            clear: both;
            padding: 0;
            }

          • Please send me FTP hostname, username and password and i’ll fix it for you.

      • I hope so, but it took long time, around 5 min. Suddenly, I had an error “error to access the database”, I’ve went to cPanel, restored. Now, I have a little bit different font inside my WP dashboard, very annoying! All my 3 websites on different servers, different themes and plugins, but the same annoying font change, it’s a little bit blurry.

  3. Brad, thank you for the nice tutorial. The code for the Metro Pro has been changed a little bit and I am trying to insert 1080×87 logo.

    I’ve changed functions.php file to:

    No luck. I still have 360px wide image.

  4. Hi Brad, this question may be a little out of topic. You have this red content box with a dark red stripe on the left side in this article with “Note: Its best to copy and paste the code …”
    What plugin or code do you use? I am using a Genesis Style Shortcodes plugin, but it doesn’t have this vertical stripe.

    Thank you.

  5. Hi Brad,

    This is an old issue, but only now have I encountered it. I hope you are available to share some of your knowledge.

    With the Genesis Metro theme, all I am trying to is have a full-width banner. I have read your informative tutorial attempted to follow the instructions. I thought I had done a good job, but issue persists.

    After my failed attempt, I also decided to edit the css:

    I also edited the CSS:

    .header-image .site-title a {
background-color: none;
max-width: 1080px;
min-height: 120px;
padding: 0;
}

    But that produced no favorable results.

    Please let me know what I am doing wrong.

    Thank you so much for your time and consideration.

    Best,
    Gabriel

  6. Hello I followed your tutorial to get the full width header image though when I upload my image that is the dimensions that I changed in the functions.php file. Though when I upload the image the original metro theme title is still there (www.thegullibleskeptic.com is my site), and the new image I uploaded is kind of behind the original title.

  7. Thank you for the tutorial. However, I am trying to insert a search box next to my header, but for some reason it starts blocking out a part of my logo when I insert the widget. Would you know what settings to change?

    Thank you!

  9. Hi Brad. I’ve implemented this and it appeared to be working fine on glenwaverleypodiatry.com.au. However it seems to be showing the default site title and area instead of the new full width logo placeholder.

    Any help would be much appreciated.

  10. Hi! I love Metro theme but the header has been a big headache for me. I’m using Metro Pro now and I had no success in letting 300×120 logo and 750×120 banner on the header. I’m glad I found this page though coz it’s exactly what I want on my header. I’ve been trying to tweak my header since yesterday. Can you help me?

    • Sure.

      You will need to change the values for both the header image and header right widget height and width in your child themes style.css file.

      All the code that needs modifying is in the header section of the file.

      • Thank you Brad. I’m close in getting it 🙂 It is hard coz the codes in Metro Pro are not exactly in the lines you mentioned but following your instructions above helps a lot. I was able to make my header like that with the 750×120 banner. Looks perfect on the desktop but when I view it on the ipad, the logo is cropped a little and the banner’s height is not the same. Help pleaze 🙂

  11. I have been trying to do this for 4 hours now. I changed both the CSS file and the functions file to accommodate a larger header. It now says when I go to upload the new header that it must be 1020 x 230 but no mater what size my header is from 224 x 224 or 1040 x 87 it wants to crop the end every single time. I am beyond frustrated. If anyone can help me with this I am happy to pay! I am at my wit’s end! HELP!!!

  13. Thank you for the article, it’s a great resource. I’m also a Metro theme and I would like to ask how to move the logo more to the left, it extends less than white sheet because I use ribbon logo and want it to stay on the left, not the middle?

  14. This worked and I see part of my logo, but the big red bar rectangle is showing up on top of my logo. How do we remove this in the Metro Theme?

    Thank you

    • You will need to follow the tutorial which deals with different values on the CSS and PHP code. Its tested for different sized logos and headers so you’ll find its simply a matter of matching the values to your logo.

  15. Thanks much! We will definitely keep the standard 1080 width then. The tutorial went VERY smoothly this morning.

    Thanks again for this tutorial! It was very easy to follow and I appreciate that!

  16. THANK YOU for this tutorial! These are the exact issues I’ve struggled with on Metro. I can’t wait to check this out!

    One question: I will likely need to change the width on the entire site, simply because we want a leaderboard ad in the Home Bottom section. Right now, the ad is resizing to about 650. Do you have a tutorial on that as well?

    • Hi Angela

      I have many on adding content in different positions but i wouldn’t change the content width for a ad.

      You would then need to change the sidebar width and other elements as well.

  17. Hello Thank you for this tutorial, html 5 markup is not working on my blog it breaks the theme. is there a way you can make the tutorial for XHTML users??

    • HTML 5 works on every StudioPress child theme.

      I have converted the Metro child theme to HTML 5 and it works perfectly.

      This tutorial is based on the HTML 5 version of the Metro child theme and all the testing and screenshots have been taken from the HTML 5 version.

      Its the best markup which i suggest everyone uses.

  19. Hello I think you made a mistake, the Header Code is
    /* 03c – Header ———– */

    #header {
    min-height: 120px;
    overflow: hidden;
    }

    and not

    .site-header {
    min-height: 120px;
    overflow: hidden;
    }

    • Hi Kingsley

      Either one works depending on which version of Genesis you are running.

      Many people are still running the old XHTML markup and some have converted to HTML 5.

      #header works with XHTML markup

      .site-header works with HTML 5 markup

      I see you are still running the old markup so in your case, you would need to use #header.

  20. Always appreciate your feedback. How did you find this tutorial?

    Very helpful! As always, the step by step helps to learn more much than just the final code. Seeing the not finished screenshots helps to identify problems not just for this case, but whenever we get similar CSS issues.

Leave a Reply