System - Dropfiles Reformatter
User Guide & Documentation
Overview of Functionality
The System - Dropfiles Reformatter plugin automatically intercepts default Dropfiles HTML table outputs on the front end of your Joomla site and reformats them into responsive, modern card layouts.
Key features include:
- Mobile-First Layout: Converts wide tables into stacked, accessible flex cards.
- Preserved File Titles: Retains exact HTML title casing (e.g., proper acronyms and reference codes) without forced capitalization.
- File Type Recognition: Automatically detects file extensions and assigns distinct visual badges and FontAwesome icons (PDF, ZIP, Word, Excel, PowerPoint, Images, etc.).
- Automated Accessibility: Dynamically calculates high-contrast text and border colours based on your chosen background hues to meet WCAG contrast standards.
- Custom Styling Controls: Full administrative control over theme colours and border radii for card rows and action buttons.
Dependencies
To run this plugin properly, ensure your environment meets the following requirements:
- Joomla! Version: 4.x or 5.x
- PHP Version: 8.0 or higher
- Prerequisite Extensions: Dropfiles component by JoomUnited
- Category Theme Setting: In the Dropfiles backend, file categories must be set to use either the Table or Simplex theme.
- Icon Library: FontAwesome 6 (must be loaded by your site template or the Dropfiles component for file icons to render)
Limitations
- Supported Themes Only: The reformatter only targets categories configured with the Table or Simplex themes. Categories set to tree, grid, or other custom Dropfiles themes will intentionally retain their default layout. This is a deliberate feature to allow selective reformatting across your site.
- Frontend Scope Only: Reformatting applies strictly to the site frontend; the administrative backend Dropfiles management interface remains unchanged.
- Dynamic Page Updates: The plugin automatically detects when new files or lists load on your page. However, if a custom script or page builder reloads content in an unusual way, a brief manual page refresh may occasionally be needed to reformat the cards.
- File Title Cleanup: The plugin automatically removes clutter from titles—such as removing a leading "pdf " prefix. If a file uses a non-standard naming format, the plugin will simply display the title as originally written in Dropfiles to ensure nothing important is cut off.
Installation Process
- Log in to your Joomla Administrator panel.
- Navigate to System → Install → Extensions.
- Under the Upload Package File tab, drag and drop the plugin
.zippackage (containingdropfilesreformat.php,dropfilesreformat.xml,script.php, and themediadirectory). - Once installed, go to System → Plugins.
- Search for System - Dropfiles Reformatter.
- Click the plugin name, toggle the status to Enabled, and save your settings.
Uninstall Process
- Log in to your Joomla Administrator panel.
- Navigate to System → Manage → Extensions.
- Search for
Dropfiles Reformatter. - Select the checkbox next to System - Dropfiles Reformatter.
- Click Uninstall in the top toolbar.
Configuration of Plugin
- Go to Plugins (System → Plugins).
- Open System - Dropfiles Reformatter.
- Adjust the styling parameters across the two configuration tabs (Card Styling and File Type Badge Colours).
- Click Save or Save & Close.
Available Options for Configuration
Card Styling Tab
| Option Name | Type | Default Value | Description |
|---|---|---|---|
| Row Background Colour | Colour Picker | #1e40af |
The base background colour for the main document card row. |
| Row Hover Colour | Colour Picker | #1d4ed8 |
Background colour applied when a user hovers over a card row. |
| Main Block Border Radius (px) | Number | 8 |
Corner rounding in pixels for the main document card container (0–50px). |
| Download Button Colour | Colour Picker | #f59e0b |
Background colour for the Download button. |
| Preview/Open Button Colour | Colour Picker | #374151 |
Background colour for the Preview/Open button. |
| Button Border Radius (px) | Number | 6 |
Corner rounding in pixels for action buttons (0–50px). |
File Type Badge Colours Tab
| Option Name | Type | Default Value | Description |
|---|---|---|---|
| PDF Badge Colour | Colour Picker | #dc2626 |
Background colour for .pdf document badges. |
| ZIP / Archive Badge Colour | Colour Picker | #d97706 |
Background colour for .zip, .rar, and .7z archive badges. |
| Word (DOC/DOCX) Badge Colour | Colour Picker | #38bdf8 |
Background colour for Microsoft Word file badges. |
| Excel (XLS/XLSX/CSV) Badge Colour | Colour Picker | #16a34a |
Background colour for spreadsheet file badges. |
| PowerPoint Badge Colour | Colour Picker | #ea580c |
Background colour for .ppt and .pptx presentation badges. |
| Image Files Badge Colour | Colour Picker | #9333ea |
Background colour for .png, .jpg, .jpeg, .gif, and .svg badges. |
| Other / Generic Badge Colour | Colour Picker | #6b7280 |
Default background colour for unrecognized file extensions. |