Hack 'till it hurts

Lastnight was a marathon Wordpress hacking session.
*/Breif History/*
After starting with lofty ambitions of Building a Wordpress Theme from Scratch, then giving up on Worpress themes altogether and going back to the warm comfort of Dreamweaver - last night I found the happy medium that feels like home.
*/end/*
I downloaded and installed a fresh copy of the default 'Kubrick' theme (which I had already hacked to bits once before) and began working carefully to modify it piece-by-piece being mindful of staying within my means.
I had great success adding a new footer div that spans the entire width of the page, no sweat. I can really feel my CSS skilz growing stronger every day.

Four hours later it was looking really good, but getting late...
I spent entirely too long looking at wp_codex in a vain attempt to make my monthly archives display in a clean, neat European-style date (mm.dd.yy) instead of the cloddy full_month_name year format. Changing those settings for the blog itself was as simple as looking at PHP date parameters, but getting that to display in the sidebar as 'Archives' is another story. Around 1am I ended up just opting to display the yearly archive, and went to bed with a smile on my face thinking about what the future holds for echo{Ability}.

(falling in love with Wordpress, one late-night session at a time)

SEO Friendly Rollovers

I love web standards. Its true- a new passion is burning in my loins, and it is all coded in CSS.
Allright, enough.
Since our target audience still needs the literal instruction to 'click here' appended to everything nav, I have been struggling to find beautiful ways to prompt click-throughs. Sure, the old familiar javascript rollover buttons will do the trick, but the SEO company we are working with would be ashamed...instead I needed something that had a text link backed by a stunning effect.
I had a hunch that the answer lie in background images, and today I finally stumbled upon a tutorial that gave me the nudge I needed.
You can see it here.

I took the cue, making the entire DIV a link, and added one thing - a hover property:
#logolink
{
display: block;
height: 100px;
width: 200px;
background-image: url(logo.jpg);
}
a#logolink:hover
{background-image: url(logo_up.jpg};
}

I also set a few other properties, so the final CSS looks like this:
#logolink
{
display: block;
height: 150px;
width: 200px;
background-image: url(images/image1.png);
font-family: Arial, Helvetica, sans-serif;
font-size: 60px;
font-weight: bolder;
text-decoration: none;
color: #FFFFFF;
text-indent: 5px;
text-align: center;
}
a#logolink:hover
{background-image: url(images/image2.png);
color:#000000;
}

You can see an example here.

Disclaimer: I have only tested on Firefox & IE 7 at this time.
Enjoy!