Friday Nov 13, 2009

PDF and ODF links on your blog

"And now to something completely different". This famous line from Monty Python comes to mind whenever you click on a hyperlink that links to a PDF or ODF document. In order to indicate the type of the link I'm using icons by adding some lines to the stylesheet. Here is the code for GullFOSS, that you can copy and paste into your blog's stylesheet or CSS file without any modifications:

/\* add odf icons for those links \*/ a[href$=".odp"] {     padding-left: 17px;     background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/odp.gif) no-repeat center left; } a[href$=".odt"] {     padding-left: 17px;     background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/odt.gif) no-repeat center left; } a[href$=".ods"] {     padding-left: 17px;     background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/ods.gif) no-repeat center left; } a[href$=".odg"] {     padding-left: 17px;     background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/odg.gif) no-repeat center left; } a[href$=".pdf"] {     padding-left: 16px;     background: transparent url(http://blogs.sun.com/GullFOSS/resource/design/pdf.gif) no-repeat center left; }

Finally an example. The PDF at the bottom of Bill Verplank sketches metaphors gets the PDF icon from the style statement above.

About

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today