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!
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. :(
Thanks for the read. I have uploaded my header and it is as you said align-left, how can I now centre it?
Maybe: .custom #header{text-align:center;} ??
This works for centering the header image:
.custom #header{background-position:center;}
And do you just add that after the aforementioned code for the pic, or insert it somewhere else? (New to this)
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
Great, but how do we make that header image link? Seems like an easy add for the next update.
It should be linked automatically.
No, its not linked automatically. I am still looking for a fix. Any pointers.
Thanks!!
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