Replace bullets of a list by pdf icons
Posted by gerdami on 10 Sep 2009 22:11, last edited by gerdami on 30 May 2010 07:01
rating: +7
This is a list of attachments
- first pdf
- second but indented pdf
- third
- first excel
- second
- third but indented excel
- fourth
- first word
- second
- third but indented word
- fourth
which is rendered by
[[div class="list-pdf"]]
* first pdf
* second but indented pdf
* third
[[/div]]
[[div class="list-excel"]]
* first excel
* second
* third but indented excel
* fourth
[[/div]]
[[div class="list-word"]]
* first word
* second
* third but indented word
* fourth
[[/div]]after having added the following code to the CSS …
div.list-pdful{list-style-image: url(/local--files/system:icons/pdf.gif); }div.list-excelul{list-style-image: url(/local--files/system:icons/excel.gif); }div.list-wordul{list-style-image: url(/local--files/system:icons/word.gif); }
and uploaded the gifs on page system:icons
Notes
- the examples shown on this page actually use the CSS module
- icons are attached to this page; however, you should store your icons on a reusable and dedicated page
- there are other ways to iconize links
Author
gerdami gerdami . Please visit his/her userPage.
Discuss this
The techniques described in the following website
http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
http://pooliestudios.com/projects/iconize/
explain that it is possible to recognise a link and append / prepend the link with the related icon.
Question: how can we use these techniques to replace a bulleted list by an iconised list ?