Wednesday, November 10, 2004

I just read Amit's excellent post on Firefox link customization using userContent.css and decided to hack around a bit more. What I produced was something that I had always wanted Firefox to do:

  • Now if I hover over a link which will open a new window, I see a red * before it.

  • If I hover over a link which has another URL embedded inside, I see a red ~ before it.

  • If I hover over an email link (one which will open your default email program), I see a red @ before it, and

  • If I hover over a javascript link, I see a red ! before it.

This is extremely useful, especially to a heavy user of tabbed browsing like me.

Here is the code:

*[target*="_blank"]:hover:before {
content: "*";
color: red;
}

*[href*="=http"]:hover:before {
content: "~"; /*content: "\0021b7";*/
color: red;
}

*[href^="mailto:"]:hover:before {
content: "@"; /*content: "\002709";*/
color: red;
}

*[href^="javascript:"]:hover:before {
content: "!"; /*content: "\002707";*/
color: red;
}

Cut and paste this into your userContent.css file and enjoy! Any further suggestions you have are welcome. And thanks again to Amit for an excellent tweak!

Update: Just some code fixes suggested by Amit.

6 comments:

Amit said...

How excellent! I'm now using your customizations. Triggering only on hover solves the problem of these annotations messing up the page layout.

BTW, if you're using ordinary ASCII characters, you don't need the unicode character code. You can use "!" instead of "\000021".

Rajesh J Advani said...

Interesting!

I always knew you can use user defined stylesheets on Firefox, but I guess I never realised how powerful they can be. Thanks!

Btw, from one geek to another, any particular reason why you have both Haloscan comments and Blogger comments on your template? I use just trackbacks from Haloscan.

Nimbus said...

Ah, how very cool! Can't wait to mess around with my UserContent.css file now.

Thanks for the tip!

Hob Gadling said...

Rajesh, the reason I have both Blogger and Haloscan comments, is that when I started this blog Blogger did not have comments. And of course Haloscan keeps only the last 3 months or so of comments. So when the last of the comments made in Haloscan are gone, I'll change my templates and keep only the Blogger comments.

And anyone interested in playing around with their user files might find this extension useful - ChromEdit.

i-me-moi said...

abbe cut the foreplay and write

Kousik said...

Target alert is another extension you'll want to look at.