The end of an era is upon us:  floppy discs will no longer be manufactured as of March 2011. Sony, the last real manufacturer of this lovable but decidedly antiquated storage form announced this week that they’ll be halting sales in Japan (the last real market for it), and have already begun shuttering their international sales in all but a few countries.

This announcement really doesn’t affect most of us individual users, as computers these days don’t even ship with floppy drives (Curse you Apple!), but tech blogs around the country (see: cnet, crunchgear, and NYTimes techblog as examples)  lit up as geeks everywhere waxed nostalgic about the good old days when awesome games like Oregon Trail and Number Munchers loaded off of 3.5 inchers and every kid was assigned their own disc in computer class…ah those were the days. (Oh okay fine – that was me in the kitchen the other day but still! Oregon Trail RULED!)

Continue Reading →

Here’s a little tip that can save you some time and money. I received a request today from a client of ours to add a small PDF icon to a downloadable PDF on their website. “No problem,” I thought at first, but then it occurred to me, “What would happen if there were more than one PDF on the site? Wouldn’t it be weird if this is the only PDF with an icon?”

So after a quick Google search for “Automatic icons with css” I followed the top hit, Automatic Link Icons v2.0, a blog post with a set of step by step directions to do exactly what I was looking for; adding this icon to every PDF file in the site without having to go back through and recode hundreds of links. The most amazing part? This works without changing any HTML code within the site. So I figured I’d give it a shot. All you need to do is add a simple style to your style sheet, upload the icon of your choice and Voila! You’re done!

First I’ll show you the code, then explain how it works.

a[href$='.pdf'] {
display:inline-block;
padding:2px 15px 2px 0px;
line-height:18px;
min-height:18px;
overflow:visible;
background:transparent url(images/icons/pdf.gif) center right no-repeat;
}

For anyone familiar with CSS, you’ll notice this looks pretty standard. However the first line, the selector, that’s where the magic happens.

a[href$='.pdf'] {

This is actually a conditional statement that will find all the links in your site ending with a .pdf file extension. That’s the beauty of it. Now that we have only .pdf files selected we have the ability to style those using CSS anyway we see fit. This is allows us to seek out and find every instance of a PDF file within the site like the find and replace function in Microsoft Word. Imagine all the brain cells saved by not spending hours upon hours relabeling every link to a pdf class=”pdf”. This is the perfect retro-fit!

And it is not limited to PDF files either. You can add icons to: mailto’s test@email.com, RSS Feeds, even Zip Files. Your options are only limited to your imagination and your CSS coding techniques!