• Ideas
    • Start Here
    • Team Management
    • Mindset
    • FBA
  • Build
    • Money Site Creation
    • WordPress
  • Monetize
    • Income Reports
  • Grow
    • Link Building
  • Tools
    • Tutorials
  • Services
  • About
    • Contact
  • Ideas
    • Start Here
    • Team Management
    • Mindset
    • FBA
  • Build
    • Money Site Creation
    • WordPress
  • Monetize
    • Income Reports
  • Grow
    • Link Building
  • Tools
    • Tutorials
  • Services
  • About
    • Contact
  • Ideas
    • Start Here
    • Team Management
    • Mindset
    • FBA
  • Build
    • Money Site Creation
    • WordPress
  • Monetize
    • Income Reports
  • Grow
    • Link Building
  • Tools
    • Tutorials
  • Services
  • About
    • Contact
  • Ideas
    • Start Here
    • Team Management
    • Mindset
    • FBA
  • Build
    • Money Site Creation
    • WordPress
  • Monetize
    • Income Reports
  • Grow
    • Link Building
  • Tools
    • Tutorials
  • Services
  • About
    • Contact
Wordpress

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.

87
876 Views
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:
PrevGoogle+ vs Facebook - A lesson in target audienceAugust 5, 2013
Month 11 Income Report - Record Traffic but also FailuresAugust 26, 2013Month 11 Income Report - Record Traffic but also FailuresNext

Related Posts

Wordpress

Don’t ever just shutdown a blog or website

I recently had a client that decided they were not longer interested in...

Jon May 18, 2011
Wordpress

Don’t build a niche store, Google killed them

No, the title isn’t an error, I did intend to say “Don’t”....

Jon January 2, 2014

Comments (10)

  1. Liz
    August 12, 2013

    Hi Larry – Saw your G+ post just now about Metro and came to check out your site. I also work with Genesis – we make products that focus on Genesis – and I too am working on a theme mod for Metro at the moment. I’ll come back and show you when I’m done (hopefully later today but then I have been saying that for a while now πŸ™ ).

    Reply
    • Larry
      August 14, 2013

      Hey Liz, sounds good. Would be very interested in seeing what you’re up to, so let me know!

      Reply
  2. Lynne Houston
    August 19, 2013

    Hi Larry,

    I’ve just switched to the Metro Theme and in the beginning stages of tailoring my blog to fit the specifics. Was curious on few things: How do you change your sidebar photo? And, are there other backdrops / background images for purchase?

    Also, do you teach blogging / host classes? If so – I would love to sign up!! πŸ™‚

    Thanks so much – look forward to your reply.

    Reply
    • Larry
      August 19, 2013

      Hi Lynne, I’m assuming your are using the Genesis Profile Widget right? If so, the image that is used is your Gravatar image. You can change that over at: https://gravatar.com/β€Ž

      There are numerous backgrounds on the internet you can use, just make sure they can be used on commercial sites.

      I don’t teach blogging/hosting classes. I do know some very reputable people that do though and if you’ll shoot me a email via my contact page, I can send you some names to contact.

      Reply
  3. Lynne Houston
    August 19, 2013

    Thanks Larry. Actually my questions regarding the sidebar pic was: The little welcome section on the sidebar of my blog. It has my picture and an little blurb about my site. The person who designed my blog a few years ago is no longer available. When switching from Vintage to Metro – everything merged but, I was trying to change my picture. I can change the wording, but the picture is coded.
    If forwarded my info on your contact as you requested for the blog class referrals.

    Thanks again Larry for your help.

    Reply
    • Larry
      August 20, 2013

      Lynne, I would really need to take a look at the code in order to tell you how to update it.

      Reply
  4. Linda
    September 12, 2013

    Thanks for the well-written post. Since you are editing the child theme directly, what happens if StudioPress updates Metro? Wouldn’t you lose all the changes you made? In the non-Genesis world, you would make a child theme, but what about in Genesis? A child of a child theme?

    Reply
    • Larry
      September 13, 2013

      Hey Linda, unfortunately you can’t make a child of a child (I tried). So yes, you would lose the changes. I keep my changes in a different file and just include my files into the metro files. I’ll add that tip to this article. That doesn’t resolve the issue completely, but does make it easier to manage.

      Reply
  5. Keith Davis
    September 20, 2013

    Hi Larry
    Love the Genesis Metro theme and your post is a great addition to it.

    “Clean up the unused color styles”
    Now why didn’t I think of that?

    Reply
  6. Matthew Gaither
    September 20, 2013

    Thanks for the tips, Larry. The instructions on changing the header size was exactly what I was looking for!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts
  • Does removing or dropping the featured image below the fold help LCP
    Does removing or dropping the featured image below the fold help LCP
    December 27, 2022
  • Content Site Income Report – October 2022
    Content Site Income Report – October 2022
    November 14, 2022
  • How To Detect LCP Elements On Your Website
    How To Detect LCP Elements On Your Website
    November 8, 2022
  • How to Speed Up a WordPress Website Running Ezoic Ads
    How to Speed Up a WordPress Website Running Ezoic Ads
    November 7, 2022

Services

  1. BrandBuilders.io
  2. LightningRank.com
  3. Speedy.Site
  4. SiteBuddy.io
  5. MotionInvest.com
  6. Originality.AI
motioninvest.com
brandbuilders.io

Engineering Your Financial Freedom with Online Business   Sharing everything (except my passwords) as I repeatedly build income streams from online businesses
Contacts
If you have any questions about this site or the internet marketing tutorials I have here please don't hesitate to contact me…
Email Me – Jon Gillham at…
jon (at) authoritywebsiteincome (dot) com
Services
MotionInvest.com
ContentRefined.com
SiteBuddy.io
BrandBuilders.io
LightningRank.com

Privacy Policy | Terms & Conditions

Copyright Β© 2021 WebsiteIncome.com All Rights Reserved.