Out of the box, the 2011 WordPress default theme is very visual… but it also requires a heavy bit of scrolling to reach the content.

Have a look at a sample:

That banner image is 1000 x 288 pixels.

The first step I took toward reigning in this space consumption was to use a shorter banner image – mine is 1000 x 170:

(It is a macro photo of the inside of an old 2gb SCSI hard drive)

This helps, but now the banner is about the same height as the white space above.

The first step toward fixing this comes from a blog post here: http://www.throwingabrick.com/wordpress/customizing-twenty-eleven-theme-banner.html

Essentially, you customize the css for the site (which can be done without creating a fullblown child template by clicking the “Edit CSS” link from the Manage Themes page. You then paste this in:

#site-title {
position: absolute;
left: 7.2%;
top: 0.125em;
}
#site-description {
position: absolute;
left: 7.6%;
top: 6.625em;
color:white;
}
#branding #searchform {
background-color:white;
}
}

Note: I modified Roy’s code a little to force the search box to have a white background, and the description text to be white.

You can change the Title text from the Themes Page –> Header.

With the applied changes, my header now looks like so:

Much shorter.