Genius is nothing but great effort applied. – Awa Kenzo

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

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.

Comments

  1. 1

    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. :(

  2. 2

    Thanks for the read. I have uploaded my header and it is as you said align-left, how can I now centre it?

  3. 6

    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

  4. 7

    Great, but how do we make that header image link? Seems like an easy add for the next update.

  5. 10
    Blumerkuri :

    Hi Guys,

    Short sharp and informative, thanks. I was just wondering if anyone knows how to change the ‘display space’ of the actual header image, to for instance have it displayed over the entirety of the page? Any thoughts, ideas?

    Thanks

Trackbacks

  1. [...] posts: How to Use jQuery Lazy Load in Thesis 1.7 Thesis 1.8 Header Image How to Create a Sub-Loop in [...]

Leave a Comment

Comment Policy: Thanks for visiting my site! Comments are a permanent record of who you are and what you stand for. Your words are your own, so be nice and helpful if you can. Unhelpful, disrespectful, or spammy comments will be deleted. All comments are read and appreciated, and if you have a question, I will try to respond within a couple days.

*