Stylize the Content File iPart

The default output of the Content_File iPart is fairly simple: file name and file type. Personally I think adding graphics to the links makes it stand out more. This tip uses CSS and jQuery to display icons that match the file type. The icons used in this example were found on the Icon Archive but any icon set should work.

Add to CSS file

<style type="text/css"> .PDFFile { background-image: url(/img/pdf-icon.png); padding-left: 40px; background-repeat: no-repeat; } .WordFile { background-image: url(/img/doc-icon.png); padding-left: 40px; background-repeat: no-repeat; } .ExcelFile { background-image: url(/img/xls-icon.png); padding-left: 40px; background-repeat: no-repeat; } </style>

Add to template (or custom .js) file

<script type="text/javascript"> jQuery(".DisplayFile").each(function() { var t = jQuery(this).html(); if (t.includes("PDF") == true) { jQuery(this).addClass("PDFFile"); } else if (t.includes("Word") == true) { jQuery(this).addClass("WordFile"); } else if (t.includes("Excel") == true) { jQuery(this).addClass("ExcelFile"); } }); </script>

Should make your content go from this

Important File.pdf
(Adobe PDF File)

Important File.doc
(Microsoft Word Document)

Important File.xls
(Microsoft Excel Workbook)

To this

Important File.pdf
(Adobe PDF File)

Important File.doc
(Microsoft Word Document)

Important File.xls
(Microsoft Excel Workbook)
2459 Bridge Road
Oakville, ON
L6L 2G9
Canada
jake@k2andyou.com
support@k2andyou.zendesk.com
Office: (905) 901-3625
Mobile: (289) 795-3538