Recently, I have started receiving mail requests, regarding website designs and templates customization tips, whatever I have experimented here on TechZee.
For some mails, I replied back personally but now I think, its better to include small article, not a lengthy one but one tip at a time covering customizations I have already done and whenever it happens in future… what do you think?
I will start with Customizing Header section and adding a banner image (look for area holding my logo, tagline and short description about me, at the top of the page) to it.
To begin with, I must share… I am using Thesis Wordpress Theme (version 1.5). My tips will only be based on that (I may include one more theme in near future, which I am experimenting with, for one of my upcoming blog).
Please remember, I am no expert and my procedure may be different from expert opinions available on topic, still for one thing you can remain assured, I have followed these steps and results match my expectations.
Add banner image to Thesis Theme Header
- To get best results on Thesis theme, you must download Thesis OpenHook plugin, highly recommended.
- Open your dashboards, locate the area, which says, Quickpress, upload your image via this option and insert image into post.
- Now you have got an HTML code for your image along with the link, where you want viewer to be redirected once the image is clicked, cut and paste this HTML code to notebook editor.
- See on left of your dashboard, under the heading, Appearance, click on Thesis Openhook.
- Locate OpenHook for Header; add HTML code (from step 2) here.
- Click on Remove Thesis default header and save; with this you are done.
Wait a bit, I don’t prefer last step… as for Search Engines your site name and tagline plays important role while your site got indexed, so why to remove them… instead I have followed next step and ignored the last one…
- Open Custom Stylesheet
custom.css
by clicking Thesis Custom Styling below Thesis OpenHook under Appearance on left of dashboard and add below given snippet at the bottom of available code on page-
/*CODE TO HIDE DEFAULT HEADER AND SHOW CUSTOM HEADER */
.custom #header #logo { display: none; }
.custom #header #tagline { display: none; }
/* Optional to remove space around header image so image sits on divider line */
.custom #header { padding: 0; }
- Save your changes and you are ready to show your style to world with this clickable personalized Header image.
Isn’t it simple?
If you are benefited, add your website below and I will make a visit to your site.
Related Websites Below
- How To Use Search Engine Optimization to Destroy Your Competition in 3 Easy Steps Search Engine Optimization - Secrets Revealed.Let's begin: What is 'competition'? Competition is described as "one that competes", "a rival", "selling or buying goods or sevices...
- Affiliate Marketing - What Are Keywords and Why Do You Need Them to Sell Your Affiliate Products What is a keyword?A keyword is a word that describes your product, service or web page you are trying to market. For example this article...
- Easy Ways to Increase Organic Visitors to Your Corporate Blog In many people’s opinion, organic traffic is the best. It’s free, it’s targeted and nine times out of ten, you’ll get a much better response,...
Related Posts:
- Customize Thesis theme: Change color of sidebar
- Customize Thesis theme
- Hit the target audience… personalize your twitter background page
- Make your own web site a brand, add logo to browser address bar
- Image editing tools… add power to blog posts
Didn’t find what you’re looking for?... Google@Internet, it below
What next?...If you liked the article, bookmark it
{ 5 comments… read them below or add one }
I wouldn’t call this information horrible, but it doesn’t contain enough help for the average person to get this working. It says “Now you have got an HTML code” I do? News to me. There is no step as to where to get the HTML code. Plus it says “along with the link, where you want viewer to be redirected once the image is clicked” So it links to a post with the image??? It doesn’t say where to put the URL you want to link to. I wish people would stop publishing garbage like this, because it drowns the good info in the search engines.
Rob, accept my apologizes, if the article didn’t helped you and wasted your time. I wrote this article in steps which I followed… and since I have very limited knowledge of design and development, I thought if I can do it, anyone can do it.
Here in quickpress when you upload the image and insert into the post, in the content area you will receive an HTML snippet which will be used for the purpose as explained in article.
this advice worked for me. i am really glad you put this together. it might not work for other people but for me, it worked beautifully and i used it a while. awesome!!!!
THANK YOU SOOOO MUCH.
Danny´s last blog ..La Blogger: Jennine
I am not understanding how can I use this information to help myself .
I want to use http://www.jagoinvestor.com/wp-content/uploads/2009/11/header.jpg as a header image just as a background image on my blog Header , I want it to be streched fully to left and right . Not sure how to do ?
Manish
Manish´s last blog ..Do not Invest just for Tax Saving
Hi Mark Slym, thanks so much for your article. It was totally easy to follow your step by step instructions. By the way, I too am completely new to every bit of code or web related stuff but your instructions were great to follow. I searched various other articles and tried them b4 finding yours and I must say yours worked so easily. Thesis openhook definitely is an easier alternatively.
Peace
Mahindra
Mahindra´s last blog ..Learn all you Need to Know about Strategy Internet Marketing and How to Make Money Online using Most Effective and Efficient Techniques and Strategies for Internet Marketing