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
You might also like
Related Posts
- 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...










6 Comments
Great site. A lot of useful information here. I’m sending it to some friends!
Thanks.. this blog will be updated further with a wide range of topics.. thanks for visiting :)
@z3olyte
Great @ Thanks for share this @
@sumonbdinfo
Sumon recently posted..WordPress Installation Instructions
youre welcome! glad to help :)
@z3olyte
z3olyte recently posted..“Breakout” Tap Tap Revenge 3 FC video
Cindy,
Thanks for sharing. I haven’t gotten around to adding my own header image. I haven’t even settled on a good banner images or logo for my site… But once I am I think I might do this little change to my theme.
@element321
element321 recently posted..QuickTip- How To Resize Images Using GIMP
Welcome! Your blog is long-time accomplished even without a header, but if you need help, I can offer to make you one.
@z3olyte
z3olyte recently posted..The Circle of Trust- an Ultra Fractal graphic novel
7 Trackbacks
[...] How to Replace Header Title with Custom Image in Thematic Feature Site [...]
[...] This post was mentioned on Twitter by Emory Rowland, Cynthia Pedrosa. Cynthia Pedrosa said: http://bit.ly/aBfmza how to replace header title with image in thematic [...]
[...] How to replace header title with custom image in Thematic Feature Site | The Game of Life [...]
[...] How to replace header title with custom image in Thematic Feature Site | The Game of Life [...]
[...] How to reinstate header pretension with law image in Thematic Feature … [...]
[...] How to replace header title with custom image in Thematic Feature Site [...]
Thematic: How To Replace Blog Title With A Thematic Header Image…
tutorial on how to replace blog title text with custom image for thematic…