How to customize the Metro Genesis Child Theme

Jon August 12, 2013 10 Comments

UPDATE: The changes in this article will not work for Genesis Metro Pro, as it uses a completely new style sheet and HTML layout.

As I mentioned in my article Genesis child themes – My top three, the Metro child theme is my favorite.  Metro looks great “out of the box”.  Metro has great typography, support for two menus, and a good amount of white space and lots of widget areas.  The theme is clean, and I like a good clean theme.  Best of all, Metro is fully responsive.

I’ve found myself using Metro a lot lately as I’ve built out new niche sites for myself but also for building out new sites for clients.   I just finished up a new crafting website this weekend for a client that integrated with her Etsy shops.   The site was built on Metro (affiliate link).

As I’ve built out more and more Metro based sites, I’ve found myself doing the same types of customizations to it over and over again, and thought it might be beneficial to share a few of those with you.

Changing the Metro Header Image size

One of the first things I do for new Metro based sites is install a graphical header.   The good news is that Metro supports graphical headers “out of the box”, and you can find the menu option do that under Appearance >> Header from your WordPress administrative console.   By default, Metro wants a header image that is 1080 pixels wide by 87 pixels high.   In most cases, 87 pixels just isn’t tall enough for me and I often have to modify this to support a taller header image.

I typically use header images that are around 150px tall.  If you try to upload a header image that is 1080px x 150px, Metro will force you to crop it to 87px tall.

Metro can support taller images, with a few minor changes.

First, you’ll need to edit the functions.php file found in /wp-content/themes/metro.  One line #31, you’ll see the following code:

// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
'flex-height' => true,
'height' => 87,
'width' => 1080
) );

Note the 87 value. That is what we’ll want to change. Assuming your are using a header image that is 1080px X 150px, you’ll want to edit the 87 to be 150, so this section of code looks like this:

// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
'flex-height' => true,
'height' => 150,
'width' => 1080
) );

Be sure to save your changes. In order for the image to show correctly, we’ll need to make two more changes, but this time in the style.css file.

Open up the style.css file located in /wp-content/themes/metro, and navigate to line #156 where you’ll see the following code:

.header-image #title,
.header-image #title a,
.header-image #title-area {
	display: block;
	float: left;
	min-height: 87px;
	overflow: hidden;
	text-indent: -9999px;
}

Note that line #561 has “min-height: 87px;”. You’ll want to change that 87px to be the height of your new header, in the case of the example here, we’ll change it to 150px, so it looks as follows:

.header-image #title,
.header-image #title a,
.header-image #title-area {
	display: block;
	float: left;
	min-height: 150px;
	overflow: hidden;
	text-indent: -9999px;
}

Save your changes. If you visit your site, you’ll note that the graphic header still isn’t showing, and most likely you’ll see a big colored square instead. To fix this, you’ll need to decide which Metro color theme you’re going to use. If you don’t like any of the colors, I’ll tell you how to change them below, so just pick color for now, and we’ll modify it later.

For this example, we’ll just use blue. The style sheet for metro contains all of the common styles first, then has specific color styles towards the bottom. The blue color starts at line #1573 and the blue specific color styles are defined here. You’ll note they all start with “.metro-blue”.

For this example, we’re using “Metro blue”, and you’ll want to remove all of line #1620 except the { and also remove the comma at the end of line #1619, so that the section of CSS looks like this when you’re done:

.metro-blue a.social-buttons:hover,
.metro-blue button:hover,
.metro-blue input:hover[type="button"],
.metro-blue input:hover[type="submit"],
.metro-blue .btn:hover,
.metro-blue .genesis-nav-menu .current-menu-item a,
.metro-blue .genesis-nav-menu li a:hover,
.metro-blue .genesis-nav-menu li:hover a,
.metro-blue .navigation li a:hover,
.metro-blue .navigation li.active a,
.metro-blue .post-comments a,
.metro-blue .sidebar .enews-widget input[type="submit"] {
	background-color: #5bb1f9;
}

Save your changes. Now when you preview the site, you should see your header image. If you still don’t, double check your changes. If you still can’t get it to work, re-install metro and walk through the changes again.

Clean up the unused color styles

Once I select the color I’ll be using, I remove all of the unneeded color specific styling.  For example, if I plan to use the blue color, I remove all of the other metro color specific styles like “metro-green”, “metro-pink”, etc.  You can just delete these from your CSS file.

While not a large amount of CSS, I prefer to keep my CSS files as small as possible to optimize the site loading time.

Changing Metro Colors

To be honest, one of the things I don’t like about Metro is it’s colors.   The blue isn’t too bad, but all of the prebuilt colors are just a little too bright for me.  I prefer to only use bright colors for highlighting, not for primary colors.

Also, for all color themes, the menus are a black background.  While this works for many sites, I often change the menu color as well to make the site unique looking.

Changing both of these colors is easy.  First off, get the HTML color you want to use as the primary color.  You’ll want the # color value.  For example, white is #FFFFFF.   You can find these on a site like Color Combos.  Once you have the color you want to use, open up your style.css file.

We’re going to modify the blue color to be what we want.  The blue color code that Metro uses is: #5bb1f9.  To change the color, just find all the instances of #5bb1f9 and replace them with the color you want.   These will be in the style area specifically for blue, and all styles will be preceded by “.metro-blue”.

The black used by Metro is #333, and replacing all instances of #333 with a color will replace the black used in the menus, footer and other metro widgets.  I typically make this a highlight color, something a little brighter than the primary site color.

Wrapping Up

There you have it, your own custom version of Metro.   I love this strategy as it allows you to build off all the hard work done by the StudioPress team, yet customize the site so that it looks unique and unlike every other version of the Metro theme.

If you don’t have Metro yet, I would highly recommend you buy it (affiliate link).  Metro is a very nice looking and easy to customize theme, that comes with some powerful pre-built widget areas.  Best of all, Metro is fully responsive, meaning it will adjust to any resolution and/or device, including your iPhone or iPad.

Metro is definitely well worth the money paid, and I’m not one to purchase things very often.  Yes, I did include a few affiliate links in this article, and I will get a commission if you use the links to buy Metro.   There is not additional cost to you, and I only use affiliate links for products I personally use and trust.

If for any reason you get stuck, or the changes as written in this article don’t work, just drop me a line and I’ll help you out.

AboutJon Gillham

I am a husband, father of 3, engineer and a huge fan of developing systems to build useful and profitable businesses (mostly online). The reason I build online businesses is to provide financial independence for my family so I can spend time outside skiing and biking with my them.

Jon Gillham, Online Entrepreneur

In Socials: