Changing the Header in Cutline 3-Column Split (or Right) Wordpress Theme

Note: this fix will work for both Cutline 3-Column Split and Cutline 3-Column Right Wordpress themes.

I’ve had several people contact me to ask how I changed my personal blog’s header from the Cutline 3-Column version (click on any image to see a larger version):

To this:

How did I get rid of the extra picture, freeing up more space for text above the fold? The simple way to do it is by removing all this code in the header.php file:

<div id="header_img">
<?php if (is_home()) {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_1.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 1" title="<?php bloginfo('name'); ?> header image 1" />
<?php } elseif (is_single()) {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_2.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 2" title="<?php bloginfo('name'); ?> header image 2" />
<?php } elseif (is_page()) {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_3.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 3" title="<?php bloginfo('name'); ?> header image 3" />
<?php } elseif (is_archive()) {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_4.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 4" title="<?php bloginfo('name'); ?> header image 4" />
<?php } else {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_5.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 5" title="<?php bloginfo('name'); ?> header image 5" />
<?php } ?>

</div>

However, this leaves you with a thick black bar (at the bottom of the #nav section…you can barely see it in the original Cutline image since it almost blends in with the picture) directly above your blog. It meshes rather unpleasantly with the top of the sidebar widgets.

To fix that, go into the ul#nav section of the theme’s stylesheet (style.css) and add the following code:

margin: 0 0 10px 0;

This creates a 10px margin between the line and the top of the blog/sidbar, a small visual break.

If that’s not enough for you or you don’t like the overall thickness, here’s the code to lighten all the lines as I’ve done in the picture below. I changed their colors to match the horizontal line at the top of the blog (whose color is defined as #ccc in the #masthead h1 section of the stylesheet, if you want to change that as well).

This code will lighten the lines above and below the navigation links:

ul#nav { list-style: none; width: 950px; padding: 0 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; float: left; clear: both; }

and this code will change the sidebars to have lighter lines around their widget headers as well:

li.widget h2, li.linkcat h2 { font-weight: bold; font-size: 1.077em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }

This is what the end result will look like:

Voila! Let me know how it works for you.

Tagged as: Blogging with Wordpress, CSS, Design, CSS, Tips, etc., etc., instructions, tips, wordpress theme

If you've found this article useful, why not get new posts in your RSS reader or in your e-mail? Your e-mail will only be used for new posts and you can unsubscribe at any time.

Written by Ms. Crafty

Ms. Crafty enjoys long walks on the beach mountains, Wordpress, clean code, and (some days) Thesis. Her specialties include theme customization and blog migration. She also loves to write about ways to make your site better.