Hi friends and welcome to another series of my basic tutorials for adding a thematic header image.  Now that you have your nice Thematic Feature Site theme installed for wordpress blog, next is you would want to have your own thematic header image with your brand identity to replace that dull, boring text.  This has been answered by Ian Stewart’s post on how to add a header image, but many thematic users, especially ones who rely on plugins to avoid writing code, are still struggling to get this to work.  Using functions.php to add a thematic header image would require a bit of php know-how, so I would recommend to modify the child theme’s style.css for starters.  Take a look at the sample image in this post.  Thats what the original header looks like on a fresh install of Thematic Feature Site, and we are going to replace it with a thematic header image.  Other than replacing the text, we are also going to make this image clickable. 

Modifying style.css for your thematic header image

First, you upload your custom image to your webserver and copy the complete filename of the image to your clipboard, which includes paths and start with http://.   This is where most new coders get confused and ask why their thematic header image dont appear even if they have written the proper code.  Here’s the code I used on my child theme’s style.css to add my header that you can see on z3olyte.com and every page on my site.

Here is what my style.css code looks like:

#blog-title {
    width:652px;
}
#blog-title a {
display:block;
text-indent:-9000px;
height: 57px;
width: 448px;
background:url(http://yoursite.com/images/logo.jpg) no-repeat top center;
}
#blog-description {
    position:absolute;
}

The size of this header image in Photoshop is 448 x 57 pixels, so depending on the size of the image you will use, you will replace the width and height values with your own, and use the complete filename of your image for the background:url.

What is text-indent:-9000px; for?

Now this where we hide our default blog title text that came with the theme.  Take note that we dont want to get rid of the text completely. We are just going to move it away from our new header image.   The purpose of keeping the blog title text is to make search engines find out blog, hence it is good SEO.  We can also add that code to our #blog-description as well if we need it replaced with a custom image.

Other tutorials for Thematic

If you enjoyed this tutorial and you’re looking for basic thematic header image tutorials, you can check out how to setup Nivo slider as a text widget and how to set up Nivo Slider in Thematic Feature Site

• Enhance Wordpress Posts with Post Layout Pro plugin If you thought you are content with having the freedom to apply custom HTML code anywhere on your wordpress posts, eventually you will try to find ways to implement them without manually repeating the process of copy and paste.  If...
• Now Accepting Guest Articles with Adsense Share As an added opportunity for bloggers and gamers to branch out and gain you more traffic and exposure, The Game of Life is now accepting guest articles and gameplay videos!  Other than that, each approved article entitles you to boost...
• Set up Nivo Slider in Thematic Feature Site I recently changed my wordpress theme from Boumatic, to Thematic Feature Site. I love the front page look where I want to use my Dev7studios' Nivo Slider on without being in the way with my blog posts having a few...
• Jailbreak for iPhone 4 and 3GS (New Bootrom) Coming Soon Image by Getty Images via @daylife Comex recently updated his twitter account that a jailbreak for iphone 4 and 3GS with the new bootroom will be released very soon before the 4.0.1 firmware release. Comex is the developer behind Spirit...