They say you learn something new every day.

Scott Hanselman has an old article about CV’s and using software:

Are you a user? Are you a Real User? Do you actually use the hell out of your applications, your phones, your web sites, the Web itself?

I like this comment a lot. I remember being depressed at school when I found people with very expensive technology were unaware of its features. In fact, they used fewer features in their super-duper Ferrari of a computer than I did in my penny-farthing of a machine.

Obviously, there’s some human factors at work here. However, I like to think of myself as someone who uses the hell out of my stuff.

For that reason I turned to having a look at my Tumblr template. After all, it’s a new year so at such a numerically significant time, why not have a new look to my Tumblr? I was inspired by Soup’s Tumblr, which has an amazing theme.

At the moment I use the Minimal Theme template designed by Artur Kim. Yuck a template! (Nothing against Artur Kim’s work, but it’s a template!) And what’s more 204,412 other people are using it as well.

So, I clicked on the custom HTML button and was presented with this terrifying wall of code.

Terrifiying wall of code

That’s the stuff of coding nightmares, eh? However, the exciting thing to realise is that you can actually add in any HTML or css you want. You have total freedom. It’s a far cry from the days of WordPress and Blogspot (I once had to write a horrible parsing hack for a friend to reformat their WordPress blog).

Obviously, the first thing to do with this wall of code was to copy it into an editor that supports syntax highlighting. I use Notepad2, partly because I’m used to it now, and partly because it’s free.

Notepad2 with my horrible code in it

I want to change those links at the top of the page. At the moment they look like this:

Boring headers

As an experiment and a temporary solution, I want to change them to the hover over icons I use on my failed attempt at a webcomic. Of all the hover over icons I’ve ever made these are my favourite. Mousing over the RSS feed icon genuinely makes me happy, and that’s pretty much all you can ask for from an icon.

The nice thing about these is that there’s no jump and no flicker, something that still plagues javascript hover over icons, and people who swap the images in css, or don’t line up the images properly.

The way I’ve come up to do these is to use a single image, but only show part of it. That way, there’s no new image to load. Instead the same image jumps to the side when you hover over.

RSS Icon

The code for this is surprisingly simple as well:

 li.rss {display: block;width: 60px; height: 60px; background: url(“3.jpg”) 0 0 no-repeat; text-decoration: none;}
 li:hover.rss {background-position: -60px 0;}

My perfect type of code! Short and simple.

The important thing is that the pictures are identically positioned so that there’s no jump.

However, when I put this onto the Tumblr page, I encountered a problem. There’s text in the image text, which displays over the image.

Luckily, though, this is a solved problem. You don’t hide the text, but you shift it way off to one side:

text-indent: -3000px;

A bit of a hack, but it works perfectly.

The other thing I did was look into this disqus thing I’ve been reading about. It’s a very clever platform actually that allows you to add comments to almost any site. All you do is add a bit of javascript, and it does the rest

Disqus being clever

And what’s even better is that it allows custom css as well, so that’s something to look at when I get some time.

I suspect that they store all the comments on their own server, so there may be some possibilities for them in the future. It’s a very clever platform.


Leave a Reply

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

You are commenting using your 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

Tag Cloud

%d bloggers like this: