How to get your logo replace your blog title
With millions of blogs and websites on the web. It is difficult for your site to stand out from the rest of them. One of them would be having a unique and memorable header.
In Wordpress, the <h1> tag is commonly used for the blog title and as you might have know the title should be the first thing to be seen on your blog. It should stand out from the rest of the text.
What better way of having your blog known is to get a nice little logo yet Search Engine Optimized. You may have a problem with Search Engines reading your blog title if you set the title into a logo, so here is a simple way of having a nice logo (which is clickable and retains your heading title on the background) for your header.
Simple Image Replacement Techniques
Image Replacement are nice way of getting attention into header text and could be easily produced with a couple of CSS codes.
For example you have the following codes as your header/blog title:
<h1>Image Replacement</h1>
in the CSS you could do something like this:
h1 {
height:100px;
background: url(images/logo.gif) no-repeat;
}
But with this code, you would see that the header still overlaps the image provided.
to solve this, you can set the text-indent into a negative one, such as -9999px which causes the header text to disappear from the browser. It is also advisable to make sure that overflow is set to hidden. So your CSS code would look like:
h1 {
height:100px;
background: url(images/logo.gif) no-repeat;
text-indent:-9999px;
overflow:hidden;
}
producing such output:
clearing the h1 test to disappear from the display.
Making the image replacement clickable
After hiding the h1 text, another problem is getting the logo to be clickable. Enclosing the whole h1 with tags would do the trick. But doing this causes the whole length of the browser width is the clickable part. To avoid this, you have to insert the <a> tags inside the <h1> tags without enclosing any text, like so:
<h1><a href=”images.php”></a>Image Replacement</h1>
Now, you have to add a couple more codes into the CSS:
h1 a {
display:block;
height: 100px;
width:450px;
}
where height and width is the height and width of the clickable area, the most important part is the display attribute which causes the a to be an imaginary box that is 450×100 pixels.
There are other ways of replacing those boring text with an image but that would be for now. This is not only applicable to Wordpress theme creation but to web designing in general.
Happy coding!
***UPDATE***
As RT of Untwisted Vortex had pointed out in his comment to this post, I have deviced another way of hiding the h1 tag without moving it away from the browser.
I really am having a problem with using the display:none in CSS to hide the header but i know it is possible.
Here is what i made:
<h1><a href=”images.php”><span></span> Image Replacement </a></h1>
for the css:
h1 a {
display:block;
height: 100px;
width:450px;
position: absolute;
}
h1 span{
position: absolute;
height: 100%;
width:100%;
background: url(”logo.gif”) no-repeat;
}
This would hide the header behind the logo. If ever images are disabled then the header would still be seen…
