Thesis 1.8 Header Image

What’s great about this is how easy it’s going to be for your clients to update their header image. Obviously! Here’s how it works:

You’ll notice the “Header Image” under the Thesis menu in your WordPress Dashboard. Just click on it – and it will take you to the upload page. Thesis will tell you an optimal width. In my case it was 952 pixels. If the image is larger than specified – Thesis WILL crop it to fit – although, the image quality will suffer after the cropping software beats it up. It’s best just to make it the right width in Photoshop first.

Just click “Browse” and “Upload”

Now wasn’t that easy? Removing the image is even easier. Hover over the image, and click “Remove Image”.

You don’t have to have an image as wide as your site! You can upload a smaller image, say, a logo and it will align-left in the header.

The CSS output is as follows:

/*---:[ wp custom header image ]:---*/
#header { height: 12.9em; padding: 0; background-image: url('http://cdn.gregrickaby.com/wp-content/uploads/2010/07/cropped-awesome-header-image.jpg'); background-repeat: no-repeat; background-size: 85.2em 12.9em; }
#logo a { display: block; width: 23.667em; height: 3.583em; text-indent: -9999px; outline: none; }

The image upload object puts the image in /wp-content/uploads/ and then writes it into layout.css

Easy. And about time!

Greg Rickaby runs on the Genesis Framework

The theme you're viewing is the eleven40 Child Theme, which was built on Genesis.

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Find out more about the framework features
Check out the Genesis demo and the wide variety of child themes
See example designs in the Genesis design showcase
Become a StudioPress Affiliate

Comments

Brooke says:
February 11, 2011 at 15:33
Great, but how do we make that header image link? Seems like an easy add for the next update.
- Greg Rickaby says:
  February 14, 2011 at 08:46
  It should be linked automatically.
  - Ashish says:
    August 19, 2011 at 09:45
    No, its not linked automatically. I am still looking for a fix. Any pointers.
    Thanks!!
Daggi says:
February 7, 2011 at 02:16
I keep getting this when I try to change Thesis…could you please tell me what I did wrong?
Warning: Invalid argument supplied for foreach() in /hermes/bosweb/web108/b1083/ipg.daggibayercom/wp-content/themes/thesis_18/lib/classes/options_design.php on line 468
Warning: Cannot modify header information – headers already sent by (output started at /hermes/bosweb/web108/b1083/ipg.daggibayercom/wp-content/themes/thesis_18/lib/classes/options_design.php:468) in /hermes/bosweb/web108/b1083/ipg.daggibayercom/wp-includes/pluggable.php on line 890
THANKS
Kelly says:
September 21, 2010 at 02:23
Thanks for the read. I have uploaded my header and it is as you said align-left, how can I now centre it?
- Greg Rickaby says:
  September 21, 2010 at 07:00
  Maybe: .custom #header{text-align:center;} ??
  - Jane says:
    December 2, 2011 at 09:09
    This works for centering the header image:
    .custom #header{background-position:center;}
David Alexander says:
August 3, 2010 at 11:30
A great addition to an already king making theme. Have you experimented with custom post types yet? For the life of me I cant get my custom template to take. :(