I've been using Ben Sheldon's “shiny upload” code on a relatively busy Drupal site for a while, the idea behind which is to transform the particularly ugly node attachments box on the standard Drupal installation into something more attractive.
I've used the code for over a year now without any problems although some people reported bugs which lead to Roel at Krimson to produce his own version.
There is also now the iTweak Upload module created by Ilya Ivanchenko which is a more advanced take on the above.
One of the accusations laid against Drupal is that in order to get the most out of the CMS then an advanced knowledge of PHP is necessary. This charge though could be laid at a whole number of CMS' in existence not just Drupal.
However, all the solutions above are for a design and presentation problem and I so I tried to find a CSS answer.
Firstly, this is how the block of code looked on a theme I was working on before I styled it:
As you can see it's very, very dull.
The first thing I did was add some CSS to lay it out better.
#attachments {
font-size : 1.2em;
}
#attachments th {
font : 1.2em Helvetica, Helvetica Neue, Arial, sans-serif;
}
#attachments tbody {
border : 5px groove #00E8AE;
background : #00E8AE;
}
#attachments td {
padding: 5px 2px 5px 2px;
}
#attachments .odd {
border-bottom : 1px solid black;
background : white;
padding-bottom : 5px;
}
#attachments .even {
border-bottom : 1px solid black;
}
So now it looks like this:
That's much better as I'm sure you'll agree.
The PHP solutions added special little icons for the different attachments. This is a commonly used technique across the net but designers mostly use JavaScript. As I like to avoid that spawn of the devil where ever possible I picked CSS attribute selectors instead.
As an example, the following code will add a PDF icon to the end of a URL if that link points to a PDF document:
#attachments a[href$='.pdf''] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/application-pdf.png") no-repeat right;
}
The $= specifies that we want to match links whose hrefs end with ".pdf".
The second stage was to get a pen and a piece of paper and list all the major file extensions. It would be silly to list all of them as there are hundreds, if not thousands of these types of suffixes but below are the major ones that came to mind:
PDF:
HTML:
.html, .htm
Audio:
.aac, .cda, .fla, .flac, .m3u, .mp4, .m4a, .m4p, .mp3, .ogg, .wma, .wmv
Text:
.text, .txt, .info
Video:
.avi, .m4v, .mov, .mp4, .mpg,
Document:
.doc, .dotm, .dotx, .sxw
Presentation:
.potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx
Spreadsheet:
.ods, .scx, .xls, xlsm, xlsx
Script:
.asp, .aspx, .css, .inc, .ini, .js, .json, .lib, .php, .php3, .rc,
Compressed:
.7z, .7zip, .ace, .arj, .gz, .rar, .zix
Graphics:
.bmp, .eps, .gif, .ico, .iff, .png, .jpeg, .jpg, .svg,
Now it was a question of putting it all together to create a CSS block for the attachments div:
/* PDF file extension
.pdf
*/
#attachments a[href$='.pdf''] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/application-pdf.png") no-repeat right;
}
/* Audio file extensions
.aac, .cda, .fla, .flac, .m3u, .mp4, .m4a, .m4p, .mp3, .ogg, .wma, .wmv
*/
#attachments a[href$='.aac'], #attachments a[href$='.cda'], #attachments a[href$='.fla'], #attachments a[href$='.flac'], #attachments a[href$='.m3u'], #attachments a[href$='.mp4'], #attachments a[href$='.m4a'], #attachments a[href$='.m4p'], #attachments a[href$='.mp3'], #attachments a[href$='.ogg'], #attachments a[href$='.wma'], #attachments a[href$='.wmv']{
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/audio-x.png") no-repeat right;
}
/* HTML file extensions
.htm, .html
*/
#attachments a[href$='.html'], #attachments a[href$='.htm'] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/text-html.png") no-repeat right;
}
/* Text file extensions
.text, .txt, .info
*/
#attachments a[href$='.txt'], #attachments a[href$='.text'], #attachments a[href$='.info'] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/text-plain.png") no-repeat right;
}
/* Video file extensions
.avi, .m4v, .mov, .mp4, .mpg,
*/
#attachments a[href$='.avi'], #attachments a[href$='.m4v'], #attachments a[href$='.mov'], #attachments a[href$='.mp4'], #attachments a[href$='.mpg'] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/video-x-generic.png") no-repeat right;
}
/* Document file extensions
.doc, .dotm, .dotx, .sxw
*/
#attachments a[href$='.doc'], #attachments a[href$='.dotm'], #attachments a[href$='.dotx'], #attachments a[href$='.sxw'] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/x-office-document.png") no-repeat right;
}
/* Presentation file extensions
.potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx
*/
#attachments a[href$='.potx'], #attachments a[href$='.pps'], #attachments a[href$='.ppsx'], #attachments a[href$='.ppt'], #attachments a[href$='.pptm'], #attachments a[href$='.pptx'] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/x-office-presentation.png") no-repeat right;
}
/* Spreadsheet file extensions
.ods, .scx, .xls, .xlsm, .xlsx
*/
#attachments a[href$='.ods'], #attachments a[href$='.scx'], #attachments a[href$='.xls'], #attachments a[href$='.xlsm'], #attachments a[href$='.xlsx'] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/text-x-script.png") no-repeat right;
}
/* Script file extensions
.asp, .aspx, .css, .inc, .ini, .js, .json, .lib, .php, .php3, .rc,
*/
#attachments a[href$='.asp'], #attachments a[href$='.aspx'], #attachments a[href$='.css'], #attachments a[href$='.ini'], #attachments a[href$='.inc'],
#attachments a[href$='.js'], #attachments a[href$='.json'], #attachments a[href$='.lib'], #attachments a[href$='.php'], #attachments a[href$='.php3'] , #attachments a[href$='.rc']{
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/x-office-spreadsheet.png") no-repeat right;
}
/* Compressed file extensions
.7z, .7zip, .ace, .arj, .gz, .rar, .zix, .zip
*/
#attachments a[href$='.7z'], #attachments a[href$='.7zip'], #attachments a[href$='.ace'], #attachments a[href$='.arj'], #attachments a[href$='.gz'], #attachments a[href$='.zix'], #attachments a[href$='.zip'] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/text-x-generic.png") no-repeat right;
}
/* Graphics file extensions
.bmp, .eps, .gif, .ico, .iff, .png, .jpeg, .jpg, .svg,
*/
#attachments a[href$='.bmp'], #attachments a[href$='.esp'], #attachments a[href$='.gif'], #attachments a[href$='.iff'], #attachments a[href$='.png'], #attachments a[href$='.jpeg'], #attachments a[href$='.jpg'], #attachments a[href$='.svg'] {
padding-right: 25px;
background: url("/sites/all/themes/sports/icon-images/image-x-generic.png") no-repeat right;
}
So it now looks like this:
The only downside to this CSS is that it doesn't work in Internet Explorer 6, however it does look neat and tidy:
The above CSS code will work in all installations of Drupal.
You can download the 16 x 16 icons used in this tutorial from here