Blogging: How to Install a Custom Header in Thesis
Man-o-man, you know how they say that "Thesis," the WordPress theme, is so freakin' awesome?
Well…
I personally think it's a pain in the butt. With standard blog themes, you have a chance to edit the pages, and after blogging for so long, I'm really used to that. Socrates allows you to make changes much easier. I mean, everything you want to do with Thesis involves "hooks," which pull in custom features, but you have to code that up! Everything you want to do requires PHP programming.
But Tellman really likes Thesis, so we use it on all of our blogs for Overcome Everything. I do quite a bit of the blog tweakage for OE, and so does our tech team. Only trouble is there was one guy who was really a Thesis star and he isn't with us anymore. Grr…
So, Pat figures out stuff for herself.
And last week it was adding a custom header. Brian Terry, our very talented and all 'round good guy graphics designer, created this really cool header for the OE blog. Check it out: http://OvercomeEverything.com. Tellman loves superheroes, so it's apropos, and it looks great. And well, business as unusual is totally how things happen with OE. I don't think it would be as fun to work there if it wasn't. Ha!
Anyway, I approached installing this header nervously. I mean with a standard theme, you just go into style.css and find the header section, add the path to your image and voila!
But I was determined to figure this out. No blog theme is going to clean my clock and get away with it.
Let me say, though. It's not really all that hard because DIY, the thesis makers, have an amazing forum. You can find posts on almost anything you want to do with thesis, and that helps enormously. I mean, I'm great at copying code that someone else wrote and customizing it. I have no idea how to write it myself. I know HTML very well, but PHP, hmm… Not something I ever got around to learning, but I'm a damned awesome manipulator of it.
Blogs, it's all because of blogs. Much of what you customize in a blog, you do by tweaking the PHP in your editor. I'm pretty good at that after all these years, but…
If you have the Thesis theme, a KILLER header, and have completely NO idea how to get it up there, here are the steps.
1. Open the FTP account for your blog in your favorite FTP client (SmartFTP, Filezilla, CuteFTP, whatever)
2. Navigate to wp-content/themes/thesis in public_html or in a directory, if you didn't install your blog on a root domain.
3. Inside, wp-content/themes/thesis, you'll see a folder called "custom_sample"
4. Rename the folder "custom"
5. Copy the file "custom.css" inside that folder to your desktop.
6. Open custom.css is a text editor or an HTML editor. (DO NOT use Word. Ever. Not for copying and pasting to the Internet, whether you're talking article, blog post, whatever. It's a nasty bloater, and if you use Word for this, it won't work at all.)
7. You'll see some stuff from DIY in custom.css when you open it. You can read it or ignore it.
8. Under it, paste this code:
*/
.custom #header {
height:152px;
padding:0px;
background: url('http://yourdomain.com/images/picture.jpg') 0 0 no-repeat; }.custom #header #logo { display:none; }
.custom #header #tagline { display:none; }
9. The only thing in that code block that you need to change is the path to your header image. So, if your domain was mydomain.com and you stored the header in a folder called "images," and your header was named "picture.jpg", that would be the exact path. There are tons of variations, but this is a simple image insert.
10. Save the file to your desktop.
11. Back in the FTP account, rename the original custom.css "custom_original.css" That way, you can always restore the original file and your site would be the same as it was before you started messing with it.
12. Upload the custom.css from your desktop to "custom." But wait! You still won't see it on your blog. You need to alert Thesis that you're using customization.
13. Go into the dashboard of your blog via web browser
14. Go to Appearance/Thesis Options
15. Open the tab that says "Design Customizations," and check the box that says, "Use Custom Stylesheet."
Check your blog. Your header image should be good to go. Just remember that the size of the header should match the width of your content container and sidebar. So, if it's a smaller image, you'll either need to resize it or narrow your content container in Appearance/Design Options, where you can choose Site Layout/Columns and adjust the width of both your content container and your sidebar so that they please you and fit your header.
Just try to keep the reading pane under 700 pixels. Otherwise, people have to move their eyes too far across the page to read your posts, and that's hard on the eyes. Making your blog easy to read for folks is a very good thing.
And that's it! It should work now! Hey, if I can do it, you can, too. 
