Clickable Custom Header in WordPress (.com) using Sandbox theme

Beside this minimalistic blog, I have another blog (that is actually more of a web-site) for which I decided to go with the Sandbox Theme, cause I wanted to customize my page. Yes, you have to buy the Custom CSS upgrade (10 bucks.. a year?!).

One of the most difficult (less documented) tasks has been to change the blog title with a custom image and keep it clickable, so that users can always come back to the main page easily.

The only tutorial I found that is still online is this, as well as some posts in which sunburntkamel (the author) talks about it.

The trick is to expand the a element to the size of your image, and display the title itself off-screen.

My title is center-aligned, so this is the code:

#blog-title {
margin: 0 auto;
position: relative;
width: 361px;
}

#blog-title a {
background: transparent url('http://myblog.files.wordpress.com/2011/06/my_logo.png') top center no-repeat;
display: block;
height: 250px;
text-indent: -9999px;
}

So, as you can see, the text is 9999 pixels left of the display, and the image is as large as the clickable portion of the page! yippie!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s