Since I launched this blog, I always looking for great theme for it. Unfortunately at that time I doesn’t know that wordpress.com doesn’t offer custom themes upload, which is understandable since they want to make sure all the themes works good with their wordpress software. There is a plan to shift the blog to wordpress.org, but not at the moment. So instead of changing to self-hosted one, I decided to change a new look to Techie Talkz.
There are several good themes available in wordpress.com, and I believe the number will increase in the near future. After a few round of choosing, I decided to have a go with INove theme. This is a very popular theme used by many self-hosted wordpress blog and just available to everyone in wordpress.com few months back. It looks nice, clean, Mac-ish look, and also has some extra functions exclusive for itself. But it kind of a drawback that it doesn’t natively support custom header image. (Doable but not in a simple way anyway)
But hey, look, my blog used INove theme, and I am using a custom header! I will show you how to place the custom header next, but before that, let us say thank you to the author of INove theme, which make the theme banner-supported, as well as Juan and Raul for posting up the html code for the custom header for INove theme.
How to place the custom header?
First of all, you must be aware that INove theme supports header banner with HTML code supported. If you doesn’t know how to access it, login to your dashboard > Appearance > INove Theme Options. You will see several options for you to activate and look for the option named banner. The blank space is meant for you to input the HTML code, which is one of the important step in placing the custom header.
Design your own header image
However, before the customization, you would want design your own header image. It can be at any size, but I would suggest to follow the size of the original one, which is at 936×90, so it will be a little bit easier to manage, and matches with the HTML code which I will post later. You might want to refer the original header of INove and design you own header from there.
Modify the HTML code
The original HTML code for the custom header can be found in CSSWiz’s blog, but if you build your own header with the suggested size of 936×90, you can refer to my customized code, most likely your image will get aligned and covered the original header. So, paste everything to the blank space at the banner option explored earlier, then replace your own header URL in my code (stated YOUR IMAGE URL HERE). Else if you have the header size other than the suggested one, you might want to play around with the position and padding values to align your custom header. (adjust > save changes > reload your blog to see changes)
Don’t forget to tick those options for ‘Who can see?’. Else you won’t be able to see the banner as well as the changes you have made to the html code.
Editor’s Note
All thanks to the CSSWiz’s blog for the code, as well as wordpress.com for providing such a nice theme, and not to forget, thanks to the author of INove theme – mg12. Hope you enjoy my blog’s new theme and happy customizing if you are using INove theme as well!
Techie Talkz 
Thank you so much! This was very helpful!
Hi, I tried this and it only shows a question mark icon over the original header image. What am i doing wrong? Thanks!
Hi,
I just checked your site and it displayed beautifully. 🙂 Congrats for fixing the problem … Hehe …
Rgds,
Taylor
thanks for this. But,..the banner seems to be all he way to the left on the Windows Explorer and correct on my MAC. Any idea on how to fix this so that it displays correct on both? I’ve been playing with the code all day and could not figure a fix.
Hi Vagrant,
Not sure which browser you tested but your site work correctly in my Windows 7 (IE, Firefox, Chrome), and also Safari. Or probably you have got it fixed? 🙂
Rgds,
Taylor
I have a old laptop running Windows XP still. I’ve never updated my IE browser either. Maybe this could be the problem. In any case, if it’s running ok on your multiple browsers, than I shouldn’t have to worry about it too much.
Thank you for the response and the great banner tip. I’ve been trying to figure that out for awhile. It just added another dimension to my site.
Regards,
Vagrant S.
I see. No worries, your site work perfectly for all the browsers in my Windows; you might want to check out your site browser shots at http://browsershots.org/, I tested your site with Safari in this site. You can get all different browser render screenshots for your site if you want.
You’re most welcome mate, glad you find the tips useful. BTW, Nice shoes there *drooling*
Rgds,
Taylor
Your code worked GREAT… but can you tell me how I can show the website name in the image? This part no longer shows.
Thanks
Hi,
Unfortunately it will overlap the Website title at the back. The best thing you can do is to include the Website title in your header, as what I have done. Hope it helps. 🙂
Rgds,
Taylor
Bookmarked!
Hi Bata Kenya,
Thanks! Good luck for your business in Kenya!
Rgds,
Taylor
Hey!
What are the odds to bump into you here.. habari yako?
This is a beautiful and helpful post as well. Thanks ghost301
Hi
Can anyone tell me how to add a image banner to the header area?
My Control panel for Appearance doesnt show the Header button to add any image
Hi,
Are you using the INove theme? If you are, do follow my post steps to add the banner image.
Rgds,
Taylor
Yeah this is awesome, one makes you fill out survey with malware, the other is protected and makes you beg for login rights. Wow, so helpful.
Hi,
Sorry for the experience. I never know that the original poster make his blog as private now. Please find the html code for your kind perusal.
http://pastebin.com/adBWLFEd
Rgds,
Taylor
Taylor, you’re the best! I take my comment and redirect it at the original poster. Thanks a bunch!