Mit JToolBarHelper-Klasse der Joomla 1.5.x API lassen sich im Administrator-Backend schnell und comfortabel nahezu beliebige Task-Elemente in die eigenen Komponenten/Extensions einbinden. Genauso schnell wird man bei den anfänglichen Versuchen festellen, dass die Übergabe der direkten Pfade für Icon-Bilder nicht möglich ist. Die Joomla DokuWiki gibt zumidnest für die JToolBarHelper::custom()-Methode einen ersten brauchbaren Tipp. An dieser Stelle weiss man, das Ganze ist an das aktuelle Theme gekoppelt.
Die Lösung:
Spätestens nach dem Studieren des HTML-Quellcodes stellt man fest, dass Joomla standardmässig für jeden übergebenen Icon-Parameter eine zugehörige CSS-Klasse im HTML-Code des Toolbars generiert.
Schauen wir uns dabei die Definition von custom() etwas genauer an:
JToolBarHelper::custom( $task = '', $icon = '', $iconOver = '', $alt = '', $listSelect = true, $x = false )
Wenn wir nun beispielsweise ein Add-Button bauen möchten:
<!--? echo JToolBarHelper::custom('add' , 'new', '' , 'Add item', false); ?-->
Würden wir im HTML-Quellcode folgende zugehörige Zeilen wiederfinden:
<a class="toolbar" href="#"> Add item </a>
Die Definition für “icon-32-new” findet sich unter:
Also tut Joomla zunächst einmal so, als wäre das standardmässig aktive Theme “khepri” für alle Defintionen der Iconklassen zuständig. In unserem Beispiel hat die CSS-Klasse “icon-32-new” folgende Gestalt:
.icon-32-new { background-image: url(../images/toolbar/icon-32-new.png); }
Für ein Vielzahl anderer Schlüsselwörter bringt das Theme “khepri” ebenfalls fertige CSS-Klassen mit:
Mögliche Icon-SChlüsselwörter: (send, delete, help, cancel, config, apply, back,
forward, save, edit, copy, move, new, upload,
assign, html, css, menus, publish, unpublish, restore,
trash, archive, unarchive, preview, default)
Das Theme befindet sich unter
JOOMLA-ROOT:administrator/templates/khepri/
und die ToolbarIcon sind unter
JOOMLA-ROOT:administrator/templates/khepri/images/toolbar/
zu finden
Solltet ihr ein Icon übergeben wollen, welches nicht als Schlüsselwort definiert ist, so packt die CSS-Definition einfach direkt in das entsprechende Extension-Layout und verweist auf die richtigen Pfade des Icons.
Viel Spass beim Ausprobieren!