Whilst creating a new Joomla! component, not yet released, I found the need to add a custom button to the toolbar. A quick search through the books suggested the use of JToolBarHelper::custom(), but it didn’t go into details about where the icon should be located. On further searching in Google I found the following site

Temporaneità

This helped, but it wasn’t exactly what I was looking for, I don’t want someone to change the admin theme and all of a suddon loose the toolbar buttons…

So I looked deeper, remembering that you can add additional styles to the document, I decided to add a custom “toolbar” css file to my component and add it to the document every time that toolbar was used. The final changes to the files are shown below.

In the file toolbar.component.html.php added this inside of my _DEFAULT method

$document =& JFactory::getDocument();
$document->addStyleSheet('/administrator/components/com_component/css/admin.toolbar.css');
//JToolBarHelper::custom('task','normal image', 'rollover image', 'Button label');
JToolBarHelper::custom('sale','sale', 'sale', 'Sale');

I then created my new icon and added it the folder
/administrator/components/com_component/images/toolbar/. Following the format of the other toolbar icons, icon-32-{custom part}.png I named it icon-32-sale.png.

Create a new file /administrator/components/com_component/css/admin.toolbar.css

.icon-32-sale {
background-image:url(../images/toolbar/icon-32-sale.png);
}

Now I have a component with custom buttons that will work as expected regardless of the template the user has chosen.

Tags: CSS, custom, Joomla, PHP, toolbar

This entry was posted on Monday, August 25th, 2008 at 4:29 pm and is filed under Joomla. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.