ikhono.net

I have been doing some web design with blueprintcss lately. If you don’t know blueprintcss, I warmly recommend reading BlueprintCSS 101.

To make certain types of links a little more fancy I was using externalLinks.css from Elements in other templates. I adapted this CSS and use it together with blueprintcss now. Writing

1
2
3
4
5
6
7
8
9

<h1>Fancy links</h1>

<p><a href="http://www.ikhono.net">Internal link</a></p>
<p><a href="http://www.gonedivin.net">External link</a></p>
<p><a href="mailto:zaphod@beeblebrox.net">Send E-Mail</a></p>
<p><a href="aim:goim?screenname=zaphod">Send  AIM Message</a></p>
<p><a href="http://darcs.haskell.org/yaht/yaht.pdf">PDF document</a></p>
<p><a href="http://www.webbyawards.com/misc/2004WinnersList.doc">Word document</a></p>
<p><a href="http://userfriendly.org/rss/uf.rss">RSS link</a></p>

produces the following output

Try it out yourself with the demo of fancy links.

To use fancy links with blueprintcss simply download the archive and extract it to the plugins folder. There are two stylesheets you can use in your template: fancy-links.css and fancy-links-compressed.css. fancy-links-compressed.css is the compressed version of fancy-links.css without comments and unnecessary whitespace.

Make sure to replace yoursite.com in the stylesheet with your URL to reset internal links that use absolute URLs. You can also apply the class exempt whenever you don’t want an icon to appear, e.g. for image links.

Of course this is not exclusively for blueprintcss, you can use this stylesheet for any template without using blueprintcss.

Disclaimer: I didn’t really test this with any other browsers than Epiphany 2.20 (Gecko 1.8), Firefox 2.0 (Gecko/20071204), Opera 9.24 and Internet Explorer 7. So I’m not sure how cross-browser compatible this is.