Creative Web Specialist - An online portfolio and resource site of Warren Buckley

Hello,
In this post I would like to talk about how to add a filetype icon to a link. For example if I have a html <a> tag with a link to a .pdf document I would like to show a PDF icon beside the link to inform the user that the link is a PDF document.

I have found out to do this by reading a section in a new book I have recently got my hands on, called CSS Mastery: Advanced Web Standards Solutions which mentions a topic on CSS attribute selectors. The short and informative article inspired me to look further into CSS atrribute selectors, where I came across this following article on how to add icons to links depending on the file type.

From this article I have managed to learn about CSS attribute selectors and I have decided to create my own test with fancier icons used from Fam Fam Fam.

Check my end result and view the source of the page to see how the results was achieved.

View example

I think this is nice code snippet and is interesting on how CSS can be used. If you have any questions or comments I would be happy to try and answer them.

Hello again with a day after my first inital hCard test within Umbraco I have released an updated version of the XSLT.

To use this macro is the same as before, but please now use the updated XSLT code which you can download from this blog post.

I have updated the code to check for content within the macro parameters, the only required field the user needs to input is the company name as this has the FN (Formatted Name) class associated which is the requirment for hCards.

The look and feel of the hCard can be altered with CSS styles, but feel free to change the ordering of the content to suit your own needs. If you do change it around I recommend that you test your updated hCard by using suda.co.uk’s hCard to vCard convertor. If it does not format you will get a general error. So it is case of trial and error here I am afraid.

Hello again and this post I plan to cover the topic of using hCards in the opensource CMS Umbraco.

hCards is a relatively new idea of marking up contact information in a set standardised way. In doing so this allows you to automatically create address book entires from hCard information for your address book software. hCards is one of many microformats that are appearing on the web. I won’t go into depth into hCards as there are many resources on the web for this, but for an overview on hCards and microformats I recommend the following links.

• http://microformats.org/wiki/hcard
• http://24ways.org/2005/practical-microformats-with-hcard
• http://microformats.org/code/hcard/creator

I have created a solution using a macro that allows you to easily create a hCard microformat within the Rich Text Editor of Umbraco.