What I should have done is show how to use CSS image replacement techniques to create a clickable header. There are a number of image replacement techniques out there, mezzoblue has full list of all of them, what we are going to look at is listed as the Phark Revisited method or the Plasticmind method.
To make things clear I create a blog and applied the unstyled style, leaving me with the following look.
As you can see everything is very plain text, now I want a nice font to use form my heading, so I have created an image file called header.png that is 940 x 191 pixels. I have saved this in a directory called resources off of the blog root.
I am going to add a style to the end of styles.css to include an image (header.png) in any links in the header section of the template. To do this I add the following code:
#header-name a{
display: block;
background: #fff url("<$mt:blogurl$>/resources/header.png") no-repeat left top;
width: 100%;
height: 191px;
}
The results is this
The problem, as you can see, is that the unstyled name of the blog and the description are still visible, what we are going to do is shift these off the page. Shifting is better than changing the colour as it gives us more flexibility when swapping out images. We don't have to fiddle with matching the font colour or worrying about parts of the image being blocked out. Our style changes slightly to add a negative text indent and to hide the description.
#header-name a{
display: block;
background: #fff url("<$mt:blogurl$>/resources/header.png") no-repeat left top;
text-indent: -9999px;
width: 100%;
height: 191px;
}
#header-description {
text-indent: -9999px;
}
The -9999px shifts the text far off screen so that we don't see it. The final result is
a clickable image header and no fiddling with the templates, just a few lines of css.
]]>