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.

Over the past two months on Google+, I’ve been meeting lots of new people, and many of them new bloggers.   I always enjoy heading over to these new blogs to take a look, read over their content and try to add an encouraging comment.

While visiting all of these new blogs, I started seeing some common mistakes new bloggers were making, especially related to post formatting.

When I first started blogging, I really struggled with how to best format a blog post, and it took me more than a year to determine the format that worked optimally for my blog and readers.  Post formatting is something I still adjust on a frequent basis.  Again, always new things to learn.

Interested in learning how you can help retain people on your blog, entice them to read your article, and make them a subscriber?  The small little tips I share below can really make a huge difference in your blog.

Use Sub-headings

This is a big one.  I was visiting a blog the other day, and the article was just one big long stream of text with very little white space, and no logical breakup of the content.  Using sub-headings provides a visual break in your post, allows the reader to skim over the content, and has an SEO benefit.  Google gives priority to text in sub-headings – use them.

The line above that says “Use Sub-headings” is itself a sub-heading as are the other common blogging mistakes listed here.  See how it’s easy to skim over the article and know all of the common mistakes without having to fully read the article?  This is really helpful for the reader.

Sub-headings are generally <H2>, <H3> or <H4> tags.  If you’re using Thesis (affiliate link) like I am, your sub-headings should be <H3>s.  To determine which one to use for your theme, see what heading level your article title is.  Then use the next level down.

Using the wrong sub-heading can hurt you your SEO optimization a little, so make sure you are using the right one.  Google likes things well organized and hierarchical.

Use lots of white space

This is actually more of a recent trend, and one I probably started using a little late.  I always wrote my article more like a book using longer paragraphs.  That’s also how my generation was taught to write.  Not so with digital content.

People are busy and when they pull up an article and it’s wall to wall text from top to bottom, they perceive the article as being bigger than it really is and leave.  Putting more white space in your article creates a perception that it’s not as large and overwhelming.

Additional white space also makes the article easier to read and skim.

See the trend on skimming?  Really important in today’s web.  Most of your visitors will not read your whole article, most of them will skim it.  They’ll read the parts of interest to them, and ignore the rest.  Breaking your text into smaller “chunks” allows your readers to quick find and digest each chunk and move on.

Oh, and if you don’t use paragraphs, please use them.  Nothing will drive a visitor away faster than a wall of text.

Don’t use light on dark color

I know, black text on a white background is boring.  I agree, I really do.  But you know what?  Black text on a white background is highly effective.

Blogs are met to be read, and anything done that makes it difficult for your visitors to read your blog, hurts your blog.  Make it easy, and use black text on a white background.   Spend some time looking at the biggest blogs on the web and you’ll see the same pattern.  One the blogs I’ve been reading for years and still love to read is Copyblogger.  Hands down, they win my vote for best site design.  What do they use?  Black on white.

Which one do you think is easier to read?

Be different in your header, your sidebar, your footer, the graphics that you use in your content, but don’t be different with the colors you use for your copy.

Use a larger font than you think you should

Again, we want people to read our blogs.  Focusing on making our blogs easy to read and skim, you’ll want to use a larger font.  Many fonts used in content on blogs are too small.  I know, some of you are young and have no problems seeing it.  Well, for geezers like me, it hurts my eyes and gives me a headache to read a large article when the font is too small.

Yes, I can increase it using my browser settings, but most of the people that visit your site don’t know how to do that.

I’ll say it again: Make things easy on your readers.

Don’t use script type fonts

Script fonts are cool, but they’re hard to read.  Sometimes really hard to read.  I generally won’t read an article that uses a strong script font because by the time I’m half way through, my head hurts.  Seriously.

Which one do you think is easier to read?

Just say no to script based fonts.

Keep it simple

This one might generate a little controversy, but I recommend targeting a high-school or middle-school reading level.  Use anything higher and you might begin to use words that people don’t know.  This  results in them not understanding your article.  Even worse, they might leave to go look the word up, and not come back.

I always find it funny when people use big fancy words – I just don’t get the point of it, unless they are trying to impress people with their vocabulary.

You should target your site for the majority of web visitors.  This gives your blog the most exposure and largest audience.  If you write at a college level reading level, you’re turning people away.

If you’re ok with that, than by all means continue.

Use bullets

Google likes bullets and so do your readers.  Not too many mind you, but a reasonable amount.  Using bullets also makes your article easier to read, skim and follow.  Use bullets for short lists.  Using bullets makes your articles easier to read, easier to write, more skimmable and improves your SEO.

Avoid using bullets for items that require longer explanations.  I’ve made this mistake before, and find that using Sub-headings is more effective and readable.  Using  bullets for large amounts of text actually ends up making it harder to read, and takes away from the advantage of using bullets in the first place.

Use images

When was the last time you read  magazine that didn’t have images alongside the text?  Think of your blog as an electronic magazine.  Everyone of your posts should use images or visuals to help bring the points home.  Images will also often entice a visitor to read an article that wouldn’t normally read.  Why?  Because the image draws them in.  With all of the free images for your blog available, there really isn’t a good excuse for not have outstanding and high quality images in your blog articles.

I suggest having at least two images.  One early on in your content so the visitor sees the introductory article text AND the initial image.  Then, and midway down or towards the end of the article, having another.

There really isn’t any right or wrong size or shape, just develop your own unique style and people will associate it with your brand.

Use 3 main sections

The first part of your article should tell the visitor what you’re going to tell them.  An executive summary if you will.  Keep it to one or two paragraphs and be concise. The last sentence should be somewhat of a teaser to make them keep reading.

The middle sections should be the “guts” of your article, the real valuable stuff.

The last section, and generally the last paragraph or two should tell the visitor what you told them (a summary) and then leave them a few things to think about.  I like to end with questions, as it encourages people leaving comments.  Speaking of questions…

How about you?

What mistakes have you seen bloggers making? Disagree with anything I touched on above?  What would you add or remove from the list?  Add a comment!

Photo Credit: plindberg